Free shipping - Help!

[spoiledbratuk]

Ive added a script, to my site to the cart page to countdown for free shipping - free shipping on orders over £50 for UK

🚚Congrats! You've got free shipping within the UK!

It seems to be glitchy though - can anyone work out why? It seems to only work if you refresh your browser 

Code I have used is - theme is IMPULSE

I added this to my snippet ,

cart-drawer.liquid

{%- if settings.cart_type == 'drawer' -%}
  <div id="CartDrawer" class="drawer drawer--right">
    <form id="CartDrawerForm" action="{{ routes.cart_url }}" method="post" novalidate class="drawer__contents">
      <div class="drawer__fixed-header">
        <div class="drawer__header appear-animation appear-delay-1">
          <div class="h2 drawer__title">{{ 'cart.general.title' | t }}</div>
          <div class="drawer__close">
            <button type="button" class="drawer__close-button js-drawer-close">
              <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-close" viewBox="0 0 64 64"><path d="M19 17.61l27.12 27.13m0-27.12L19 44.74"/></svg>
              <span class="icon__fallback-text">{{ 'cart.general.close_cart' | t }}</span>
            </button>
          </div>
        </div>
      </div>

      <div class="drawer__inner">
        <div class="drawer__scrollable">
          <div data-products class="appear-animation appear-delay-2"></div>

          {% if settings.cart_notes_enable %}
            <div class="appear-animation appear-delay-3">
              <label for="CartNoteDrawer">{{ 'cart.general.note' | t }}</label>
              <textarea name="note" class="input-full cart-notes" id="CartNoteDrawer">{{ cart.note }}</textarea>
            </div>
          {% endif %}
        </div>

        <div class="drawer__footer appear-animation appear-delay-4">
          <div data-discounts>
            {% if cart.cart_level_discount_applications != blank %}
              <div class="cart__discounts cart__item-sub cart__item-row">
                <div>{{ 'cart.general.discounts' | t }}</div>
                <div class="text-right">
                  {% for cart_discount in cart.cart_level_discount_applications %}
                    <div class="cart__discount">
                      {{ cart_discount.title }} (-{{ cart_discount.total_allocated_amount | money }})
                    </div>
                  {% endfor %}
                </div>
              </div>
            {% endif %}
          </div>

          <div class="cart__item-sub cart__item-row">
            <div class="ajaxcart__subtotal">{{ 'cart.general.subtotal' | t }}</div>
            <div data-subtotal>{{ cart.total_price | money }}</div>
          </div>

          <div class="cart__item-row text-center">
            <small>
  <div class="container">
{% assign shipping_value = 5000 %}
{% assign cart_total = cart.total_price %}
{% assign shipping_value_left = shipping_value | minus: cart_total %}
</div>
<p class="shipping-savings-message">
{% if shipping_value_left > 0 %}
 You are {{ shipping_value_left | money }} away from FREE shipping within the UK!<br>

  {% else %}
 Congrats! You've got free shipping within the UK!
  {% endif %}
</p>            </small>
          </div>

          {% if settings.cart_terms_conditions_enable %}
            <div class="cart__item-row cart__terms">
              <input type="checkbox" id="CartTermsDrawer" class="cart__terms-checkbox">
              <label for="CartTermsDrawer">
                {% if settings.cart_terms_conditions_page != blank %}
                  {{ 'cart.general.terms_html' | t: url: settings.cart_terms_conditions_page.url }}
                {% else %}
                  {{ 'cart.general.terms' | t }}
                {% endif %}
              </label>
            </div>
          {% endif %}

          <div class="cart__checkout-wrapper">
            <button type="submit" name="checkout" data-terms-required="{{ settings.cart_terms_conditions_enable }}" class="btn cart__checkout">
              {{ 'cart.general.checkout' | t }}
            </button>

            {% if additional_checkout_buttons and settings.cart_additional_buttons %}
              <div class="additional-checkout-buttons additional-checkout-buttons--vertical">{{ content_for_additional_checkout_buttons }}</div>
            {% endif %}
          </div>
        </div>
      </div>

      <div class="drawer__cart-empty appear-animation appear-delay-2">
        <div class="drawer__scrollable">
          {{ 'cart.general.empty' | t }}
        </div>
      </div>
    </form>
  </div>
{%- endif -%}

 And

