How to run a Javascript event on Shopify cart update?

Question

I am trying to add aa code in my Shopify cart page where it will show the customer the total amount in 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 find below code but it's not working.

I am not a programmer or developer and I have very little knowledge of coding.

I will really appreciate if someone can help me.

HTML CODE

Your cart total is {{ cart.total_price | money }}. You qualify for free shipping!

Your cart total is {{ cart.total_price | money }}.
Spend {{ 2500 | minus: cart.total_price | money }} more to qualify for free shipping!

Java Script Code

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

Answer 1

You can use liquid without javascript to show whether or not a customer qualifies for free shipping

{%- if cart.total_price > 2500 -%}
    Your cart total is {{ cart.total_price | money }}.             
    You qualify for free shipping!
{%- else -%}
    Your cart total is {{ cart.total_price | money }}.
    Spend {{ 2500 | minus: cart.total_price | money }} more to qualify for free shipping!
{%- endif -%}