Shopify {{cart.total_price}} 在 CSS class 之外使用时未更新

Question

我正在使用 Shopify 的 DEBUT 主题。

我正在处理的主题预览 - https://j0sobcxwialjqvz8-24806554.shopifypreview.com

我正在尝试向我的 Shopify 网站上的 AJAX 购物车小部件添加其他功能。主要是我想做的是在总订单未达到免费送货门槛的情况下，将运费添加到购物车的总价中。我还添加了一个具有相同阈值功能的免费送货栏。

所以类似 - 如果 {{cart.total_price}} 是 equal/above 25 美元显示“免费送货”否则 {{cart.total_price}} |加上：7.95

但是，每当我使用没有特定 CSS class 的 {{cart.total_price}} 代码时（例如：CSS-Class .total -price) inside the AJAX Cart.. 如果 AJAX Cart 中的产品发生变化，它不会更新价格。

我的一个 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>[=14=].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 class 的元素并更新值 - jQuery('.total-price').html(Shopify.formatMoney(response.total_price, '$\{\{amount\}\}'))。所以你要么给它一个新的 class 并更新 JS 部分，要么继续使用 total-price class.

你错过的那个：

免运费逻辑由 Liquid 驱动。这意味着它仅在页面加载时呈现。因此，即使您使上述内容起作用，您显示的实际消息也不会改变，除非：

用户刷新页面，或者
您在上面的JS代码中添加一个条款来更改此消息。

提示：不要在内联样式和脚本中使用空格删除 {%- ... -%} 语法。它把事情搞砸了。

Shopify {{cart.total_price}} 在 CSS class 之外使用时未更新

Shopify {{cart.total_price}} not updating when used outside of CSS class

javascript

ajax

jquery

liquid

shopify