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 代码中添加一个条款来更改此消息。

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