如何在 Shopify Ajax 购物车更新上运行 Javascript 事件？答案

【问题标题】：How do I run a Javascript event on Shopify Ajax cart update?如何在 Shopify Ajax 购物车更新上运行 Javascript 事件？
【发布时间】：2019-01-11 13:28:32
【问题描述】：

我正在尝试在我的 Shopify 产品页面中添加一小行，它将向客户显示他/她的购物车中当前的金额，并自动显示客户是否有资格获得免费送货，以及需要的金额免费送货。

我已经完成了上述所有操作，但现在有一个小问题：当客户点击添加到购物车时，该行仍然显示相同的内容，直到客户刷新页面。我做了一些阅读并发布了它，因为购物车可以在称为 AJAX 的东西上运行。

我不是程序员或开发人员，我只是一个网站所有者，而且我对编码知之甚少。我只是在谷歌上搜索解决方案，然后复制、粘贴和修改代码以获得我想要的效果。但是这个真的让我很难过，所以如果有人可以帮助我，我很感激！

提前谢谢你！

另外，如果我的代码看起来很乱，或者我听起来好像我不知道我在说什么，我也很抱歉。我真的很陌生！

<div id="freeship" style="font-weight:bold; padding: 10px;">Your cart total is <span style="color:#f64c3f">{{ cart.total_price | money }}</span>. You qualify for free shipping!</div>

<div id="nofreeship" style="font-weight:bold; padding: 10px;">Your cart total is <span style="color:#f64c3f">{{ cart.total_price | money }}</span>.<br>Spend {{ 2500 | minus: cart.total_price | money }} more to qualify for free shipping!</div>
<script>
          !function checkprice() {
            var y = "2600" ;
            var x = "{{ cart.total_price }}";
          if (Number(x) > Number(y)) {
               document.getElementById("freeship").style.display = "block"; 
               document.getElementById("nofreeship").style.display = "none";
          } else {
               document.getElementById("freeship").style.display = "none";    
               document.getElementById("nofreeship").style.display = "block";     
          }

          } ();

</script>

