#shopify
Вопрос:
Я хочу обновить ящик корзины, когда нажимаю кнопку добавить в корзину, в настоящее время полученное значение, но только когда я перезагружаю страницу, есть какой-либо способ обновить значение без перезагрузки страницы. Я использую тему дебюта.
Это мой код:
<form action="{{ routes.cart_url }}" method="post" novalidate class="cart">
<div class="cart_popup_wrapper" data-cart-line-items>
{%- for item in cart.items -%}
<div class="cart__row" data-cart-item data-cart-item-key="{{ item.key }}" data-cart-item-url="{{ item.url }}" data-cart-item-title="{{ item.title }}" data-cart-item-index="{{ forloop.index }}" data-cart-item-quantity="{{ item.quantity }}">
<div class="cart_popup" data-cart-table-cell>
<div class="cart__product-information cart_popup_data">
<div class="cart_popup_image-wrapper">
<img class="cart__image{% if item.image == null %} hide{% endif %}" src="{{ item | img_url: 'x190' }}" alt="{{ item.image.alt | escape }}" data-cart-item-image>
</div>
<div class="cart_popup_data">
<div class="list-view-item__title">
<a href="{{ item.url }}" class="cart__product-title" data-cart-item-title>
{{ item.product.title }}
</a>
</div>
{%- assign variant_options = 'template ' | split: ' ' -%}
{%- if item.product.has_only_default_variant != true -%}
{%- assign variant_options = item.options_with_values -%}
{%- endif -%}
{%- assign property_size = item.properties | size -%}
<ul class="product-details{% if item.product.has_only_default_variant and property_size == 0 %} hide{% endif %}" data-cart-item-details aria-label="{{ 'cart.label.product_details' | t }}">
{%- for option in variant_options -%}
<li class="product-details__item product-details__item--variant-option{% if item.product.has_only_default_variant %} hide{% endif %}" data-cart-item-option>{{ option.name }}: {{ option.value }}</li>
{%- endfor -%}
{%- assign properties = 'template ' | split: ' ' -%}
{%- if property_size > 0 -%}
{%- assign properties = item.properties -%}
{%- endif -%}
{%- for p in properties -%}
{%- unless p.last == blank -%}
<li class="product-details__item product-details__item--property{%if property_size == 0%} hide{% endif %}" data-cart-item-property>
<span class="product-details__item-label" data-cart-item-property-name>{{ p.first }}: </span>
{%- comment -%}
Check if there was an uploaded file associated
{%- endcomment -%}
<span data-cart-item-property-value>
{%- if p.last contains '/uploads/' -%}
<a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{%- else -%}
{{ p.last }}
{%- endif -%}
</span>
</li>
{%- endunless -%}
{%- endfor -%}
</ul>
<div class="cart_popup__price">
{%- assign hasDiscount = false -%}
{%- if item.original_price != item.final_price -%}
{%- assign hasDiscount = true -%}
{%- endif -%}
<div data-cart-item-price>
<dl data-cart-item-price-list>
{%- comment -%}
Markup template for discount item
{%- endcomment -%}
<div {% unless hasDiscount %}class="hide" {% endunless %}data-cart-item-discounted-price-group>
<dt>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
<s data-cart-item-original-price>{{ item.original_price | money }}</s>
</dd>
<dt>
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
</dt>
<dd>
<span class="order-discount" data-cart-item-final-price>{{ item.final_price | money }}</span>
</dd>
</div>
{%- comment -%}
Markup template for regular price item
{%- endcomment -%}
<div {% if hasDiscount %}class="hide" {% endif %}data-cart-item-regular-price-group>
<dt>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd data-cart-item-regular-price>
{{ item.original_price | money }}
</dd>
</div>
{%- comment -%}
Markup template for unit price
{%- endcomment -%}
<div {% unless item.unit_price_measurement %}class="hide" {% endunless %}data-unit-price-group>
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
</dt>
<dd>
<span class="price-unit-price">
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}amp;nbsp;</span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
{%- if item.unit_price_measurement.reference_value != 1 -%}
{{- item.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ item.unit_price_measurement.reference_unit }}
{%- endcapture -%}
<span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}<span data-unit-price-base-unit>{{- unit_price_base_unit -}}</span>
</span>
</dd>
</div>
</dl>
</div>
{%- assign itemDiscounts = 'template ' | split: ' ' -%}
{%- if item.line_level_discount_allocations != blank -%}
{%- assign itemDiscounts = item.line_level_discount_allocations -%}
{%- endif -%}
<ul class="order-discount order-discount--list order-discount--title order-discount--cart{% if item.line_level_discount_allocations == blank %} hide{% endif %}" aria-label="{{ 'customer.order.discount' | t }}" data-cart-item-discount-list>
{%- for discount_allocation in itemDiscounts -%}
<li class="order-discount__item" data-cart-item-discount>
{% include 'icon-saletag' %}
<span data-cart-item-discount-title>
{{- discount_allocation.discount_application.title -}}
</span> (-<span data-cart-item-discount-amount>{{ discount_allocation.amount | money }}</span>)
</li>
{%- endfor -%}
</ul>
<div class="cart__qty medium-up--hide">
<label for="updates_{{ item.key }}" class="cart__qty-label" aria-label="{{ 'cart.label.quantity' | t }}" data-quantity-label-mobile>
{{ 'cart.label.qty' | t }}
</label>
<input id="updates_{{ item.key }}" class="cart__qty-input" type="number"
value="{{ item.quantity }}" min="0" pattern="[0-9]*"
data-quantity-input data-quantity-item="{{ forloop.index }}" data-quantity-input-mobile>
</div>
<div class="cart__qty-error-message-wrapper cart__qty-error-message-wrapper--mobile hide" role="alert" data-cart-quantity-error-message-wrapper>
<span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
{% include 'icon-error' %}
<span class="cart__qty-error-message" data-cart-quantity-error-message></span>
</div>
</div>
<div class="qty_remove">
<div class="cart__quantity-td text-right small--hide">
<div class="cart_drawer__qty">
<label for="updates_large_{{ item.key }}" class="cart__qty-label" data-quantity-label-desktop>{{ 'cart.label.quantity' | t }}</label>
<span class="minus_cart_item">-</span>
<input id="updates_large_{{ item.key }}" class="cart__qty-input" type="number"
name="updates[]" value="{{ item.quantity }}" min="0" pattern="[0-9]*"
data-quantity-input data-quantity-item="{{ forloop.index }}" data-quantity-input-desktop>
<span class="plus_cart_item"> </span>
</div>
<div class="cart__qty-error-message-wrapper cart__qty-error-message-wrapper--desktop hide" role="alert" data-cart-quantity-error-message-wrapper>
<span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
{% include 'icon-error' %}
<span class="cart__qty-error-message" data-cart-quantity-error-message></span>
</div>
</div>
<p class="cart__remove">
<a href="/cart/change?line={{ forloop.index }}amp;amp;quantity=0" class="text-link text-link--accent" aria-label="{{ 'cart.label.remove' | t: product: item.title }}" data-cart-remove>{{ 'cart.general.remove' | t }}</a>
</p>
</div>
</div>
</div>
</div >
</div>
{%- endfor -%}
</div>
Ответ №1:
Перезагрузите Страницу Корзины При изменении количества Товара
<script>
var firstChange = true;
function reloadCart(){
var target = document.querySelector(`[data-cart-subtotal]`);
if (!target)return
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (firstChange){
firstChange = false;
return;
} else{
firstChange = true;
setTimeout(window.location.reload(), 1000);
}
});
});
var config = { attributes: true, childList: true, characterData: true };
observer.observe(target, config);
}
document.addEventListener("DOMContentLoaded", function() {
reloadCart();
});
selectElements = document.getElementsByClassName(`cart__qty-input`);
var allOne = true;
for (i = 0; i < selectElements.length; i ) {
if (selectElements[i].getAttribute("value") > 1) {
allOne = false;
}
}
// console.log(allOne);
if (allOne == true) {
firstChange = false;
}
</script>