Auto-update of different free shipping messages in Cart page

Store Design
, ,
1

Hi all

I am trying to implement 3 different shipping messages of which one appears depending on the cart total price on the CART page and I put this in Sections/main-cart.liquid:

<div class="container">
            
{% assign std_shipping_value = 8000 %}
{% assign exp_shipping_value = 15000 %}
{% assign std_shipping_value_left = std_shipping_value | minus: cart.total_price %}
{% assign exp_shipping_value_left = exp_shipping_value | minus: cart.total_price %}
 
</div>

  
 <div class="free-shipping-message">

 {% if cart.total_price > 15000 %}
  You've got Free Express Shipping within Australia!

{% elsif cart.total_price < 15000 and cart.total_price > 8000 %}
  You've got Free Standard Shipping within Australia!<br>
  You are now {{ exp_shipping_value_left | money }} away from FREE Express Shipping!

{% elsif cart.total_price < 8000 %}
  You are now {{ std_shipping_value_left | money }} away from FREE Standard Shipping!
   
  {% endif %}
</div>

It works once when I open the cart page. However, the message type and the XX amount don’t change automatically in relation to the item quantity & the cart total value changes.

So I am wondering if there is anyone who may be able to share some expertise in getting this message change according to my if functions. I am a super beginner in coding so if my code itself has errors or is not optimal, please let me know.

Thank you for your advice and time in advance.

Kind regards,

John

xx amount doesn't auto update.jpg
xx amount doesn't auto update.jpg1206×502 37.8 KB

2

Your code looks mostly correct, but there are a few adjustments you can make to ensure the free shipping message updates dynamically as the cart total changes. Here’s an updated version of the code:


  {% assign std_shipping_value = 8000 %}
  {% assign exp_shipping_value = 15000 %}
  {% assign std_shipping_value_left = std_shipping_value | minus: cart.total_price %}
  {% assign exp_shipping_value_left = exp_shipping_value | minus: cart.total_price %}

  {% if cart.total_price >= exp_shipping_value %}
    You've got Free Express Shipping within Australia!
  {% elsif cart.total_price < exp_shipping_value and cart.total_price >= std_shipping_value %}
    You've got Free Standard Shipping within Australia!

    You are now {{ exp_shipping_value_left | money }} away from FREE Express Shipping!
  {% elsif cart.total_price < std_shipping_value %}
    You are now {{ std_shipping_value_left | money }} away from FREE Standard Shipping!
  {% endif %}

In this updated code, I made the following changes:

  1. Adjusted the comparison operators: I changed > to >= in the if conditions to include the case when the cart total is equal to the shipping thresholds. This ensures that the message updates correctly even when the cart total matches the exact free shipping amount.

  2. Moved the container div: I moved the opening container div to include the entire section of code, which is a best practice for markup structure.

3

Hi there

Thank you so much for having a look at my code! Really appreciate it.

I just put your code in but still the message doesn’t change dynamically as if that particular ‘free shipping’ code section doesn’t loop or refresh automatically with the changes with the cart items.

Do you have any other suggestion for this? Thanks again!