Updating {{ cart.total_price }} via Ajax

Highlighted
New Member
1 0 0

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>

 

0 Likes