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

Solved
Highlighted
New Member
2 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);
    });
  }

 

0 Likes
Highlighted
Trailblazer
311 12 13

Hi @August_Jr_Palan 

I hope you're doing great!

I would be happy to work with you. Please give me a suitable time to discuss your requirements.

Also, add me over Skype id- live:jennifer.wcoast or Email- sales@wreximinfotech.com

I look forward to your response!

Stay Well

Thanks!

0 Likes
Highlighted
Pathfinder
307 1 29

This is an accepted solution.

Sent you a message. Please check.

I make apps and can help you in setting up payment gateways..
0 Likes
Highlighted
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

0 Likes
Highlighted
New Member
2 0 0

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

You are a great person.

 

0 Likes