Update Message When Cart Quantity Changes

Xenythian
Visitor
2 0 0

Hello,

 

I'm using the Sense theme and have a simple message in a liquid section that includes the number of items in the cart using "cart.item_count". How do I enable this to update (without refreshing the page) when another item is added or the quantity is increased?

Replies 4 (4)

SAN_MSWEB
Shopify Expert
1086 130 136

Hello,

 

I am San from MS Web Designer.

 

After reviewing the sense theme demo preview, we confirmed that the cart quantity updates in real-time without requiring a page refresh. Please make sure you are using the latest version of the theme. Let me know where you would like the number of items added to the cart to be displayed.

Hope this helps.

 

Do let me know in case of any concerns.

 

Regards,

San

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

Xenythian
Visitor
2 0 0

Thank you for the reply. Apologies for the confusion, the issue is not with the cart quantity itself updating. On my cart page, I've added a "Custom Liquid" section containing a message that needs to update when the cart quantity changes. Here's an example of the code in the liquid section:

<div>
{% if cart.item_count > 0 %}
This order contains {{ cart.item_count }} items.
{% else %}
You have no items in your cart!
{% endif %}
</div>

How do I ensure that "{{ cart.item_count }}" updates, without refreshing the page, when the cart quantity changes?

lf-ecom-shops
Tourist
52 1 5

Hey @Xenythian , no way, I coded this just yesterday lmao. Heres the code I used, it works: 

{% assign cart_item_count = cart.item_count %}

{% case cart_item_count %}
  {% when 1 %}
    {% assign discount_message = "No discount available for single item." %}
  {% when 2 %}
    {% assign discount_message = "You save 10% with two items in your cart!" %}
  {% else %}
    {% assign discount_message = "Great choice! You've unlocked a special discount!" %}
{% endcase %}

<style>
  .discount-message {
    background-color: #ffedcc; /* Subtle, yet inviting */
    border: 2px solid #ffcc80; /* Adds a touch of sophistication */
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    font-size: 18px;
    color: #333;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px; /* Creates space, enhancing readability */
  }

  .discount-message p {
    margin: 0;
  }

  .discount-message .highlight {
    color: #ff6600; /* Vibrant, eye-catching highlight color */
    font-weight: bold;
  }
</style>

<div class="discount-message">
  <p>{{ discount_message }}</p>
</div>

Hope that helped and please mark as solved and like if I helped you 🙂

lf-ecom-shops
Tourist
52 1 5

Forgot to say. Paste that in a snippet and name it cart-discount and go to the snippet cart-drawe.liquid and paste 

{% render 'cart-discount' %}

where you want to add it 😉