Broadcast Theme: Slide out cart JS.

Broadcast Theme: Slide out cart JS.

arandrea
Visitor
1 0 0

Hi there I am using the broadcast theme in combination with Replo.

I am having issues identifying the correct script to open the side cart correctly.

Whilst this script opens up the cart I am left with an empty cart despite the script executing after Replo's own add to cart function. Any suggestions?

 

if (window.cart && typeof window.cart.getCart === 'function') {
window.cart.getCart();
}

const drawerButton = document.querySelector('.navlink--cart--icon'); 
if (drawerButton) {
drawerButton.click(); 
}
Reply 1 (1)

mageplaza-cs
Shopify Partner
552 46 86

Hi @arandrea ,

I am from Mageplaza - Shopify solution expert.

 

You're encountering this issue because the cart drawer in the Broadcast theme is typically controlled by its own JavaScript event system, and just clicking the cart icon or calling window.cart.getCart() doesn't properly trigger the data flow or UI updates needed to reflect cart changes when using Replo.

Here’s a breakdown and suggested solution:

 

What’s likely happening

  1. Replo adds the product via AJAX, bypassing Shopify’s native form behavior.
  2. Your script manually clicks the cart icon, but Broadcast’s drawer cart isn’t aware that the cart data has changed.
  3. So the drawer opens with stale or empty data.

Proper way to trigger cart drawer in Broadcast theme
Broadcast uses a custom window.Theme or window.CartDrawer object to manage cart state.

Instead of simulating a click or just calling getCart(), use the drawer’s custom event system:

document.dispatchEvent(new CustomEvent('cart:refresh', {
  detail: {
    openDrawer: true
  }
}));

This is the event Broadcast listens for to fetch the latest cart state and open the drawer.

 

When to fire it
If you’re using Replo’s addToCart button, you’ll want to listen for their success callback or use a small delay after their AJAX call to ensure the cart has updated before opening the drawer.

Example:

setTimeout(() => {
  document.dispatchEvent(new CustomEvent('cart:refresh', {
    detail: {
      openDrawer: true
    }
  }));
}, 500); // Wait for Replo to complete AJAX call

You can adjust the delay based on performance, or better yet — hook into Replo’s callback if they offer one.

 

Please let me know if it works as expected

Best regards!

Mageplaza | Top-Rated Shopify Agency | Trusted by 230,000+ worldwide merchants


If our suggestion works for you, please give it a Like or mark it as a Solution!


Should you have any questions or concerns, feel free to contact us via consultant@mageplaza.com