Narrative Theme Toggle Cart Drawer on Add to Cart

Highlighted
New Member
1 0 0

I know this question has been asked a few times over the years with this post being the closest but I thought I'd check again to see if anyone may have solved the issue.

 

I'm trying to make the Cart Drawer on the Narrative theme toggle open whenever a product is added. There is the class ".ajax-cart__toggle" which can be applied to almost any element to make it a button that opens the cart but the "Add to Cart" update magic has to happen first before the Cart Drawer can toggle open. I tried tinkering around with my limited knowledge to no avail but perhaps someone could point me in the correct direction?

 

Any help is greatly appreciated! :)

0 Likes
Highlighted
Shopify Partner
1892 118 294

Dear hairnomore,

 

Have you done custom coding properly? I think you something you have missed as you said you have used Narrative Theme it can be done.

 

If you need help on this please contact here: https://www.task4store.com/collections/product-page/products/add-cart-drawer

Best Regards
MS Web Designer | MS Web International | Task4Store
Contact Us: Click Here | task4store@mswebdesigner.com
9.9/10 Customer Rating | 1000+ Happy Clients | 100% Satisfaction Or Money Back Guarantee
0 Likes
Highlighted
Shopify Staff
Shopify Staff
803 94 134

Hi, @hairnomore,

Hank here from Shopify.

 

This could be achieved through some coding for your theme. I see that you are getting some advice from @MS-WEB-DESIGNER with the coding but if you are finding that a bit tricky, there is another way. 

 

As you are using Narrative which is a Shopify theme, our theme developers can also take a look at this for you once you select a plan. What I could do is reach out to you via email to verify your store and dig into this further for you if you prefer this option.

 

Another way you can do this if you prefer is to reach out to one of our Shopify Experts, who you can hire to do almost any custom work on your store. If you were to reach out to them about this query, they would also be able to resolve this issue for you.

Best of luck with the coding, but if you want our theme developers to look into this, please let me know!

 

All the best, -Hank

Hank | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Excursionist
22 0 7

Hi @Hank 

I've been looking for the same thing. 

I'm working on Narrative theme and want to make add to cart point to the cart drawer immediately.

I'm not good at coding so could you help me with Shopify developers solution?

Thanks

Karl

0 Likes
Highlighted
Shopify Staff
Shopify Staff
803 94 134

Hi, Karl!

What I have done is emailed you with some further information, so once you confirm a few things for me, I will be able to take a closer look at this for you!

Hank | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Tourist
4 0 0

Hank I also am curious about this is exact same question.

 

I've added an "add to cart" button from my collection page, but there doesn't seem to be any resource on how to refresh the cart with ajax and open up the drawer.. please share any documentation that may help.

 

EDIT: It seems forcing a trigger for inputs will update the cart, but this ONLY works if there are already items in your cart.

$('.cart-drawer input').trigger('input');

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
803 94 134

Thank you for reaching out about this, Arthor!


That link you sent is from a Shopify expert as it falls outside of what is covered by your design time.

 

But what you could do is you could reach out to that expert on the thread or contact the Shopify Experts directly.

Hank | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Tourist
4 0 0

For those not wanting to go the only suggested route of paying for an expert I found a work-around.  You need to simulate an update to the input field in the cart form. Its quite easy actually. This is triggering first an input blur event, and then an input event. Like so:

 

$('.cart-drawer input').trigger('blur'); // simluate deselect
  setTimeout(function(){ 
  $('.cart-drawer input').trigger('input'); // simualte edit
}, 350);

I've found it works best if there is some kind of delay on the blur event to allow the cart reload to finish, since there is no callback its a bit of guess work. Running this code will force an update of the cart whether it's empty or active. 

 

Hope this helps someone else and saves you a shopify expert job as I spent my entire night trying to figure this out.

0 Likes
Highlighted
New Member
3 0 0

If you could help with where to put this exactly in the theme files, it would be of great help.

 

The problem with my store is, if someone adds a product and goes back to all product page, the cart shows empty. But a force refresh solves the issue.

0 Likes
Highlighted

Hi, I'm trying to get the same thing.

Can you please help me with it? I'm not sure where I have to put this code.

 

Thank you

 

JJ

0 Likes