Events on Bundle Pages

Bundly emits a set of custom JavaScript events on bundle pages. These let you hook into key interactions (like toggling modals, changing options, or adding bundles to the cart) and run your own custom logic.

All before:     events are cancelable. To cancel the event:

document.addEventListener('bundly:beforeToggleProductDialog', (e) => {
  e.preventDefault(); // prevents modal from opening
});

Bundle Load Event

Block Update Events

Details (example values):

• productId     : '8570513260706'     
• variantId     : '45579422990498'    

Add to Cart Events

Details (example values):

• formData     : FormData      instance containing all form inputs
• redirectToCart     : "true"      or "false"     
• success     : "true"      or "false"      (after only)
• error     : "Error message here"      (after only)
• serverResponse     : '{"items":[...]}'      (after only)

Variant Option Events

Details (example values):

• productId     : '7760014049442'     

Add/Remove Variant Events

Details (example values):

• componentIndex     : '0'     
• componentVariantIndex     : '1'     
• variantId     : '43553180418210'     
• productId     : '7760014049442'      (add only)

Dialog Events

Details (example values):

• componentIndex     : '0'     
• componentVariantIndex     : '1'     
• productId     : '7760014049442'     

Deprecated Events

These are no longer recommended and should be replaced:

Need More Events?

Let us know what you’re building, we’re happy to add new hooks.