Skip to main content
Developer Javascript and events

Some events we emit so you can build additional logic around them

Updated over a month ago

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

biscuits--step-update

Anytime someone updates a step in the bundle form—think product picks or quantity tweaks—we fire this event.

biscuits--product-selection

Anytime someone selects or deselect a product, this event will trigger with all the product details.

biscuits--quantity-updated

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

BiscuitsBundleVariant:ready

Bundle Variant

BiscuitsBundleProduct:ready

Bundle Product

BiscuitsBundleQuantity:ready

Bundle Product or Variant Quantity Selector

BiscuitsBundlePrice:ready

Bundle Product or Variant Price

BiscuitsBundleStep:ready

Bundle Step

BiscuitsBundleForm:ready

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!

Did this answer your question?