How to refresh cart page when user change quantity in shopify-CodePudding

I have updated the Approach now going with js I also update script and its logic and paste below do look and see if you can help me out

I wanted to display information on top of cart page according to total value in cart or number of item in cart I am working on liquid and created a Script for it just I need to manual refresh it to change according to price / items in cart I am look help to create somethings that can auto refresh page according to change in cart price / item also if there is others way that can help to display information real time with respect to cart price / item

This is code sample """

     {% if  cart.item_count == 0  %}
        <p>FREE Gift Over <span>SAR 1000</span></p>
    {% endif %}
    
    {% if  cart.item_count > 99 %}
        <p>Congratulations! You've got FREE GIFT</p>
    {% endif %}
    
    {% if  cart.item_count < 8 and  cart.item_count > 0 %}
        <p>Congratulations! Youd12've got FREE GIFT</p>
      {% elsif cart.item_count < 19 and  cart.item_count >= 8 %}
        <p>Congratulations! Yodsuh45d've got FREE GIFT</p>
       
    {% endif %} 
  </div>

""" Image for better understanding click for image

The yellow part is where I want information to be

CodePudding user response：

What you want to do is add a onchange event listener to the quantity inputs, which update the pieces of the page you want to update, or just trigger a page reload

CodePudding user response：

Tried to convert it into js how if we make script run at every 5 sec so it will take data from qtn at every 5 sec and according to that it will update itself what do you think will it work? """

<p id="freeGift"></p>

<script>
const time = '{{cart.item_count}}';
let greeting;
if (time == 0) {
  greeting = "FREE Gift Over SAR 1000";
} 
if (time  < 8 ) {
  greeting = "Congratulations! You've got FREE GIFT";
} else if (time < 19) {
  greeting = "Congratulations! Yodsuh45d've got FREE GIFT";
} else {
  greeting = "Congratulations!";
}
document.getElementById("freeGift").innerHTML = greeting;
</script>

"""

I am looking for opinion and help to execute it .