Automatically update checkout UI based on cart value or items

[h0rhay]

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 %}
                  <!-- Show the checkout buttons (or form) in here. -->
                <input type="submit" name="checkout"
                  class="cart__submit btn btn--small-wide"
                  value="{{ 'cart.general.checkout' | t }}">
                {% else %}
                <div><p>Our minimum order value for checkout and shipping is <strong>£150</strong> or more.</p>
                <p><a href="{{ routes.all_products_collection_url }}" class="text-link text-link--accent">
        Please add some more bottles 🥂
                  </a></p><div>
                {% 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 -%}
            <div{% if cart.cart_level_discount_applications.size == 0 %} class="hide"{% endif %} data-cart-discount-wrapper>
              <div class="order-discount-card-wrapper" data-cart-discount>
                {%- for discount_application in cartDiscounts -%}
                  <span class="order-discount order-discount--title order-discount--cart">
                    {% include 'icon-saletag' %}<span class="visually-hidden">{{ 'customer.order.discount' | t }}:</span><span data-cart-discount-title>{{- discount_application.title -}}</span>
                  </span>
                  <span class="order-discount order-discount--cart order-discount--cart-total">
                    -<span data-cart-discount-amount>{{ discount_application.total_allocated_amount | money }}</span>
                  </span>
                {%- endfor -%}
              </div>
            </div>

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 🙏

[SuperBand]

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!