main-cart.liquid (section)

<div class="page-width page-content">

  {%- render 'breadcrumbs' -%}

  <header class="section-header text-center{% if cart.item_count == 0 %} section-header--404{% endif %}">
    <h1 class="section-header__title">{{ 'cart.general.title' | t }}</h1>
    <div class="rte text-spacing">
      {%- if cart.item_count == 0 -%}
        <p>{{ 'cart.general.empty' | t }}</p>
      {%- endif -%}
      <p>{{ 'cart.general.continue_browsing_html' | t: url: routes.all_products_collection_url }}</p>
    </div>
  </header>

  <div class="container">
{% assign shipping_value = 5000 %}
{% assign cart_total = cart.total_price %}
{% assign shipping_value_left = shipping_value | minus: cart_total %}
</div>
<p class="shipping-savings-message">
{% if shipping_value_left > 0 %}
🚚 You are {{ shipping_value_left | money }} away from FREE shipping within the UK!<br>

  {% else %}
🚚 Congrats! You've got free shipping within the UK!
  {% endif %}
</p>
  
  
  {%- if cart.item_count > 0 -%}
    <form action="{{ routes.cart_url }}" method="post" novalidate data-location="page" id="CartPageForm">
      <div class="cart__page">
        <div data-products class="cart__page-col">
          {% for item in cart.items %}
            {%- render 'cart-item', product: item -%}
          {%- endfor -%}
        </div>
        <div class="cart__page-col">
          {% if settings.cart_notes_enable %}
            <div>
              <label for="CartNote">{{ 'cart.general.note' | t }}</label>
              <textarea name="note" class="input-full cart-notes" id="CartNote">{{ cart.note }}</textarea>
            </div>
          {% endif %}

          <div data-discounts>
            {% if cart.cart_level_discount_applications != blank %}
              <div class="cart__discounts cart__item-sub cart__item-row">
                <div>{{ 'cart.general.discounts' | t }}</div>
                <div class="text-right">
                  {% for cart_discount in cart.cart_level_discount_applications %}
                    <div class="cart__discount">
                      {{ cart_discount.title }} (-{{ cart_discount.total_allocated_amount | money }})
                    </div>
                  {% endfor %}
                </div>
              </div>
            {% endif %}
          </div>

          <div class="cart__item-sub cart__item-row">
            <div>{{ 'cart.general.subtotal' | t }}</div>
            <div data-subtotal>{{ cart.total_price | money }}</div>
          </div>

          {% if settings.cart_terms_conditions_enable %}
            <div class="cart__item-row cart__terms">
              <input type="checkbox" id="CartTerms" class="cart__terms-checkbox">
              <label for="CartTerms">
                {% if settings.cart_terms_conditions_page != blank %}
                  {{ 'cart.general.terms_html' | t: url: settings.cart_terms_conditions_page.url }}
                {% else %}
                  {{ 'cart.general.terms' | t }}
                {% endif %}
              </label>
            </div>
          {% endif %}

          <div class="cart__item-row cart__checkout-wrapper">
            <button type="submit" name="checkout" data-terms-required="{{ settings.cart_terms_conditions_enable }}" class="btn cart__checkout">
              {{ 'cart.general.checkout' | t }}
            </button>

            {% if additional_checkout_buttons and settings.cart_additional_buttons %}
              <div class="additional-checkout-buttons">{{ content_for_additional_checkout_buttons }}</div>
            {% endif %}
          </div>

          <div class="cart__item-row text-center">
            <small>
              {{ 'cart.general.shipping_at_checkout' | t }}<br />
            </small>
          </div>
        </div>
      </div>
    </form>
  {%- endif -%}
</div>

{% schema %}
  {
    "name": "Cart page"
  }
{% endschema %}