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 and include a serverResponse that you can modify before it gets swapped.

To cancel the event:

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

To modify the HTML before swapping:

document.addEventListener('bundly:beforeUpdateBlock', (e) => {
  e.detail.serverResponse = e.detail.serverResponse.replaceAll('Add to cart', 'Add to box');
});

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 and `serverResponse` can be modified
`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'
serverResponse : "<section id=\"shopify-section-template--17937743937698__174787874323dc6e1c\" ..." (before only)

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 and `serverResponse` can be modified
`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 and `serverResponse` can be modified
`bundly:afterAddVariant`	`.bundly__block`	Fires after variant is added
`bundly:beforeRemoveVariant`	`.bundly__block`	Can be canceled and `serverResponse` can be modified
`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
serverResponse : "<section id=\"shopify-section-template--179377439\" ..." (before only)

Dialog Events

Event	Target	Notes
`bundly:beforeToggleProductDialog`	`.bundly__product_modal`	Can be canceled and `serverResponse` can be modified
`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.