How to open and refresh Cart Drawer in Horizon 2025 theme after adding multiple products via JS

Online Store and Theme Development
, , , ,
1

Hi everyone,

I’m using the new Horizon 2025 theme and I’m building a custom “Frequently Bought Together” section. It allows customers to select multiple products and add them all to the cart via JavaScript using the /cart/add.js endpoint.

The products are being added successfully to the cart, but I’m having trouble making the Cart Drawer open AND refresh its contents after multiple products are added.

From the theme’s code, I can see there’s a <cart-drawer-component> and it listens to a custom CartAddEvent, but I’m unsure how to properly trigger that event or update the drawer state programmatically.

Here’s what I’m currently doing:

  async addAllToCart() {
    this.addAllButton.textContent = '{{ block.settings.adding_text }}';
    this.addAllButton.disabled = true;

    const items = [];
    const products = this.querySelectorAll('.fbt-product');

    products.forEach(product => {
      let variantId;

      const variantSelector = product.querySelector('.fbt-variant-selector');
      if (variantSelector) {
        variantId = variantSelector.value;
      } else {
        const hiddenInput = product.querySelector('.fbt-selected-variant');
        variantId = hiddenInput.value;
      }

      items.push({
        id: variantId,
        quantity: 1
      });
    });

    try {
      const response = await fetch('/cart/add.js', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ items })
      });

      if (response.ok) {
     



      } else {
        throw new Error('Failed to add items to cart');
      }
    } catch (error) {
      console.error('Error adding to cart:', error);
    } finally {
      this.addAllButton.textContent = '{{ block.settings.button_text }}';
      this.addAllButton.disabled = false;
    }
  }

My question is:

How can I programmatically open and refresh the Cart Drawer in the Horizon 2025 theme after adding multiple products with JavaScript?**
Ideally, I’d like to use the theme’s native method or dispatch event to keep everything consistent.

Any help or insight would be greatly appreciated. Thanks in advance!

2

try this, as you can use Shopify’s internal event modules…

import('@theme/events').then(({ CartUpdateEvent }) => {
      const cartDrawer = document.querySelector('cart-drawer-component');    
      fetch('/cart.js')
      .then(res => res.json())
      .then(cart => {
        const event = new CartUpdateEvent(cart, 'manual-trigger', {
          itemCount: cart.item_count,
          source: 'fad-refresh',
          sections: {}
        });
        document.dispatchEvent(event);
        if (cartDrawer?.hasAttribute('auto-open')) {
          cartDrawer.open();
        }
      });
    });```
1 Like