New to Wix so I’ve been searching around, but unfortunately stumped. I have a Wix site that has 20 options for an item variation. I want to limit the user to select a maximum of only 4 options.
variation for reference:
Since there was no way to this through the UI, I thought I’d try writing custom code to block the user on the frontend from adding more than 4 toppings. I tested my code and confirmed its working as expected when I try in my browser’s console. The catch is that I have to change the scope to be within Wix’s iframe. I’ve tried updating my code to select the iframe and then query the contents within, but this gives me a Cross-Origin error.
Searching online, it doesn’t seem like there’s a way to have my snippet interact with the contents of Wix’s iframe. Is there a workaround I am missing?
My next approach was to use Velo. I noticed that “document” is not scoped to be used. I tried using Wix’s $w() but I found no way of selecting the variations screenshotted above. Does anyone have workarounds or suggestions on implementing this?
velo for reference:
snippet mentioned above for reference:
document.addEventListener('DOMContentLoaded', function(){
var toppingSection = document.querySelectorAll(".openrest_ItemView_VariationPane_wrapper")[1]
var toppingLabels = toppingSection.querySelectorAll('label')
toppingLabels.forEach(function(label){
label.addEventListener('click', function(){
setTimeout(checkToppings, 100)
})
})
function checkToppings(){
var numToppings = 0
toppingLabels.forEach(function(label){
if( label.ariaChecked == 'true' ){ numToppings += 1 }
})
if(numToppings == 4){
killToppings()
} else {
resetToppings()
}
}
function killToppings(){
toppingLabels.forEach(function(label){
if(label.ariaChecked == 'false'){ label.style.pointerEvents = 'none' }
})
}
function resetToppings(){
toppingLabels.forEach(function(label){
if(label.ariaChecked == 'false'){ label.style.pointerEvents = 'auto' }
})
}
})