document.addEventListener('BiscuitsBundleForm:ready', (event) => {
// it's always good to wrap all logic you have within the 'BiscuitsBundleForm:ready' event.
// CODE STARTS HERE
let relatedSteps = [
{
parentStep: 2, // The step that controls another step
childStep: 3, // The step that gets controlled
triggerId: 44519041368300, // The variant id that needs to be selected to trigger the disabled variant
disableId: 44459230986476, // The variant id gets disabled
}
];
relatedSteps.forEach(function(relatedGroup){
let parentStep = document.querySelector('[data-biscuits-step="'+ relatedGroup.parentStep+'"');
let childStep = document.querySelector('[data-biscuits-step="'+ relatedGroup.childStep+'"');
if (parentStep.dataset.biscuitsSelection != 's' || childStep.dataset.biscuitsSelection != 's'){
return;
}
let productItems = parentStep.querySelectorAll('.biscuits-bundle-item');
if (!productItems){
return;
}
productItems.forEach(function(productItem){
productItem.addEventListener('biscuits--product-selection', function(event){
if (!event.detail.active){
return;
}
let selectedVariantId = event.detail.variant_id;
if (selectedVariantId == relatedGroup.triggerId){
let currentDisabledItems = childStep.querySelectorAll('.biscuits-bundle-item.biscuits--disabled');
currentDisabledItems.forEach(function(disabledItem){
if (disabledItem.dataset.biscuitsId != relatedGroup.disableId){
disabledItem.classList.remove('biscuits--disabled');
}
});
let itemToDisable = childStep.querySelector('[data-biscuits-id="'+ relatedGroup.disableId +'"]');
if (itemToDisable){
if (itemToDisable.classList.contains('biscuits--active')){
itemToDisable.click(); // to unselect it
}
itemToDisable.classList.add('biscuits--disabled');
}
}
else {
let currentDisabledItems = childStep.querySelectorAll('.biscuits-bundle-item.biscuits--disabled');
currentDisabledItems.forEach(function(disabledItem){
disabledItem.classList.remove('biscuits--disabled');
});
}
});
});
});
// CODE ENDS HERE
});