Add to cart button not displaying slide out drawer

Shopify Discussion
1

-I am having a sticky add to cart button based on https://www.youtube.com/watch?v=loRbZ2hOzhY.

  • I changed code of Dawn 11.0 theme based on video and it is working.

  • I also customised the theme such that when add to cart button is clicked, slide out drawer appears.

  • Problem is, when I click the “Add to Cart” button of sticky bar, slide out drawer cart does not appear. But when I click regular “Add to cart” button on product page, slide out drawer cart appears.

  • Any solution or short cut? I am missing some fine detail.

-Please help.

2

Hello @CyberdyneJoule ,

Write a JS scrip:

Trigger click the default atc on click of the sticky atc

If you are not sure how to write a script then I suggest use an app for sticky atc or hire a developer to write a script.

Thanks

3

I have done following but it is not working. If someone can help, it would be of great help

  1. Added an asset and called it CartDrawerPull.js

  2. added the script reference in theme.liquid

  3. Wrote following code thereby capturing /cart/add action for all forms and added an event listener and allowed it to handle default and added animate and active class.

document.querySelectorAll('form[action="/cart/add"]').forEach((form) => {
form.addEventListener("submit", (e) => {
// e.preventDefault();
document.querySelector('.cart-drawer').classList.add ('animate','active');
});
});