I am using the DEBUT theme from Shopify.

Preview of the theme I am working on - https://j0sobcxwialjqvz8-24806554.shopifypreview.com

I am trying to add additional functionality to an AJAX Cart widget on my Shopify site.
Mainly what I am trying to do is add a shipping cost to the cart's total price if the total order hasn't met the free shipping threshold. I am also adding a free shipping bar with the same threshold functionality.

So something like - If {{cart.total_price}} is equal/above $25 show "Free Shipping" else {{cart.total_price}} | plus: 7.95

However, whenever I use the {{cart.total_price}} code without a specific CSS class (example: CSS-Class .total-price) inside the AJAX Cart.. it doesn't update the price if ever there are product changes inside the AJAX Cart.

There is a jQuery function on one of my liquid.js files that I think is changing the HTML output.

Could someone help me fix this?

I just want to be able to use the base Shopify object "cart.total_price" on my liquid codes and make it update prices without having to do a page refresh.

Here are my codes:

jQuery('document').ready(function() {

  var windowWidth = jQuery(window).width();

  // QTY CHANGES ON MINICART

  var timer = undefined;

  jQuery('.slideout-cart .qty-form input').keyup(function() {

    if (timer) {

      clearTimeout(timer);

    }

    var self = this;

    timer = setTimeout(function() {

      var input = jQuery(self);

      var qty = input.val();

      var productId = parseInt(input.attr('data-id'));

      if (!(jQuery.isNumeric(qty) && Math.floor(qty) == qty && qty >= 0)) {

        updateQty(input, 1, productId);

      } else {

        updateQty(input, qty, productId);

      }

    }, 2000);

  });

  function updateQty(input, qty, productId) {

    input.parent().addClass('loading');

    jQuery.post('/cart/change.js', {

        quantity: qty,

        id: productId

      }, null, "json")

      .done(function(response) {



        if (is_wholesale) {

          window.location.reload();

          return;

        }



        var changed = false;

        if (response.item_count > 0) {

          jQuery('.site-header__cart-count > span:first-child').text(response.item_count);

          jQuery('.total-price').html(Shopify.formatMoney(response.total_price, '${{amount}}'));

          jQuery('.site-header__cart .cart-price').html(Shopify.formatMoney(response.total_price, '${{amount}}'));

          jQuery('.slideout-cart .cart-bottom .subtotal .price').html(Shopify.formatMoney(response.total_price, '${{amount}}'));

          for (var i = 0; i < response.items.length; i++) {

            if (response.items[i].id == input.attr('data-id')) {

              input.val(parseInt(response.items[i].quantity));

              jQuery('.slideout-cart ul li[data-id="' + input.attr('data-id') + '"] .price-box .price').html(Shopify.formatMoney(response.items[i].line_price, '${{amount}}'));

              changed = true;

              break;

            };

          }

          if (!changed) {

            jQuery('.slideout-cart ul li[data-id="' + input.attr('data-id') + '"]').remove();

          }

        } else {

          jQuery('.site-header__cart .cart-price').html(Shopify.formatMoney(0, '${{amount}}'));

          jQuery('.site-header__cart-count span:first-child').text('0');

          jQuery('.slideout-cart .cart--empty-message').removeClass('hidden');

          jQuery('.slideout-cart .cart-items-wrapper').addClass('hidden');

        }

      })

      .fail(function(xhr, status, error) {

        // error handling

        console.log(error);

      })

      .always(function() {

        setTimeout(function() {

          input.parent().removeClass('loading');

        }, 1000);

      });

  }

  // END QTY CHANGES ON MINICART

});

