How do I refresh the cart drawer after adding an item to cart via ajax? - ajaxify shopify

Highlighted
New Member
2 0 0

I'm currently adding a product to the cart via an ajax POST to add.js.  However, I can't quite figure out how to refresh the cart drawer to reflect the updated cart.  Refreshing the page or redirecting the user to [my_shop_domain].com/cart will show the updated cart, but we'd prefer to show the change to the cart asynchronously and keep the user on the same page.  Is this possible?  

    var formOBJ = {
	  quantity: 1,
	  id: 962099797
	};
	
	$.ajax({
		type: "POST",
		url: "/cart/add.js",
		cache:false,
		data:formOBJ,
		dataType: "json",
		success: function (data) {
			console.log("success");
			//how do I update/refresh/reload the cart drawer here?
		},
		error: function (xhr, ajaxOptions, thrownError) {
			console.log("error");
			console.log(xhr.status);
			console.log(thrownError);
		}
	});

 

0 Likes
Highlighted
Shopify Expert
10006 116 1818

Hey Stephen,

I see this post got a bit lost among the others. Looking at your site it looks like the proudcts being added to the cart with AJAX are updating the cart aok. Hopefully this means you've sorting this all out.

If not, post again with a link to a failing product and we can take a closer look.

In case someone else stumbles upon this post the general process is to:

  • add to cart
  • wait for a successful response
  • on success, make a second call to GET cart.js.
  • Update the cart (or counter, etc) with the info found in the cart.js response.

More info on the AJAX API can be found here:
https://help.shopify.com/themes/development/getting-started/using-ajax-api

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
Highlighted
New Member
2 0 0

Jason,

Thanks so much for your help. I think I left out some context. Yes, our current implementation for the "Add to Cart" button on our product page works correctly. I'm asking this question in regards to a different feature we want to add.

The feature we're trying to add is an "Add a  [PRODUCT NAME]" button within the cart drawer itself. Upon clicking the button, the product would be added to the cart asynchronously and then we'd update the UI of the cart drawer to reflect the new item. I understand that we could manually manipulate the HTML of the cart drawer as you have stated above. I was wondering if there is a function (possibly part of ajaxify.js) to refresh/reload the cart drawer after I add the item to the cart via AJAX. This way I wouldn't need to update the drawer HTML directly. Does a function like this exist?

 

Thanks,

0 Likes
Highlighted
New Member
2 0 0
  • Update the cart (or counter, etc) with the info found in the cart.js response.

I don't think this is possible if the cart counter has liquid code such as: {{ cart.item_count }}...

Trying to change the counter's html content using .html() in jquery doesn't work because liquid takes precedence over js.

0 Likes
Highlighted
Shopify Partner
1 0 0

Hi Jason - I'm wondering how you recommend updating the cart once the cart.js response is received?   e.g. this step in your post:
"Update the cart with the info found in the cart.js response"

I too am wondering if there is a function (possibly part of ajaxify.js) to refresh/reload the cart drawer after an item has been added to the cart via AJAX.

In other words, after successfully adding to cart, and doing GET on cart.js  - is there a way of automatically updating the cart object that the html is referencing (via liquid).  Clear as mud?

0 Likes
Highlighted
Shopify Partner
109 0 15

I am looking for this exact same feature.. Anyone have any insight? Basically I'm just trying to force a refresh of the liquid objects in the cart. I can add to the cart with the `addItem` function, but updating the cart without a page refresh has me stumped.. 

The liquid object `cart.items` is already in the cart of course, so there isn't a need to replace it, I just need to refresh it..

Anyone?

Thanks

Todd 

ByteStand - Amazon to Shopify in one click
Highlighted
New Member
2 0 0

@Todd Trimakas:

I worked around this problem by not using liquid ... All I did was add the item to the cart and then make a GET request to the cart to get everything.. and then use that to populate the cart drawer.

0 Likes
Highlighted
Shopify Partner
109 0 15

Ahh, ok that makes sense.. thanks so much for getting back to us!!

ByteStand - Amazon to Shopify in one click
0 Likes
Highlighted
Shopify Partner
2 0 0

Hello,

I know I'm late to the party here, but wondering if anyone who has successfully solved populating the cart drawer with the GET request to the cart can please post an example or code snippet so that I can get an idea of the syntax for implementing into my custom theme?

I totally understand the concept and logic here, I'm just not strong enough in JS to get this done without some guidance.

THANK YOU!

Jonathan

0 Likes
Highlighted
Shopify Partner
32 0 3

i did that and got the information on the cart drawer but the quantity buttons arent working...did this happen to you?

0 Likes