更新： Ryan，这是我设法挖掘出来的，我猜这是在将商品添加到购物车时更新顶部迷你购物车的代码？

 function checkprice() {
                var baseprice = "2500" ;
                var carttotal = "{{ cart.total_price }}";
              if (Number(carttotal) > Number(baseprice) {
  document.getElementById("freeship").style.display = "none";
                document.getElementById("nofreeship").style.display = "block";
              } else {
  document.getElementById("freeship").style.display = "block";
                document.getElementById("nofreeship").style.display = "none";

              }

              };

ProductView.prototype.updateMiniCart = function(cart) {
    var i, item, itemProperties, itemText, j, len, miniCartItemsWrap, productPrice, propertiesArray, propertyKeysArray, ref, variant;
    miniCartItemsWrap = $(".mini-cart-items-wrap");
    miniCartItemsWrap.empty();
    if (cart.item_count !== 1) {
      itemText = Theme.cartItemsOther;
    } else {
      itemText = Theme.cartItemsOne;
      $(".mini-cart .options").show();
      miniCartItemsWrap.find(".no-items").hide();
    }
    $(".mini-cart-wrap label").html("<span class='item-count'>" + cart.item_count + "</span> " + itemText);
    ref = cart.items;
    for (j = 0, len = ref.length; j < len; j++) {
      item = ref[j];
      productPrice = Shopify.formatMoney(item.line_price, Theme.moneyFormat);
      variant = item.variant_title ? "<p class='variant'>" + item.variant_title + "</p>" : "";
      itemProperties = "";
      if (item.properties) {
        propertyKeysArray = Object.keys(item.properties);
        propertiesArray = _.values(item.properties);
        i = 0;
        while (i < propertyKeysArray.length) {
          if (propertiesArray[i].length) {
            itemProperties = itemProperties + ("<p class=\"property\">\n    <span class=\"property-label\">" + propertyKeysArray[i] + ":</span>\n    <span class=\"property-value\">" + propertiesArray[i] + "</span>\n</p>");
          }
          i++;
        }
      }
      miniCartItemsWrap.append("<div id=\"item-" + item.variant_id + "\" class=\"item clearfix\">\n    <div class=\"image-wrap\">\n        <img alt=\"" + item.title + "\" src=\"" + item.image + "\">\n        <a class=\"overlay\" href=\"" + item.url + "\"></a>\n    </div>\n    <div class=\"details\">\n        <p class=\"brand\">" + item.vendor + "</p>\n        <p class=\"title\"><a href=\"" + item.url + "\">" + item.product_title + "</a><span class=\"quantity\">× <span class=\"count\">" + item.quantity + "</span></span></p>\n        <p class=\"price\"><span class=\"money\">" + productPrice + "</span></p>\n        " + variant + "\n        " + itemProperties + "\n    </div>\n</div>");
    };checkprice()

    if (Theme.currencySwitcher) {
      return $(document.body).trigger("switch-currency");
    }
  };

【问题讨论】：

此函数在页面加载时运行一次，这就是用户必须刷新页面才能看到更改的原因。您可以将event handler 添加到购物车，以便在添加或删除商品时调用此函数。如果您可以发布您的购物车的 HTML 或任何用于添加或删除商品的相关代码，我们可以为您提供更多帮助。至于代码中的!function，这篇文章解释了程序员在做什么（stackoverflow.com/questions/3755606/…）
嗨@Ryan Wilson，感谢您的快速回复！我是“程序员”，代码只是我拼凑的东西，我添加了 ! 功能，以便在页面加载时正确显示。就像我说的，我对此非常陌生，所以当您将 HTML 放到我的购物车中时，您能指出我要寻找的内容吗？我还假设 {{ cart.total_price | money }} 将是一个问题，因为当我刷新而不重新加载页面时，它不会正确加载，对吗？
我的意思是页面内的元素，如果它是某种图像或其他东西，则代表您的购物车，但这可能并不重要，更重要的是您用于添加或的代码从购物车中删除商品。
好的，我已经找到了一些我认为可能是您想要的东西。如果不是正确的请告诉我！
您可以尝试在新帖子中在此行之前添加checkprice(); if (Theme.currencySwitcher) { return $(document.body).trigger("switch-currency"); }。因为我不确定变量 cart.total_price 是否会是最新的，如果不是，您可能需要在 for 循环的迭代中添加到 cart.total_price 以将每个项目的成本添加到总成本中，但从理论上讲，如果 cart.total_price 在循环结束时是最新的，那么此时调用 checkprice() 应该会为您提供所需的结果，而无需刷新。

标签： javascript ajax shopify

【解决方案1】：

HTML（给跨度一个 id 属性）：

<div id="freeship" style="font-weight:bold; padding: 10px;">Your cart total is <span style="color:#f64c3f" id="spnQualifyTotal">{{ cart.total_price | money }}</span>. You qualify for free shipping!</div>

<div id="nofreeship" style="font-weight:bold; padding: 10px;">Your cart total is <span style="color:#f64c3f" id="spnMoreTotal">{{ cart.total_price | money }}</span>.<br>Spend {{ 2500 | minus: cart.total_price | money }} more to qualify for free shipping!</div>

Javascript：

//Change this to take in the new total
function checkprice(total) {
                var baseprice = "2500" ;
                //Does this next line work???
                //var carttotal = "{{ cart.total_price }}"; Wont need this anymore
                //If so you can set the span's innerText to the new total
                document.getElementById('spnQualifyTotal').innerText = total;
                document.getElementById('spnMoreTotal').innerText = total;
              if (Number(total) > Number(baseprice)) {
  document.getElementById("freeship").style.display = "none";
                document.getElementById("nofreeship").style.display = "block";
              } else {
  document.getElementById("freeship").style.display = "block";
                document.getElementById("nofreeship").style.display = "none";

              }

              };

ProductView.prototype.updateMiniCart = function(cart) {
    var i, item, itemProperties, itemText, j, len, miniCartItemsWrap, 
    productPrice, propertiesArray, propertyKeysArray, ref, 
    variant, newTotal; //See the newTotal variable to get the total of all items in cart
    miniCartItemsWrap = $(".mini-cart-items-wrap");
    miniCartItemsWrap.empty();
    if (cart.item_count !== 1) {
      itemText = Theme.cartItemsOther;
    } else {
      itemText = Theme.cartItemsOne;
      $(".mini-cart .options").show();
      miniCartItemsWrap.find(".no-items").hide();
    }
    $(".mini-cart-wrap label").html("<span class='item-count'>" + cart.item_count + "</span> " + itemText);
    ref = cart.items;
    for (j = 0, len = ref.length; j < len; j++) {
      item = ref[j];
      productPrice = Shopify.formatMoney(item.line_price, Theme.moneyFormat);
      newTotal += item.line_price; //Adding each item's cost to the newTotal
      variant = item.variant_title ? "<p class='variant'>" + item.variant_title + "</p>" : "";
      itemProperties = "";
      if (item.properties) {
        propertyKeysArray = Object.keys(item.properties);
        propertiesArray = _.values(item.properties);
        i = 0;
        while (i < propertyKeysArray.length) {
          if (propertiesArray[i].length) {
            itemProperties = itemProperties + ("<p class=\"property\">\n    <span class=\"property-label\">" + propertyKeysArray[i] + ":</span>\n    <span class=\"property-value\">" + propertiesArray[i] + "</span>\n</p>");
          }
          i++;
        }
      }
      miniCartItemsWrap.append("<div id=\"item-" + item.variant_id + "\" class=\"item clearfix\">\n    <div class=\"image-wrap\">\n        <img alt=\"" + item.title + "\" src=\"" + item.image + "\">\n        <a class=\"overlay\" href=\"" + item.url + "\"></a>\n    </div>\n    <div class=\"details\">\n        <p class=\"brand\">" + item.vendor + "</p>\n        <p class=\"title\"><a href=\"" + item.url + "\">" + item.product_title + "</a><span class=\"quantity\">× <span class=\"count\">" + item.quantity + "</span></span></p>\n        <p class=\"price\"><span class=\"money\">" + productPrice + "</span></p>\n        " + variant + "\n        " + itemProperties + "\n    </div>\n</div>");
    };
    checkprice(newTotal); //Pass in the newTotal variable to checkprice(total);

    if (Theme.currencySwitcher) {
      return $(document.body).trigger("switch-currency");
    }
  };

【讨论】：

感谢瑞恩！是的，这将完美运行，您提到的行不起作用，因为它是 Shopify 液体变量，我会做一些谷歌搜索，看看如何更新该变量。
@KelvinLee 我很困惑，在您的一条评论中您说一切正常，但是您需要更新跨度，如果它正在确定是否显示特定消息以了解他们是否获得了回扣什么的，那这怎么行不通？
Ryan，很抱歉不清楚，工作部分是将商品添加到购物车时调用的 JS，但不起作用的是 {{ cart.total_price }}，通过添加JS 什么都不做，因为它只会显示为 {{ cart.total_price }}，而不是反映实际的当前购物车总数。我怀疑这是因为 Shopify 仅在页面加载期间将所有这些变量转换为数字，因此之后通过 JS 添加它们没有任何作用。
@KelvinLee 这就是我所害怕的。您可能需要参考我之前的一个 cmets，在 for 循环中添加每个项目的价格，我会更新我的答案
@KelvinLee 我更新了我的答案，并在我添加或更改的新内容上留下了 cmets。