Getting Started

Make sure you have read about editing Custom JS in Biscuits App block

How to edit Custom JS ›

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-production.min.js" defer></script>

Custom Events

Summary Table

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.

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!