The Kaching Quantity Bundles widget provides three event listeners that enable you to trigger additional actions, such as tracking analytics or implementing custom logic.
This is valuable because you can leverage these event listeners to extend or integrate the widget into your unique solution.
For example, you could create / remove custom input fields for line-item properties based on the selected quantity of a bundle deal.
The target for these event listeners is the "kaching-bundles-block" web component.
const kachingBundlesBlock = document.querySelector('kaching-bundles-block')
Listen for events:
Selected deal bar:
// Event when a deal bar is selected
// Event detail provides selected deal bar ID
kachingBundlesBlock.addEventListener('deal-bar-selected', (event) => {
console.log('deal-bar-selected', event.detail);
})
Selected variant in the bundle deal:
// Event when variant is selected in the bundle deal
// Event detail contains select deal quantity + Selected variantID
kachingBundlesBlock.addEventListener('variant-selected', (event) => {
console.log('variant-selected', event.detail)
})
Different variants selected in the bundle deal:
// Event when different variants are selected in the bundle deal
// Event detail contains selected deal variants quantity + variant ID's + Formatted price
kachingBundlesBlock.addEventListener('variants-changed', (event) => {
console.log('variants-changed', event.detail)
// Get total quantity of selected bundle deal
const quantity = event.detail.variantIdQuantities.map((variant) => variant.quantity).reduce((a, b) => a + b, 0);
console.log("Selected quantity", quantity);
})