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

Question

I am trying to add a little line in my Shopify product page where it will show the customer the amount currently in his/her cart, and automatically show whether or not the customer is eligible for free shipping, and the amount needed to hit free shipping.

I have managed to do all the above, with one small problem now: when the customer hits add to cart, the line still shows the same thing until the customer refreshes the page. I did a bit of reading and relaised it's because the cart works on something called AJAX.

I am not a programmer or developer, I am just a site owner, and I have very little knowledge of coding. I just google for solutions and copy and paste and modify code to get my desired effect. But this one really has me stumped, so i appreciate if someone can help me out!

Thank you in advance!

Also I apologise if my code looks messy or I sound like I don't know what I'm talking about. I'm really new to this!

<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>

UPDATE: Ryan, this is what I managed to dig up, I am guessing this is the code that updates the minicart at the top when an item is added to cart?

 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 (Give the spans an id property):

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