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) => {
    // Your awesome code here
  });
});

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.

Example Snippet:

document.querySelectorAll('biscuits-bundle-item').forEach((step) => {
  step.addEventListener('biscuits--product-selection', (event) => {
    // Dive into event.detail for the goods
  });
});

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

Example Snippet:

document.querySelectorAll('biscuits-bundle-quantity').forEach((quantity) => {
  quantity.addEventListener('biscuits--quantity-updated', (event) => {
    // Access the new quantity from event.detail
  });
});

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:

// BiscuitsBundleVariant:ready
// BiscuitsBundleProduct:ready
// BiscuitsBundleQuantity:ready
// BiscuitsBundlePrice:ready
// BiscuitsBundleStep:ready
// BiscuitsBundleForm:ready

document.addEventListener('BiscuitsBundleForm:ready', (event) => {
  // Do something cool when the form's loaded
  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.

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!

Developer Custom CSS

Make your step behave like a toggle