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

Event	Target	Notes
`bundly:afterLoadBundle`	`.bundly__details`	Fires after bundle is fully loaded

Block Update Events

Event	Target	Notes
`bundly:beforeUpdateBlock`	`.bundly__block`	Can be canceled
`bundly:afterUpdateBlock`	`.bundly__block`	Fires after block is updated

Details (example values):

originalEvent : CustomEvent
productId : '8570513260706'
variantId : '45579422990498'
section : 'template--17937743937698__174787874323dc6e1c'
url : 'https://example.com/products/437'

Add to Cart Events

Event	Target	Notes
`bundly:beforeAddBundleToCart`	`.bundly__add_to_cart_button`	Can be canceled
`bundly:afterAddBundleToCart`	`.bundly__add_to_cart_button`	Fires after bundle is added to cart

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

Event	Target	Notes
`bundly:beforeChangeVariantOption`	`.bundly__component_grid_item` or `.bundly__product_content`	Can be canceled
`bundly:afterChangeVariantOption`	`.bundly__component_grid_item` or `.bundly__product_content`	Fires after the change is applied

Details (example values):

productId : '7760014049442'

Add/Remove Variant Events

Event	Target	Notes
`bundly:beforeAddVariant`	`.bundly__block`	Can be canceled
`bundly:afterAddVariant`	`.bundly__block`	Fires after variant is added
`bundly:beforeRemoveVariant`	`.bundly__block`	Can be canceled
`bundly:afterRemoveVariant`	`.bundly__block`	Fires after variant is removed

Details (example values):

componentIndex : '0'
componentVariantIndex : '1'
variantId : '43553180418210'
variantCompareAtPrice : '123'
productId : '7760014049442' (add only)
originalEvent : CustomEvent

Dialog Events

Event	Target	Notes
`bundly:beforeToggleProductDialog`	`.bundly__product_modal`	Can be canceled
`bundly:afterToggleProductDialog`	`.bundly__product_modal`	Fires after the dialog opens or closes

Details (example values):

componentIndex : '0'
componentVariantIndex : '1'
originalEvent : ToggleEvent
productId : '7760014049442'

Deprecated Events

These are no longer recommended and should be replaced:

Event	Use Instead
`bundlySubmit`	`bundly:afterAddBundleToCart`
`bundlyBlocksUpdated`	`bundly:afterUpdateBlock`

Need More Events?

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