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

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

 

Replies 28 (28)
Jason
Shopify Expert
10882 190 2180

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

★ I jump on these forums in my free time to help and share some insights. Not looking to be hired, and not looking for work. http://freakdesign.com.au ★
Stephen_Bock
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,

Sahibjot_Saggu
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.

Alexander_Lamm
Shopify Partner
1 0 1

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?

Todd_Trimakas
Shopify Partner
128 0 23

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
Sahibjot_Saggu
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.

Todd_Trimakas
Shopify Partner
128 0 23

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

ByteStand - Amazon to Shopify in one click
Jonathan_Joseph
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

yanteb
Shopify Partner
34 0 4

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

jayeshcspl
New Member
4 0 0

Hi Stephen,

Did you find a solution?  I have the EXACT same issue.

 

I am using slate starter theme and ajaxify-cart.liquid.

 

Cart Drawer is not updating.  Would appreciate your help if you got it, or somebody else to help us.

jayeshcspl
New Member
4 0 0

Hi Alexander,

 

I am facing same issue have you find any solution? 

 

I am using slate starter theme and ajaxify-cart.liquid.  Cart count updated but Cart Drawer is not updating. after refresh cart drawer is updated. want without refresh cart drawer should update when click on add to cart button.

 

Would appreciate your help if you got it, or somebody else to help us.

RomFarma
New Member
4 0 0

Hy guys!
I`m facing a problem and i followed this tread and it seems you have an idea about my problem.
I`m using the free theme "Simple" and i wanted to add an "Add to cart" button to my collection list, because the theme support "Add to cart" button just in single product page.
After i followed the instructions from this thread " https://help.shopify.com/en/themes/customization/products/add-to-cart/stay-on-product-page-when-item... " from 1-9 instructions, i managed to add an "Add to cart" button on the products from the pages i wanted, but in the single product page i have the problem that when the customer clicks on "Add to cart", that button does not refresh (like the buttons that i added), and it cant add another product from that single product page, because it stays freeze saying "ADDED TO CART", until he manually refresh the page.
Can you help me to add the same button that refresh, or refresh the page itself, after a customer hit "Add to cart" from single product page?
Thanks in advance!

kahilkworq
New Member
1 0 0

Gday Jason, with the update step that you mentioned do you think it would be best practice to re render the cart using the Ajax response or keep the liquid cart object as your front end and find a way to update it? I’m trying to follow best practices when it comes to managing the cart, but I’m still stuck on how to refresh the token that keeps reference to the cart without reloading the page, even after adding a products, getting the new cart and calling update. Thank you! 

AhmedMihoub
Tourist
7 0 10

The easy way is to use the shopify custom Event cart:refresh on javascript

document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {
bubbles: true
}));

cart:refresh event refer to this function _rerenderCart :

AhmedMihoub_0-1604495948658.png

AhmedMihoub_1-1604496085237.png

 

 

it refresh the cart content with last changes
simple 🙂

AhmedMihoub
Tourist
7 0 10

Shopify expert never will tell you the solution without paying them XD but i will do it hahaha

The easy way is to use the shopify custom Event cart:refresh on javascript

 

document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {
bubbles: true
}));

 

cart:refresh event refer to this function _rerenderCart :

AhmedMihoub_0-1604495948658.png

AhmedMihoub_1-1604496085237.png

 

 

it refresh the cart content with last changes
simple 🙂

TeamLB
New Member
27 0 0

Hi I tried the above fix to refresh cart and now My Cart isn't showing minicart. help please. WWW.lavednerandblues.com

I might have deleted some snippit I can't tell which one. Can someone take a look as to why minicart slider stopped showing?

Thanks bunch!

Suni

Jyots
New Member
1 0 0

Hi Jason,

Can you guide me what I'm missing here

I need the same functionality but the theme uses handlebar.js which I m not familiar with 

this is my preview link

https://dbtpwva6xwqlbh8p-6617423.shopifypreview.com

garyrgilbert
Shopify Partner
82 8 23

unfortunately that depends entirely on what theme you are using.. it would be great if shopify made all the theme developers listen for a specific set of "general" custom events like that, but even the debut theme doesn't have the event you mentioned.. at least I couldn't find it in the theme.js file...

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
YuriEndorsi
Tourist
3 0 0

Hello, 

Currently the cart drawer is having the process of refreshing the entire page which led to closing the cart drawer. My requirement is the cart drawer shouldn't close when refreshed with the new item.  I used the shopify custom Event cart:refresh  and it worked on the Prestige Theme. I was able to add new item it refreshed without closing the cart drawer and I can see the new item.

I applied the same event code in Impulse 3.0.3 - Design and support by Archetype Themes  theme and it didn't work. I checked the function _rerenderCart in the theme.js.liquid and it isn't there. Is there any other event like the one mentioned for the Impulse 3.0.3 theme? Is there any other code that can refresh the cart content with last changes in the Impulse 3.0.3 theme? 

Any help is appreciated.

Thank you.