Biscuits Bundles offers endless customisation with a Custom CSS and Custom JS fields in the Biscuits Bundle app block.

⚠️ We advise you only use custom JS field if you are pasting directly from one of our wonderful customisation guides or have previous knowledge and understanding of Javascript.

1. Finding your App Block

If you haven't seen the Biscuits Bundle app block in your theme before, follow our guide on how to install Biscuits Bundle app block here.

How to add Biscuits app block to your theme ›

2. Editing your Custom JS

Open your Biscuits Bundles app block in theme customiser, scroll down to the Custom JS field.

Start right

Biscuits provides custom events for all of its major functionality. We recommend listening for the BiscuitsBundleForm:ready event to trigger your custom code. This will ensure all the correct components are initialised for you.

document.addEventListener('BiscuitsBundleForm:ready', () => {
  //YOUR CODE HERE
});

View full list of custom JS events ›

⚠️ Don't put the :ready event listeners inside of a "DOMContentLoaded" as our ready events will trigger before this.

Example

For this example we want step 1 to act like a toggle when choosing the selected item.

CUSTOM JS CODE

document.addEventListener('BiscuitsBundleStep:ready', (event) => {
  let stepNumbers = [1,2,3];
  stepNumbers.forEach(function(stepNumber){
    let step = document.querySelector('[data-biscuits-step="'+ stepNumber+'"');
    if (step.dataset.biscuitsSelection != 's'){
      return;
    }
    let productItems = step.querySelectorAll('.biscuits-bundle-item');
    
    productItems.forEach(function(productItem){
      productItem.addEventListener('biscuits--product-selection', function(){
        if (productItem.classList.contains('biscuits--active')){
          let alreadySelectedItems = step.querySelectorAll('.biscuits-bundle-item.biscuits--active');
          alreadySelectedItems.forEach(function(selectedItem){
            if (selectedItem != productItem){
              selectedItem.click();
            }
          });
        }
      });
    });
  });
});

3. Developer Custom JS

For more advanced details around Custom JS, read our in depth guide here.

Developer Custom JS Guide ›

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!

​