How Do I Update the Cart Counter Immediately via AJAX?

Lindsey_Bradfor
Tourist
6 0 6

Hi,

 

I need to access cart.item_count to update the cart counter on a click event, but despite much research, haven't found a helpful example.

 

Here's the scenario:

On the homepage, Jane adds an item to her cart. Without reloading the page, Jane can view the cart in a slide-out drawer and see the items she's added. The cart counter should follow suit, but this comes back undefined: 

Shopify.onItemAdded = function(cart) {
  	alert('There are now ' + cart.item_count + ' items in the cart.');
};

This updates the counter successfully, but only with the number of items just added—not the total items in the cart:

Shopify.addItem(variant_id, quantity, function(line_item){
   console.log(line_item);
});

Finally, here's the simple method I'm using to add items to the cart:

<a href="#" onclick="Shopify.addItem(jQuery('#add_item{{product.id}}').val(), jQuery('#add_item_qty').val()); return false" class="btn highlight add-to-cart"><span class="btn-text">Add To Cart</span></a>

 

In Summary…

Where can I find an example of how to handle this simple scenario? How exactly does one acces the cart.item_count via the Shopify API? I'd be so grateful if someone could outline how this is done or point me in the direction of more complete documentation. 

 

Thanks,

L

 

Replies 5 (5)
Josh_Brown1
Shopify Staff (Retired)
Shopify Staff (Retired)
146 0 30

Hi Lindsey,

You can find documentation for the Ajax API here: https://docs.shopify.com/support/your-website/themes/can-i-use-ajax-api

The /cart/add.js response only contains the line item, but you can always get the complete cart using /cart.js — something like this should work:

 jQuery.getJSON('/cart.js', function(cart) {
  alert('There are now ' + cart.item_count + ' items in the cart.');
} );

The entire cart is also returned if you use /cart/update.js instead of /cart/add.js. 

Lindsey_Bradfor
Tourist
6 0 6

Hi Josh, 

 

Thanks so much! That's exactly what I needed. 

 

For anyone reading this down the road, here's the code:

 

Shopify.onItemAdded = function(cart) {
	jQuery.getJSON('/cart.js', function(cart) {
  		$('#cartCount').html(cart.item_count);
	});
};

 

Sebastina
New Member
2 0 1
This is working for me also I have found this on https://shopify.dev/tutorials/develop-theme-ajax-api-using-jquery

var
cartItemCounter = document.querySelector('span.cart-item-count');
jQuery.ajax({
url: '/cart.js',
dataType: 'json'
})
.done(function(data){
var newCount = data.item_count;
cartItemCounter.innerText = newCount;
});
RafaelGhilus1
New Member
1 0 0

Hi, how can I implement this? Where do I need to put the code?

PaulNewton
Shopify Partner
4211 303 902

@RafaelGhilus1 This  will vary wildly by theme.

If you have an onlinestore2.0 theme see if it lets you add a custom-liquid or custom-html section/block to either the footer or header.

If so place that javascript in it with the surrounding <script></script> tags

 

Otherwise backup your theme and either add it to the bottom of theme.liquid before the closing </body> tag again with <script></script> tags surrounding that javascript.

Or add the javascript to your themes theme.js file or similar.

 

Finally Combinable Discounts - EARLY ACCESS ONLY - Use Free Shipping With Other Discounts

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org
Problem Solved? ✔Accept and Like solutions to help future merchants
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com