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;

});

Answer 1

这里的代码有两个问题。你提到的那个：Javascript 部分正在寻找具有total-price类的元素并更新值 - jQuery('.total-price').html(Shopify.formatMoney(response.total_price, '$\{\{amount\}\}'))。所以你要么给它一个新类并更新 JS 部分，要么继续使用这个total-price类。你错过的那个：免费送货逻辑由 Liquid 驱动。这意味着它仅在页面加载时呈现。因此，即使您使上述内容起作用，您显示的实际消息也不会改变，除非：用户刷新页面，或者您在上面的 JS 代码中添加一个条款来更改此消息。提示：不要{%- ... -%}在内联样式和脚本中使用空格删除语法。它把事情搞砸了。