Automatically Open Cart Drawer when using Bulk Option for Quick Add

[AlMehdi]

Hi All

I have tried a few different themes (Dawn, Trade, Refresh) from Shopify and all work the same way:

I have the cart type set to Drawer

I have the Quick Add option set to "Bulk" instead of "Standard" for featured collections on Home Page as well as on Collections Page, so instead of "Add to Cart" it gives you the quantity selector option.

On updating quantity (add / remove items), the cart gets updated but the cart drawer does not open up / slide out.

If the Quick Add option is changed to "Standard" (Add to Cart button) instead of "Bulk" , clicking on that button slides out the cart drawer. I am trying to replicate that experience with the "Bulk" option for Quick Add so its clear to users that their cart has been updated (items added / removed) instead of having to check the cart icon at the top of the page.

Any code help to change this is greatly appreciated

[EcomGraduates]

I understand the challenge you're facing with the "Bulk" Quick Add option not triggering the cart drawer to open. What you want is for the cart drawer to open automatically whenever the quantity is updated. Here's a way to achieve this with a bit of custom Javascript:

1. Edit the theme code: Go to your Shopify admin, then "Online Store" > "Themes" > "Actions" > "Edit code."

2. Find the JavaScript file: Locate the main JavaScript file in the "Assets" folder, usually named something like theme.js or custom.js.

3. Add custom JavaScript: At the end of this JavaScript file, add the following code to trigger the cart drawer when quantities are updated:

document.addEventListener('DOMContentLoaded', function() {
  function openCartDrawer() {
    // Assuming the cart drawer opens with a class toggle
    const cartDrawer = document.querySelector('.cart-drawer');
    if (cartDrawer) {
      cartDrawer.classList.add('is-open'); // Adjust the class based on your theme
    }
  }

  document.querySelectorAll('.quantity-selector').forEach(function(el) {
    el.addEventListener('change', function() {
      // Assuming quantity changes via an input or select element
      // Trigger the cart update logic here (this might vary based on your theme)
      // Example: trigger a click event on the "Add to Cart" button if needed
      // document.querySelector('.add-to-cart-button').click();
      
      // Open the cart drawer
      openCartDrawer();
    });
  });
});

Adjust for your theme: You might need to tweak the class names or the logic depending on how your theme handles the cart drawer and quantity updates