Shopify {{cart.total_price}} 在 CSS 類之外使用時不會更新

Question

我正在使用 Shopify 的 DEBUT 主題。

我正在處理的主題預覽 - https://j0sobcxwialjqvz8-24806554.shopifypreview.com

我正在嘗試向我的 Shopify 網站上的 AJAX 購物車小部件添加其他功能。 如果總訂單未達到免運費門檻，我主要嘗試將運費添加到購物車的總價中。 我還添加了一個具有相同閾值功能的免費送貨欄。

所以就像 - 如果 {{cart.total_price}} 等於/高於 $25 顯示“免費送貨”，否則 {{cart.total_price}} | 加：7.95

但是，每當我在 AJAX 購物車中使用沒有特定 CSS 類（例如：CSS-Class .total-price）的 {{cart.total_price}} 代碼時。如果里面有產品更改，它不會更新價格AJAX 購物車。

我的一個 Liquid.js 文件中有一個 jQuery 函數，我認為它正在更改 HTML 輸出。

有人可以幫我解決這個問題嗎？

我只想能夠在我的流動代碼上使用基本 Shopify 對象“cart.total_price”，並使其更新價格而無需刷新頁面。

這是我的代碼：

jQuery('document').ready(function() {
  var windowWidth = jQuery(window).width();
  // QTY CHANGES ON MINICART
  var timer = undefined;
  jQuery('.slideout-cart .qty-form input').keyup(function() {
    if (timer) {
      clearTimeout(timer);
    }
    var self = this;
    timer = setTimeout(function() {
      var input = jQuery(self);
      var qty = input.val();
      var productId = parseInt(input.attr('data-id'));
      if (!(jQuery.isNumeric(qty) && Math.floor(qty) == qty && qty >= 0)) {
        updateQty(input, 1, productId);
      } else {
        updateQty(input, qty, productId);
      }
    }, 2000);
  });
  function updateQty(input, qty, productId) {
    input.parent().addClass('loading');
    jQuery.post('/cart/change.js', {
        quantity: qty,
        id: productId
      }, null, "json")
      .done(function(response) {

        if (is_wholesale) {
          window.location.reload();
          return;
        }

        var changed = false;
        if (response.item_count > 0) {
          jQuery('.site-header__cart-count > span:first-child').text(response.item_count);
          jQuery('.total-price').html(Shopify.formatMoney(response.total_price, '$\{\{amount\}\}'));
          jQuery('.site-header__cart .cart-price').html(Shopify.formatMoney(response.total_price, '$\{\{amount\}\}'));
          jQuery('.slideout-cart .cart-bottom .subtotal .price').html(Shopify.formatMoney(response.total_price, '$\{\{amount\}\}'));
          for (var i = 0; i < response.items.length; i++) {
            if (response.items[i].id == input.attr('data-id')) {
              input.val(parseInt(response.items[i].quantity));
              jQuery('.slideout-cart ul li[data-id="' + input.attr('data-id') + '"] .price-box .price').html(Shopify.formatMoney(response.items[i].line_price, '$\{\{amount\}\}'));
              changed = true;
              break;
            };
          }
          if (!changed) {
            jQuery('.slideout-cart ul li[data-id="' + input.attr('data-id') + '"]').remove();
          }
        } else {
          jQuery('.site-header__cart .cart-price').html(Shopify.formatMoney(0, '$\{\{amount\}\}'));
          jQuery('.site-header__cart-count span:first-child').text('0');
          jQuery('.slideout-cart .cart--empty-message').removeClass('hidden');
          jQuery('.slideout-cart .cart-items-wrapper').addClass('hidden');
        }
      })
      .fail(function(xhr, status, error) {
        // error handling
        console.log(error);
      })
      .always(function() {
        setTimeout(function() {
          input.parent().removeClass('loading');
        }, 1000);
      });
  }
  // END QTY CHANGES ON MINICART
});

