Cart Slider Issue - Drawer not opening

Store Design

Topic summary

A user is experiencing an issue where the cart slider/drawer opens correctly on product pages but fails to open on collection pages—instead redirecting to the cart page.

Root Cause Identified:

  • A JavaScript error occurs when breadcrumbs are disabled on the collection page, causing the redirect instead of triggering the drawer.

Proposed Solutions:

  1. Enable breadcrumbs on the collection page to resolve the JS error
  2. Implement AJAX add-to-cart functionality using fetch() API with custom event triggers to open the drawer without page redirects (code example provided)
  3. Direct code fix offered by a responder who can modify the JavaScript after receiving collaborator access

Current Status:
The issue remains unresolved. The user shared their website link and is awaiting either a breadcrumb setting change or collaborator access arrangement to implement the fix.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
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