Real-time cart not updating when dispatching cart:refresh event

Theme Store
1

Hi @shopify,

I’m trying to update the cart in real time using JavaScript in my Shopify theme, but the cart UI is not refreshing as expected.

Here is the code I’m using:

try {
    const cart = await fetch('/cart.js').then(res => res.json());
 
    document.dispatchEvent(
      new CustomEvent('cart:refresh', {
        detail: {
          cart: cart,
          open: true
        }
      })
    );
  } catch (err) {
    console.error(err);
  }

The /cart.js request returns the updated cart object correctly, but the cart on the storefront does not update in real time after dispatching the cart:refresh event.

What I expected:

  • The cart drawer or cart section should refresh immediately after the event is dispatched.

What actually happens:

  • The event fires, but the cart UI does not update.

Is there something missing in this approach?
Do I need to trigger another event or re-render the cart section for this to work?

Any guidance would be appreciated.

2

Are you using a theme from the theme store? Does it have an event listener for cart:refresh? If not, you’ll need one. This doesn’t just work out of the box.

And if you are using a theme from the theme store, I’d advise reaching ourt to their support.

1 Like
3

@webplanex_info yeah cart:refresh isn’t a built-in Shopify event, it’s theme specific. So if your theme doesn’t have a listener for it the event fires and nothing happens.

Most themes handle cart updates by re-rendering a section. Something like this tends to be more reliable across different themes:

fetch('/?sections=cart-drawer')
  .then(res => res.json())
  .then(data => {
    document.querySelector('#cart-drawer').innerHTML = data['cart-drawer'];
  });

The section id will depend on your theme so check what it’s called in your theme files. Dawn uses cart-drawer but others might differ.

1 Like
4

When using the fetch the cart drawer works after reloading. As you can see on @yavuzoktay ‘s code we need to add the data to the cart drawer. This works well on dawn theme.

5

Hi everyone,

I’m working on updating the cart drawer after applying a discount via a custom function, and I’m facing compatibility issues across different Shopify themes—both older themes and newer OS 2.0 themes (such as Horizon, Heritage, etc.).

Previously, I used:

fetch('/?sections=cart-drawer')

However, in newer themes, the cart-drawer section is not always available, so this approach is no longer reliable.

Currently, I’m using the following function to refresh the cart:

async function refreshCartDrawer() {
  try {
    const cart = await fetch('/cart.js').then(res => res.json());

    document.dispatchEvent(
      new CustomEvent('cart:refresh', {
        detail: {
          cart: cart,
          open: true
        }
      })
    );
  } catch (err) {
    console.error(err);
  }
}

This function is triggered after applying a discount. While it works in some themes, it doesn’t consistently update or open the cart drawer across all themes.

I also tested this approach in the Dawn theme, but it’s not working there either, which makes me think I might be missing a more standard or recommended approach.

My Questions:

  • What is the recommended way to refresh or re-render the cart drawer so it works across both older and newer Shopify themes?

  • Is there any standard event, API, or pattern Shopify provides for this use case?

  • Should I avoid relying on theme-specific sections like cart-drawer and use a different approach altogether?

I’m aiming for a theme-agnostic solution that works consistently across different Shopify themes.

Any guidance or best practices would be greatly appreciated.

Thanks in advance!

6

There is no way to cover all themes, every theme is different and may not have the same sections.

1 Like