How do I run a Javascript event on Shopify Ajax cart update?

1
votes

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");
    }
  };
1
javascriptajaxshopify
This function runs once on page load, that is why the user has to refresh the page to see the change. You could add an event handler to the shopping cart so that it calls this function when an item is added or removed. If you can post the HTML for your shopping cart or any relevant code for adding or removing an item we can help you more. As far as the !function in the code, this post explains what the programmer was doing (stackoverflow.com/questions/3755606/…) - Ryan Wilson
Hi @Ryan Wilson, thank you for your quick reply! I am the "programmer", the code is just something I cobbled together, and I added the !function so on page load it would display properly. Like I said, I am terribly new to this, so can you point me to what I sould be looking out for when you say the HTML to my shopping cart? I am also assuming that the {{ cart.total_price | money }} will be an issue because that will not load properly when I refresh the <span> without reloading the page, am I right? - Kelvin Lee
I meant the element inside the page which represents your shopping cart if it is some kind of image or something, but that may not really matter, the more important piece is the code you are using to add or remove an item from the shopping cart. - Ryan Wilson
Ok I have dug up something which I think might be what you want. Please do let me know if it is not the right one! - Kelvin Lee
You can try adding checkprice(); right before this line if (Theme.currencySwitcher) { return $(document.body).trigger("switch-currency"); } in your new post. As I'm not sure if the variable cart.total_price will be up to date or not at that point, if not, you may need to add to cart.total_price on the iteration of the for loop to add each item's cost to the total, but theoretically, if cart.total_price is up to date at the end of the loop, calling checkprice() at that point should give you the desired results without having to refresh. - Ryan Wilson

1 Answers

0
votes

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