Shopify Store 刷新购物车内容。 AJAX 请求

Question

我的产品页面上有 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">&minus;</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 %}

Answer 1

通常，有一些方法 (js-function) 可以让您用新物品重建购物车。您需要检查负责显示 drawer-cart

的 js-code

Answer 2

因此，需要触发一些可以在 theme.js 文件中找到的事件。在我的例子中，我需要添加这个：

 document.dispatchEvent(new CustomEvent('cart:build', {
    detail: {
      cart: cart
    }
 }));

Shopify Store 刷新购物车内容。 AJAX 请求

Shopify Store Refresh cart content. AJAX request

javascript

shopify

liquid

drawer

shopify-template