<div class="cart-bottom">

  <p class="subtotal">

    <span>{{ 'cart.general.subtotal' | t }}</span>

    <span class="price pull-right"><span class="saw-cart-original-total">{{cart.total_price | money}}</span> <span class="saw-cart-total"></span> </span>

  </p>



  {% if section.settings.shipping_text %}

  <p class="shipping-text">{{ section.settings.shipping_text }}</p>{% endif %} {% unless customer.tags.size > 0 %}

  <a href="/checkout" class="btn btn-black">{{ 'cart.general.checkout' | t }}</a> {% endunless %}



  <a href="/cart" class="btn btn-hollow">{{ 'cart.general.view_cart' | t }}</a> {%- assign settings_free_shipping_above = settings.free_shipping_above -%} {%- assign free_shipping_above = settings_free_shipping_above | times: 1 | default:0 -%} {%- assign

  convert_free_shipping = free_shipping_above | times: 100.0 -%} {%- assign missing_till_free_shipping = convert_free_shipping | minus: cart.total_price -%} {%- assign precent_free_shipping = cart.total_price | divided_by: convert_free_shipping | times:

  100 -%}

  <div class="threshold_bar gradient stripe color{%- if precent_free_shipping < 50 %} w_0{%- elsif precent_free_shipping < 80 %} w_50 {%- elsif precent_free_shipping < 100 %} w_80{%- else %} w_100{%- endif -%}"><span class="animate" style="width:{%- if missing_till_free_shipping > 0 and missing_till_free_shipping != convert_free_shipping -%}{{precent_free_shipping}}%{%- elsif missing_till_free_shipping != convert_free_shipping -%}100%{%- else-%}0%{%- endif -%} !important">{%- if missing_till_free_shipping > 0 and missing_till_free_shipping != convert_free_shipping -%}{{precent_free_shipping | round: 1 }}%{%- elsif missing_till_free_shipping != convert_free_shipping -%}100%{%- endif -%}</span></div>



  {%- if missing_till_free_shipping > 0 and missing_till_free_shipping != convert_free_shipping -%}

  <p class="content_threshold">{{ 'general.shipping_threshold.spend' | t }} <strong><span class="amount">{{ missing_till_free_shipping | money }}</span></strong> {{ 'general.shipping_threshold.more' | t }} <strong class="gecko-tooltip">{{ 'general.shipping_threshold.free' | t }}<span class="gecko-tooltip-label">{{ 'general.shipping_threshold.days' | t }}</span></strong>

    <a href="/collections/all?sort_by=best-selling"> {{ 'general.shipping_threshold.continue' | t }}</a>

    <!-- {{ 'general.shipping_threshold.add_more' | t }} {{convert_free_shipping| money }} -->

  </p>

  <div class="cart_total">



    {%- assign minicart_standard_shipping = settings.minicart_standard_shipping -%} {%- assign standard_shipping = minicart_standard_shipping | money_without_currency -%} {%- assign carttotal_with_standard_shipping = cart.total_price | plus: 795 | money_without_currency

    -%}



    <div class="shipping-cost">

      <p>Standard AU Shipping:</p>

      <p>${{ standard_shipping }}</p>

    </div>

    <div class="estimated-total">

      <h4>Total:</h4>

      <p>${{ carttotal_with_standard_shipping }}</p>





      Cart ORIG {{cart.original_total_price}} SubTotal {{cart.items_subtotal_price}}



    </div>

  </div>



  {%- elsif missing_till_free_shipping != convert_free_shipping -%}

  <p class="content_threshold threshold_congrats">

    <!-- <i class="pe-7s-medal" style="font-size: 16px"></i> -->{{ 'general.shipping_threshold.congratulations' | t }}</p>

  <div class="cart_total">



    {%- assign minicart_standard_shipping = settings.minicart_standard_shipping -%} {%- assign standard_shipping = minicart_standard_shipping | money_without_currency -%} {%- assign carttotal_with_standard_shipping = cart.total_price | money_without_currency

    -%}



    <div class="shipping-cost">

      <p>Standard AU Shipping:</p>

      <p>$0.00</p>

    </div>

    <div class="estimated-total">

      <h4>Total:</h4>

      <p>${{ carttotal_with_standard_shipping }}</p>



      Cart ORIG {{cart.original_total_price}} SubTotal {{cart.items_subtotal_price}}



    </div>

  </div>

  {%- endif -%}

</div>