<div class="cart-bottom">
  <p class="subtotal">
    <span>{{ 'cart.general.subtotal' | t }}</span>
    <span class="price pull-right"><span class="saw-cart-original-total">{{cart.total_price | money}}</span> <span class="saw-cart-total"></span> </span>
  </p>

  {% if section.settings.shipping_text %}
  <p class="shipping-text">{{ section.settings.shipping_text }}</p>{% endif %} {% unless customer.tags.size > 0 %}
  <a href="/checkout" class="btn btn-black">{{ 'cart.general.checkout' | t }}</a> {% endunless %}

  <a href="/cart" class="btn btn-hollow">{{ 'cart.general.view_cart' | t }}</a> {%- assign settings_free_shipping_above = settings.free_shipping_above -%} {%- assign free_shipping_above = settings_free_shipping_above | times: 1 | default:0 -%} {%- assign
  convert_free_shipping = free_shipping_above | times: 100.0 -%} {%- assign missing_till_free_shipping = convert_free_shipping | minus: cart.total_price -%} {%- assign precent_free_shipping = cart.total_price | divided_by: convert_free_shipping | times:
  100 -%}
  <div class="threshold_bar gradient stripe color{%- if precent_free_shipping < 50 %} w_0{%- elsif precent_free_shipping < 80 %} w_50 {%- elsif precent_free_shipping < 100 %} w_80{%- else %} w_100{%- endif -%}"><span class="animate" style="width:{%- if missing_till_free_shipping > 0 and missing_till_free_shipping != convert_free_shipping -%}{{precent_free_shipping}}%{%- elsif missing_till_free_shipping != convert_free_shipping -%}100%{%- else-%}0%{%- endif -%} !important">{%- if missing_till_free_shipping > 0 and missing_till_free_shipping != convert_free_shipping -%}{{precent_free_shipping | round: 1 }}%{%- elsif missing_till_free_shipping != convert_free_shipping -%}100%{%- endif -%}</span></div>

  {%- if missing_till_free_shipping > 0 and missing_till_free_shipping != convert_free_shipping -%}
  <p class="content_threshold">{{ 'general.shipping_threshold.spend' | t }} <strong><span class="amount">{{ missing_till_free_shipping | money }}</span></strong> {{ 'general.shipping_threshold.more' | t }} <strong class="gecko-tooltip">{{ 'general.shipping_threshold.free' | t }}<span class="gecko-tooltip-label">{{ 'general.shipping_threshold.days' | t }}</span></strong>
    <a href="/collections/all?sort_by=best-selling"> {{ 'general.shipping_threshold.continue' | t }}</a>
    <!-- {{ 'general.shipping_threshold.add_more' | t }} {{convert_free_shipping| money }} -->
  </p>
  <div class="cart_total">

    {%- assign minicart_standard_shipping = settings.minicart_standard_shipping -%} {%- assign standard_shipping = minicart_standard_shipping | money_without_currency -%} {%- assign carttotal_with_standard_shipping = cart.total_price | plus: 795 | money_without_currency
    -%}

    <div class="shipping-cost">
      <p>Standard AU Shipping:</p>
      <p>${{ standard_shipping }}</p>
    </div>
    <div class="estimated-total">
      <h4>Total:</h4>
      <p>${{ carttotal_with_standard_shipping }}</p>


      Cart ORIG {{cart.original_total_price}} SubTotal {{cart.items_subtotal_price}}

    </div>
  </div>

  {%- elsif missing_till_free_shipping != convert_free_shipping -%}
  <p class="content_threshold threshold_congrats">
    <!-- <i class="pe-7s-medal" style="font-size: 16px"></i> -->{{ 'general.shipping_threshold.congratulations' | t }}</p>
  <div class="cart_total">

    {%- assign minicart_standard_shipping = settings.minicart_standard_shipping -%} {%- assign standard_shipping = minicart_standard_shipping | money_without_currency -%} {%- assign carttotal_with_standard_shipping = cart.total_price | money_without_currency
    -%}

    <div class="shipping-cost">
      <p>Standard AU Shipping:</p>
      <p>$0.00</p>
    </div>
    <div class="estimated-total">
      <h4>Total:</h4>
      <p>${{ carttotal_with_standard_shipping }}</p>

      Cart ORIG {{cart.original_total_price}} SubTotal {{cart.items_subtotal_price}}

    </div>
  </div>
  {%- endif -%}
</div>

Answer 1

這里的代碼有兩個問題。

你提到的那個：

Javascript 部分正在尋找具有total-price類的元素並更新值 - jQuery('.total-price').html(Shopify.formatMoney(response.total_price, '$\\{\\{amount\\}\\}')) 。 所以你要么給它一個新的類並更新 JS 部分，要么繼續使用total-price類。

你錯過的那個：

免運費邏輯由 Liquid 驅動。 這意味着它僅在頁面加載時呈現。 因此，即使您使上述部分起作用，您顯示的實際消息也不會改變，除非：

• 用戶刷新頁面，或
• 您在上面的 JS 代碼中添加一條規定以更改此消息。

提示：不要在內聯樣式和腳本中使用空格去除{%- ... -%}語法。 它把事情搞砸了。