在CSS类之外使用Shopify {{cart.total_price}}不会更新

问题描述

我正在使用Shopify中的DEBUT主题。

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

我正在尝试向Shopify网站上的AJAX购物车小部件添加其他功能。 我主要想做的是，如果总订单未达到免费送货的门槛，则在购物车的总价格中增加运费。我还将添加具有相同阈值功能的免费送货酒吧。

例如-如果{{cart.total_price}}等于/高于$ 25，则显示“免费送货”，否则显示{{cart.total_price}} |加：7.95

但是，每当我使用{{cart.total_price}}代码时，AJAX购物车中都没有特定的CSS类（例如：css-Class .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,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>

解决方法

这里的代码有两个问题。

您提到的人：

Javascript部分正在寻找具有total-price类的元素，并更新值-jQuery('.total-price').html(Shopify.formatMoney(response.total_price,'$\{\{amount\}\}'))。因此，您可以给它一个新的类并更新JS部分，或者继续使用total-price类。

您错过的那个：

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

• 用户刷新页面，或
• 您在上面的JS代码中添加了一条规定，以对此消息进行更改。

Protip：不要在嵌入式样式和脚本中使用空格去除{%- ... -%}语法。搞砸了。