Automatically update checkout UI based on cart value or items

Technical Q&A
1

I’m new to developing on Shopify.. can anyone help with how to ‘listen’ to cart changes and update the UI?

I have this code which will render the checkout button or not depending on the value of the cart_total:

{% if cart.total_price > 15000 %}
                  
                
                {% else %}
                

Our minimum order value for checkout and shipping is **£150** or more.

                

        Please add some more bottles 
                  

                {% endif %}

But this only works on page load or refresh..

This code below (that shipped with the default theme) applies a discount to my cart_total based on a discount code I have set up, and the discount is applied adding a span with ‘discount applied’ to the UI (without the need for a refresh or load):

{%- assign cartDiscounts = 'template ' | split: ' ' -%}
            {%- if cart.cart_level_discount_applications.size > 0 -%}
              {%- assign cartDiscounts = cart.cart_level_discount_applications -%}
            {%- endif -%}
            

As I'm pretty new to liquid and shopify.. I am unable to work out which part of this code above is 'listening' to the updated cart value in order to dynamically apply the discount..

I could make it work by manipulating the DOM with JS and reading values etc.. but that seems very hacky.

Can anyone help?
Many thanks :folded_hands:
2

Using JS to modify the DOM seems the way to go. In my opinion there is nothing hacky about that. Liquid is a templating language and only rendered on the back end. The discount code functionality is built into the Shopify checkout experience. The theme liquid is performing one task - to show or hide a message based on cart conditions. The update you’re seeing seemingly without JS when you add a discount is part of the Shopify checkout experience. Its a larger application done in React.js I think which we cannot touch.

What you’re trying to do sounds like client side functionality and using some JS is the right solution imho!