Shopify {{cart.total_price}} not updating when used outside of CSS class

Question

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>

Answer 1

There are two issues with the code here.

The one you mentioned:

Javascript part is looking for an element with total-price class and updating the value - jQuery('.total-price').html(Shopify.formatMoney(response.total_price, '$\{\{amount\}\}')). So you will either give it a new class and update the JS section, or keep using the total-price class.

The one you missed:

The free shipping logic is driven by Liquid. Which means it gets rendered only on page load. So even if you get the above piece to work the actual message you're showing will not change unless:

• The user refreshes the page, or
• You add a provision in the above JS code to make changes to this message.

Protip: Don't use whitespace removal {%- ... -%} syntax in inline styles and scripts. It messes up things.