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.
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
});
⚠️ 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.
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!