Cart Slider Issue - Drawer not opening

Store Design
1

Hi! I am currently having issues with my “Cart Slider”.

When I am in my Collection list and click on Add to Cart for any of my products, I am routed to the Cart Page and the Slider is not opening. However, when I am on my product page, my the slider/drawer shows up. I am having issues with the coding of the Cart slider on my homepage. Needing assistance with this matter. Thanks!

1 Like
2

Hey @HannahTFF ,

Thanks so much for reaching out to me!

No worries at all—I can absolutely take care of the issue with your Cart Slider. It sounds like the functionality is working correctly on the product page but not on the collection or homepage, which may be due to how the AJAX add-to-cart functionality is set up in your theme.

If you’d like me to take a closer look and help resolve this for you, I’d be happy to assist and get everything working smoothly.

Best regards,

Rajat

Shopify Expert

3

Hi,

Hope this will help

  • Used fetch() with AJAX
    Replace regular based “Add to Cart” button with AJAX logic like this

code example

Add JavaScript in theme.js or inside a tag in your collection template:

code example

document.querySelectorAll('.add-to-cart-btn').forEach(button => {
  button.addEventListener('click', function () {
    let productId = this.dataset.productId;

    fetch('/cart/add.js', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      },
      body: JSON.stringify({
        id: productId,
        quantity: 1
      })
    })
    .then(response => response.json())
    .then(data => {
      // Trigger cart drawer opening
      document.dispatchEvent(new CustomEvent('product:added', {
        detail: { product: data }
      }));
    });
  });
});
  • Triggered a custom event “product:added”
  • Added event listener to open drawer
4

Hi @HannahTFF ,

Please send the website link, I will check it for you

5

Hi @namphan ,

This is our website: https://thefoodfarm.com.au/

Thank you!

6

Hi @HannahTFF ,

I checked and there is a JS error when you disable the breadcrumb on the collection page.

So when you click add to cart, it will be redirected to the cart page.

You can enable breadcrumb or send me the collaborator code a private message, I will send you an invite and change the JS code for it