Shopify Store 刷新购物车内容。 AJAX 请求
Shopify Store Refresh cart content. AJAX request
我的产品页面上有 shop now
btn。当用户单击此按钮时,页面会打开带有自定义 ajax 模板内容的购物车抽屉。
我用自己的逻辑重写了点击事件。我使用 AJAX 并自行发送添加产品的请求。产品正在添加但未显示在购物车抽屉中。只有在重新加载页面后才会出现。
问题是我可以刷新购物车内容吗?我正在尝试通过内部 html 传递内容模板。不过好像不是液体格式。
这是模板
<script id="CartTemplate" type="text/template">
{% render 'banana-stand-cart-top-container' %}
{% raw %}
<div class="drawer__scrollable">
{{#items}}
<div class="ajaxcart__product appear-animation appear-delay-{{animationRow}}">
<div class="ajaxcart__row">
<div class="grid">
<div class="grid__item one-third">
<a href="{{url}}" class="ajaxcart__product-image"><img src="{{img}}" alt="{{name}}"></a>
</div>
<div class="grid__item two-thirds">
<div class="ajaxcart__product-name--wrapper">
<a href="{{url}}" class="ajaxcart__product-name">{{{name}}}</a>
{{#if variation}}
<div class="ajaxcart__product-meta">{{variation}}</div>
{{/if}}
{{#if selling_plan_name}}
<div class="ajaxcart__product-meta">{{selling_plan_name}}</div>
{{/if}}
{{#properties}}
{{#each this}}
{{#if this}}
<span class="ajaxcart__product-meta">{{@key}}: {{this}}</span>
{{/if}}
{{/each}}
{{/properties}}
</div>
<div class="grid grid--full display-table">
<div class="grid__item display-table-cell one-half">
<label for="updates_{{key}}" class="visually-hidden">{% endraw %}{{ 'products.product.quantity' | t }}{% raw %}</label>
<div class="js-qty__wrapper">
<input type="text" id="updates_{{key}}"
class="js-qty__num"
value="{{itemQty}}"
data-id="{{key}}"
min="0"
aria-label="quantity"
pattern="[0-9]*"
name="updates[]">
<button type="button"
class="js-qty__adjust js-qty__adjust--minus"
aria-label="{% endraw %}{{ 'cart.general.reduce_quantity' | t }}{% raw %}">
{% endraw %}<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-minus" viewBox="0 0 20 20"><path fill="#444" d="M17.543 11.029H2.1A1.032 1.032 0 0 1 1.071 10c0-.566.463-1.029 1.029-1.029h15.443c.566 0 1.029.463 1.029 1.029 0 .566-.463 1.029-1.029 1.029z"/></svg>{% raw %}
<span class="icon__fallback-text" aria-hidden="true">−</span>
</button>
<button type="button"
class="js-qty__adjust js-qty__adjust--plus"
aria-label="{% endraw %}{{ 'cart.general.increase_quantity' | t }}{% raw %}">
{% endraw %}<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-plus" viewBox="0 0 20 20"><path fill="#444" d="M17.409 8.929h-6.695V2.258c0-.566-.506-1.029-1.071-1.029s-1.071.463-1.071 1.029v6.671H1.967C1.401 8.929.938 9.435.938 10s.463 1.071 1.029 1.071h6.605V17.7c0 .566.506 1.029 1.071 1.029s1.071-.463 1.071-1.029v-6.629h6.695c.566 0 1.029-.506 1.029-1.071s-.463-1.071-1.029-1.071z"/></svg>{% raw %}
<span class="icon__fallback-text" aria-hidden="true">+</span>
</button>
</div>
</div>
<div class="grid__item display-table-cell one-half text-right">
{{#if discountsApplied}}
<small class="cart__price--strikethrough">{{{price}}}</small>
<span class="ajaxcart__price">
{{{discountedPrice}}}
</span>
{{else}}
<span class="ajaxcart__price">
{{{price}}}
</span>
{{/if}}
</div>
</div>
<div class="grid grid--full display-table">
{{#if discountsApplied}}
<div class="grid__item text-right">
{{#each discounts}}
<small class="ajaxcart__discount cart__discount">
{{this.discount_application.title}} (-{{{this.formattedAmount}}})
</small>
{{/each}}
</div>
{{/if}}
{{#if unitBase}}
<div class="grid__item text-right">
<div class="product__unit-price">
{{{ unitPrice }}}/{{{ unitBase }}}
</div>
</div>
{{/if}}
</div>
</div>
</div>
</div>
</div>
{{/items}}
{% endraw %}{% if settings.cart_notes_enable %}{% raw %}
<div class="appear-animation appear-delay-{{lastAnimationRow}}">
<label for="CartSpecialInstructions" class="ajaxcart__note">{% endraw %}{{ 'cart.general.note' | t }}{% raw %}</label>
<textarea name="note" class="input-full cart-notes" id="CartSpecialInstructions">{{note}}</textarea>
</div>
{% endraw %}{% endif %}{% raw %}
</div>
<div class="drawer__footer appear-animation appear-delay-{{lastAnimationRow}}">
{{#if cartDiscounts }}
<div class="grid grid--full">
<div class="grid__item one-half">
<p class="ajaxcart__subtotal">{% endraw %}{{ 'cart.general.discounts' | t }}{% raw %}</p>
</div>
<div class="grid__item one-half text-right">
{{#each cartDiscounts}}
<p class="ajaxcart__price cart__discount">
{{this.title}} (-{{{this.formattedAmount}}})
</p>
{{/each}}
</div>
</div>
{{/if}}
<div class="grid grid--full">
<div class="grid__item one-half">
<p class="ajaxcart__subtotal">{% endraw %}{{ 'cart.general.subtotal' | t }}{% raw %}</p>
</div>
<div class="grid__item one-half text-right">
<p class="ajaxcart__price"><span class="tdf-cart-total-parent">{{totalPrice}}</span></p>
</div>
</div>
<p class="ajaxcart__note">
{% endraw %}{{ 'cart.general.shipping_at_checkout' | t }}{% raw %}
</p>
{% endraw %}{% if settings.cart_terms_conditions_enable %}
<p class="ajaxcart__note ajaxcart__note--terms">
<input type="checkbox" id="CartAgree" />
<label for="CartAgree">
{% if settings.cart_terms_conditions_link != blank %}
{{ 'cart.general.terms_html' | t: url: settings.cart_terms_conditions_link }}
{% else %}
{{ 'cart.general.terms' | t }}
{% endif %}
</label>
</p>
{% endif %}{% raw %}
{% endraw %}
{% if additional_checkout_buttons and settings.cart_additional_buttons %}
<div class="additional-checkout-buttons additional-checkout-buttons--vertical">{{ content_for_additional_checkout_buttons }}</div>
{% endif %}
{% raw %}
<button type="submit" class="btn btn--full cart__checkout{% endraw %}{% if settings.cart_terms_conditions_enable %}{% raw %} cart__checkout--ajax{% endraw %}{% endif %}{% raw %}" name="checkout">
{% endraw %}{{ 'cart.general.checkout' | t }}{% raw %}
</button>
</div>
{% endraw %}
通常,有一些方法 (js-function) 可以让您用新物品重建购物车。
您需要检查负责显示 drawer-cart
的 js-code
因此,需要触发一些可以在 theme.js 文件中找到的事件。在我的例子中,我需要添加这个:
document.dispatchEvent(new CustomEvent('cart:build', {
detail: {
cart: cart
}
}));
我的产品页面上有 shop now
btn。当用户单击此按钮时,页面会打开带有自定义 ajax 模板内容的购物车抽屉。
我用自己的逻辑重写了点击事件。我使用 AJAX 并自行发送添加产品的请求。产品正在添加但未显示在购物车抽屉中。只有在重新加载页面后才会出现。
问题是我可以刷新购物车内容吗?我正在尝试通过内部 html 传递内容模板。不过好像不是液体格式。
这是模板
<script id="CartTemplate" type="text/template">
{% render 'banana-stand-cart-top-container' %}
{% raw %}
<div class="drawer__scrollable">
{{#items}}
<div class="ajaxcart__product appear-animation appear-delay-{{animationRow}}">
<div class="ajaxcart__row">
<div class="grid">
<div class="grid__item one-third">
<a href="{{url}}" class="ajaxcart__product-image"><img src="{{img}}" alt="{{name}}"></a>
</div>
<div class="grid__item two-thirds">
<div class="ajaxcart__product-name--wrapper">
<a href="{{url}}" class="ajaxcart__product-name">{{{name}}}</a>
{{#if variation}}
<div class="ajaxcart__product-meta">{{variation}}</div>
{{/if}}
{{#if selling_plan_name}}
<div class="ajaxcart__product-meta">{{selling_plan_name}}</div>
{{/if}}
{{#properties}}
{{#each this}}
{{#if this}}
<span class="ajaxcart__product-meta">{{@key}}: {{this}}</span>
{{/if}}
{{/each}}
{{/properties}}
</div>
<div class="grid grid--full display-table">
<div class="grid__item display-table-cell one-half">
<label for="updates_{{key}}" class="visually-hidden">{% endraw %}{{ 'products.product.quantity' | t }}{% raw %}</label>
<div class="js-qty__wrapper">
<input type="text" id="updates_{{key}}"
class="js-qty__num"
value="{{itemQty}}"
data-id="{{key}}"
min="0"
aria-label="quantity"
pattern="[0-9]*"
name="updates[]">
<button type="button"
class="js-qty__adjust js-qty__adjust--minus"
aria-label="{% endraw %}{{ 'cart.general.reduce_quantity' | t }}{% raw %}">
{% endraw %}<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-minus" viewBox="0 0 20 20"><path fill="#444" d="M17.543 11.029H2.1A1.032 1.032 0 0 1 1.071 10c0-.566.463-1.029 1.029-1.029h15.443c.566 0 1.029.463 1.029 1.029 0 .566-.463 1.029-1.029 1.029z"/></svg>{% raw %}
<span class="icon__fallback-text" aria-hidden="true">−</span>
</button>
<button type="button"
class="js-qty__adjust js-qty__adjust--plus"
aria-label="{% endraw %}{{ 'cart.general.increase_quantity' | t }}{% raw %}">
{% endraw %}<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-plus" viewBox="0 0 20 20"><path fill="#444" d="M17.409 8.929h-6.695V2.258c0-.566-.506-1.029-1.071-1.029s-1.071.463-1.071 1.029v6.671H1.967C1.401 8.929.938 9.435.938 10s.463 1.071 1.029 1.071h6.605V17.7c0 .566.506 1.029 1.071 1.029s1.071-.463 1.071-1.029v-6.629h6.695c.566 0 1.029-.506 1.029-1.071s-.463-1.071-1.029-1.071z"/></svg>{% raw %}
<span class="icon__fallback-text" aria-hidden="true">+</span>
</button>
</div>
</div>
<div class="grid__item display-table-cell one-half text-right">
{{#if discountsApplied}}
<small class="cart__price--strikethrough">{{{price}}}</small>
<span class="ajaxcart__price">
{{{discountedPrice}}}
</span>
{{else}}
<span class="ajaxcart__price">
{{{price}}}
</span>
{{/if}}
</div>
</div>
<div class="grid grid--full display-table">
{{#if discountsApplied}}
<div class="grid__item text-right">
{{#each discounts}}
<small class="ajaxcart__discount cart__discount">
{{this.discount_application.title}} (-{{{this.formattedAmount}}})
</small>
{{/each}}
</div>
{{/if}}
{{#if unitBase}}
<div class="grid__item text-right">
<div class="product__unit-price">
{{{ unitPrice }}}/{{{ unitBase }}}
</div>
</div>
{{/if}}
</div>
</div>
</div>
</div>
</div>
{{/items}}
{% endraw %}{% if settings.cart_notes_enable %}{% raw %}
<div class="appear-animation appear-delay-{{lastAnimationRow}}">
<label for="CartSpecialInstructions" class="ajaxcart__note">{% endraw %}{{ 'cart.general.note' | t }}{% raw %}</label>
<textarea name="note" class="input-full cart-notes" id="CartSpecialInstructions">{{note}}</textarea>
</div>
{% endraw %}{% endif %}{% raw %}
</div>
<div class="drawer__footer appear-animation appear-delay-{{lastAnimationRow}}">
{{#if cartDiscounts }}
<div class="grid grid--full">
<div class="grid__item one-half">
<p class="ajaxcart__subtotal">{% endraw %}{{ 'cart.general.discounts' | t }}{% raw %}</p>
</div>
<div class="grid__item one-half text-right">
{{#each cartDiscounts}}
<p class="ajaxcart__price cart__discount">
{{this.title}} (-{{{this.formattedAmount}}})
</p>
{{/each}}
</div>
</div>
{{/if}}
<div class="grid grid--full">
<div class="grid__item one-half">
<p class="ajaxcart__subtotal">{% endraw %}{{ 'cart.general.subtotal' | t }}{% raw %}</p>
</div>
<div class="grid__item one-half text-right">
<p class="ajaxcart__price"><span class="tdf-cart-total-parent">{{totalPrice}}</span></p>
</div>
</div>
<p class="ajaxcart__note">
{% endraw %}{{ 'cart.general.shipping_at_checkout' | t }}{% raw %}
</p>
{% endraw %}{% if settings.cart_terms_conditions_enable %}
<p class="ajaxcart__note ajaxcart__note--terms">
<input type="checkbox" id="CartAgree" />
<label for="CartAgree">
{% if settings.cart_terms_conditions_link != blank %}
{{ 'cart.general.terms_html' | t: url: settings.cart_terms_conditions_link }}
{% else %}
{{ 'cart.general.terms' | t }}
{% endif %}
</label>
</p>
{% endif %}{% raw %}
{% endraw %}
{% if additional_checkout_buttons and settings.cart_additional_buttons %}
<div class="additional-checkout-buttons additional-checkout-buttons--vertical">{{ content_for_additional_checkout_buttons }}</div>
{% endif %}
{% raw %}
<button type="submit" class="btn btn--full cart__checkout{% endraw %}{% if settings.cart_terms_conditions_enable %}{% raw %} cart__checkout--ajax{% endraw %}{% endif %}{% raw %}" name="checkout">
{% endraw %}{{ 'cart.general.checkout' | t }}{% raw %}
</button>
</div>
{% endraw %}
通常,有一些方法 (js-function) 可以让您用新物品重建购物车。 您需要检查负责显示 drawer-cart
的 js-code因此,需要触发一些可以在 theme.js 文件中找到的事件。在我的例子中,我需要添加这个:
document.dispatchEvent(new CustomEvent('cart:build', {
detail: {
cart: cart
}
}));