Automatically open cart drawer when item added to cart in Narrative theme

Highlighted
Tourist
4 0 1

This is a more specific question related to my other question (getting unminified js assets for Narrative).

I want the cart drawer to open when an item is added to a user's cart.  Right now the button toggles to "view cart" and allows the user to click that to open the drawer, I just don't want them to have to take that step.

I tried adding the class that is on the "view cart" button to the buy button (.ajax-cart__toggle) in the liquid temple but that just results in the drawer opening but the item not actually being added to the cart.

I'm pretty well versed in js but without being able to see the unminified js code I have no idea where to even start.

Thanks

0 Likes
Highlighted
New Member
2 0 0

Any updates on this John?

I'm looking to do the same thing, but haven't found a solution...

0 Likes
Highlighted
Shopify Partner
89 0 6

Hi John Refano,

I just checked your support request on Shopify Expert forum.

As per your requirement its possible with ajax.

you are very close to solution, Please try to add the same class if you get success response from backend for product add.

If you still face any issue then let us know.

Thanks
Aaron

0 Likes
Highlighted
Tourist
4 0 1

Yes, the first thing I tried was to I add the class to the button:

 

.ajax-cart__toggle

 

This results in the cart opening, but the item is not added to the cart. 

Is there another way?

0 Likes
Highlighted
New Member
2 0 0

I followed the tutorial found here and added the cart toggle class to the 'View Cart' button that appears after you add the product to cart. The only problem is that the cart drawer isnt updated immediately, but only when the page is refreshed. So close...

0 Likes
Highlighted
Shopify Expert
10006 116 1819

Whilst the code has whitespace removed, you can use a tool to pretty print it again if you need. That will make reading / editing easier.

This theme isn't built to show the cart contents after adding so there's currently no action that auto updates its. Things you'll need to look at are:

  • Grabbing the latest cart data with AJAX.
  • Once you have that you then need to create the HTML that will will be added into the sliding cart section.
  • Add the new HTML into the DOM
  • If there's additional JS events (like on quantity selectors, item removal buttons, etc) those will need to be bound. Any existing code would be expecting those elements to be in place when the main JS is loaded. Since you're adding them later you need to do the work to rebind them all. This might not be so simple given that the functions may be wrapped in a closure. 
  • Trigger the cart toggle event (or just trigger a click event on the button).

The forum members are unlikely to give you anything close to copy and paste code but was there something specific you're stuck on? Happy to nudge you in the right direction.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
Shopify Partner
89 0 6

Hi JR,

Jason is correct. Do let us know if you find any difficulty coding the same. This requires some expertise and time. If you want, you can contact via our official site.

Thanks,
Aaron

0 Likes
Highlighted
Tourist
3 0 3

Hi - Also very keen to make this work - the procedure helpfully outlined by Jason above is,  I think, beyond me :(

 

But if anyone finds a neat solution please post it here!

0 Likes
Highlighted
New Member
1 0 1

Hi, I know it's a little late to write a solution, but in case someone needs this is an option. You can open the cart automatically after add action with jquery trigger, simulating a click. This is the code for the brooklyn theme

 

jQuery.post('/cart/add.js', {id:14397329866807}, function(data){console.log(data);},'json');
//...
$('.cart-link__bubble--visible').trigger('click');
 
 
Regards,
Antonio
Highlighted

I've just solved similar issue for client in Narrative theme. Here is a code that you can enter before </body> tag in theme.liquid

<script>
var buttonsArray = document.querySelectorAll('[data-cart-submit]');
for (var i = 0; i < buttonsArray.length; i++) {
  buttonsArray[i].setAttribute('onclick','window.theme.sections.instances[0].drawerOpen()');
}
</script>

Hope it helps.
 
 
0 Likes