Shopify {{cart.total_price}} object not updating on AJAX Cart

Solved
AugustJr
New Member
5 0 0
 

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: {{shipping_cost}}

However, whenever I use the {{cart.total_price}} object inside the AJAX Cart.. it doesn't update the price if ever there are pricing or quantity changes inside the AJAX Cart.

 

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.

I am using the {{cart.total_price}} object on my logic and wish for it to automatically update itself on any pricing or quantity changes in the AJAX cart.

 

Here's my conditional logic: 

 

{% 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>
          
          <div class="total-price">{{cart.total_price | plus: 795}}</div>
          Cart ORIG {{cart.original_total_price}}
          SubTotal {{cart.items_subtotal_price}}
          
        </div>
      </div>
{% endif %]

 

 

 

Here's my AJAX script:

 

  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);
    });
  }

 

Accepted Solution (1)

Accepted Solutions
HymnZ
Shopify Partner
392 6 65

This is an accepted solution.

Sent you a message. Please check.

My speciality lies in making Shopify work for your requirements, not the other way round. HMU on email: hymnz@outlook.com or on skype: hymnzzy

If you like my work, consider supporting me :) https://www.buymeacoffee.com/hymnz

View solution in original post

Replies 16 (16)
HymnZ
Shopify Partner
392 6 65

This is an accepted solution.

Sent you a message. Please check.

My speciality lies in making Shopify work for your requirements, not the other way round. HMU on email: hymnz@outlook.com or on skype: hymnzzy

If you like my work, consider supporting me :) https://www.buymeacoffee.com/hymnz

View solution in original post

ArnoldBr27
Tourist
40 0 1

Hi,

I can help!!

Please add me on Skype: cisin.arnold or Email: arnold.cis20@gmail.com to discuss this further.

Thanks
Arnold

AugustJr
New Member
5 0 0

Thanks for completing this for me @HymnZ. I really appreciate the help.

You are a great person.

 

idwithin
Excursionist
20 0 5

Hi there can you post their response please? I am trying to do this as well and cannot get the price to update.

Thank you.

DaBundleBoyz
New Member
2 0 0

I need help with this as well. The price is not showing correctly after reviewing the order in the cart. Please help.

HymnZ
Shopify Partner
392 6 65

@DaBundleBoyz  .. This is a case by case scenario and different themes have different methods. It'll have to be a customized solution for your store.

My speciality lies in making Shopify work for your requirements, not the other way round. HMU on email: hymnz@outlook.com or on skype: hymnzzy

If you like my work, consider supporting me :) https://www.buymeacoffee.com/hymnz
idwithin
Excursionist
20 0 5

I am using debut theme like the OP.

The smart thing to do would be to post it regardless. So any one that lands here using debut can instantly use it. As searching for this result is hard

HymnZ
Shopify Partner
392 6 65

@idwithin OP had heavily customized modules in his theme. And moreover, the "cart drawer" implemented by OP here which was the module that wasn't coming isn't a feature of the Debut theme.

As far as AJAX Cart is concerned, it works out of the box without any tinkering.

So, no. Giving a code here that will not work is not a smart thing, but rather it's a foolish thing to do. And this is a Jobs section in Shopify. If you're looking for someone to provide a free of charge code for your requirement, please visit the design section instead. Shopify Design - Shopify Community

Thank you.

My speciality lies in making Shopify work for your requirements, not the other way round. HMU on email: hymnz@outlook.com or on skype: hymnzzy

If you like my work, consider supporting me :) https://www.buymeacoffee.com/hymnz
idwithin
Excursionist
20 0 5