Update Message When Cart Quantity Changes

[Xenythian]

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?

[INA_MSWEB]

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

[Xenythian]

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]

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]

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 😉