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();
        }
      });
    });```
2 Likes
3

It seems throw an error in Horizon version 2.1.0:
Uncaught (in promise) Error: Cannot find module ‘@theme/events’

4

This worked for me:

const cartDrawer = document.querySelector(‘cart-drawer’);

if (cartDrawer) {

cartDrawer.open = true;

}

5

This solution works, however, it doesn’t wait for the cart-drawer contents to update before opening the drawer. Any idea how this can be modified? This seems true for both CartUpdateEvent and CartAddEvent.

8

@_vi @Luis_Rojas
use horizon theme built-in event handling for forms.

For simplicity, just wrap your form inside the theme’s web component and add the default submit handler. That’s all you need, it’ll automatically handle ajax submission and open the cart drawer for you.

<product-form-component on:submit="/handleSubmit">
  {% form 'product', product %}
    // Your inputs
  {% endform %}
</product-form-component>

Best,
Ghayor

4 Likes
9

@Ghayor_Baqir

Do you have a js method to do so? We use the Cart API to add the variants to the cart. I want js methods to (1) refresh and (2) open the cart drawer

10

You can try firing an event to open the Cart Drawer in Horizon.

This should open the cart drawer and update the cart items count as well.


if(response.ok) {
  document.dispatchEvent(
    new CustomEvent('cart:update', {
      bubbles: true,
      detail:{
        data: {
          itemCount: 1,
          source: 'product-form-component'
        }
      }
    })
  );
}

Let me know if this works.

3 Likes
11

Thanks @prakhar . It works for Horizon 3.0.0!

12

Is there any documentation available that explains the JavaScript logic for the Horizon theme, or is the GitHub repo the only source to analyze? I want to implement Horizon, but I need to check what exactly I can do there using the built-in event handling.

13

None as far as I’m aware, but as you said, the source code is there you can find the code yourself.

Failing that, run AI through it and I’m sure it can point out available events etc.

1 Like
14

this works, thanks @Ghayor_Baqir

15

honestly some documentation for logic in horizon would be pretty helpful @Liam-Shopify

I know its new, but its a little hard to know what some of these things are doing?

16

I doubt you’ll get that, the theme wasn’t even going to be released on Github originally.

If you’re a developer I’m sure you can figure out how to use the theme by looking at the code.

17

@Luke pity, is Horizon on github now?

18
1 Like
19

great news that is it released @Luke