Getting Started
Make sure you have read about editing Custom JS in Biscuits App block
Where does your custom code output?
Your custom javascript code is placed at the very bottom of our Shopify theme block code. This ensures that you can use event listeners on our custom events and interact with fully loaded DOM elements.
<!-- our Biscuits Bundles code -->
<script>
/* Your custom javascript will output here */
</script>
<script src="biscuits-section-bundle-development.min.js" defer></script>
Custom Events
Summary Table
Custom Event Name | Description |
| Anytime someone updates a step in the bundle form—think product picks or quantity tweaks—we fire this event. |
| Anytime someone selects or deselect a product, this event will trigger with all the product details. |
| Anytime a products quantity changes |
Step Update
What Happens: Anytime someone updates a step in the bundle form—think product picks or quantity tweaks—we fire this event.
Example Snippet:
document.querySelectorAll('.biscuits-bundle-step').forEach((step) => {
step.addEventListener('biscuits--step-update', (event) => {
/*replace this line with your custom code*/
});
});
Product Selection
What Happens: Select or deselect a product, this event will trigger with all the product details. Make sure to check if event.detail.active is true if you only want to listen to selected events, and not unselected events.
Access details about the product selection from event.detail
Example Snippet:
document.querySelectorAll('.biscuits-bundle-item').forEach((item) => {
item.addEventListener('biscuits--product-selection', (event) => {
/*replace this line with your custom code*/
});
});
event.detail = {
variant_id: string
price: integer
compare_at_price:
quantity: integer
active: boolean
max: integer
step: object
product_id: string
uniqueCode: string
quantity_available: integer
}
Quantity Updated
What Happens: A products quantity changes.
Access details about the quantity event from event.detail
Example Snippet:
document.querySelectorAll('.biscuits-bundle-quantity').forEach((quantity) => {
quantity.addEventListener('biscuits--quantity-updated', (event) => {
/*replace this line with your custom code*/
});
});
detail: {
quantity: integer
fixedQuantity: integer
}
Ready Events for Custom Elements
When our custom elements are all set and connected they will fire ready custom events
Forms
Steps
Variants
Products
Quantities
Prices
Summary Table
In order or occurrence, this event will trigger when the custom html element is initialised.
Custom Event Name | Custom Element |
| Bundle Variant |
| Bundle Product |
| Bundle Product or Variant Quantity Selector |
| Bundle Product or Variant Price |
| Bundle Step |
| Bundle Form |
Example Snippet:
document.addEventListener('BiscuitsBundleForm:ready', (event) => {
/*replace this line with your custom code*/
console.log('Biscuits Bundle Form is set!', event.target);
});
💡 Tip: Make sure you don't put this event listener inside a "DOMContentLoaded" as our ready events will trigger before this.
Example: Use an event to get the current total price
Using the Step Update event, you could select the form itself, and access form data like the formTotalPrice whenever the user interacts with a step.
document.querySelectorAll('.biscuits-bundle-step').forEach((step) => {
step.addEventListener('biscuits--step-update', (event) => {
let form = document.querySelector('biscuits-bundle-form');
console.log(form.formTotalPrice)
});
});
Note - If you are planning to use this example to update your own custom price display, you would still need to initialise your initial price as the event doesn't fire on page load.
Some of the other values you could access on the form are:
formCompareAtPrice
formDiscountValue
formSavingsAmount
formSavingsPercentage
formTotalPrice
Testing
Always thoroughly test your custom JS to ensure if behaves as expected across all supported browsers and devices.
Stuck or got questions?
Use the chat widget below, or reach out to us at [email protected]
Happy coding, and thanks for teaming up with Biscuits Bundles!