Bundling widget events

This guide explains how to communicate with and listen to events from the bundling widget, enabling external apps to trigger actions and respond to changes immediately.

📘

Platforms:

• Shopify Checkout Integration
• Migrated Shopify Checkout Integration

---

Communicate with the bundling widget

External apps emit a custom event to communicate with the bundling widget. The event triggers a reload, forcing the widget to remount with the latest data from BoxConfig. For example, you could use the following script to emit a reload event to trigger a widget remount:

const reload = new CustomEvent("Recharge::bundling-widget::reload");
document.dispatchEvent(reload)

Refer to the following table for a list of supported events and their associated actions:

---

Listen to the bundling widget

You can listen for specific events to respond to changes occurring in the bundling widget. For example, you could use the following script to listen to the result of creating a new subscription:

document.addEventListener("subscription:create",
  (event) = {
    console.log("Subscription data", event.details.data)
  }
);

---

Customize the Add to Cart button behavior

By default, clicking the Add to Cart button redirects the customer to the cart or checkout page.

Register an Add to Cart callback to alter the behavior, such as opening a modal or a slide-out cart. This callback functions when a customer clicks the Add to Cart button.

Use the following script to override the default behavior:

window.RechargeBundle = { 
  onAddToCart: () => { 
    // Open slide cart or trigger a custom action
  } 
}

Modify the function to integrate with your store's modal or drawer cart system. These changes ensure customers stay on the same storefront page, even while the cart updates dynamically.