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

Question

我正在尝试在Shopify产品页面上添加一小行，该行将向客户显示其购物车中当前的金额，并自动显示该客户是否有资格享受免费送货以及所需的金额。免费送货。

我已经设法完成上述所有操作，现在有一个小问题：当客户点击添加到购物车时，该行仍显示相同的内容，直到客户刷新页面为止。我做了一些阅读，发现这是因为购物车可以在AJAX上工作。

我不是程序员或开发人员，我只是网站所有者，而且我对编码的知识很少。我只是用google搜索解决方案，然后复制并粘贴和修改代码以获得我想要的效果。但这真的让我感到难过，因此，如果有人可以帮助我，我将不胜感激！

提前谢谢！

如果代码看起来凌乱，或者听起来我不知道我在说什么，我也深表歉意。我真的很陌生！

<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");
    }
  };

Answer 1

HTML（为spans提供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");
    }
  };