Hi there!
I’m trying to make a product catalogue page by using Multi-State box and Wix shop grid galleries. People can switch the categories, in this case ages by clicking buttons.
I could make basic functions and they work fine, excepts when users try to come back a state from product pages.
More specifically, when users try to look a kimono(Product page) and come back, they will be navigated to a default Muti-State box status which users need to click buttons again to look same category’s kimono.
I can simply use wix grid gallery’s filter function but I need more design flexibilities for mobile view so any comments are appreciated.
Thnak you,
The page :
https://www.okadaphoto.com/test
Codes in the page :
//TODO: write your page related code here...
$w('#3gbutton').onClick(() => {
$w('#kimonogallery').changeState('3g');
});
$w('#7gbutton').onClick(() => {
$w('#kimonogallery').changeState('7g');
});
$w('#3bbutton').onClick(() => {
$w('#kimonogallery').changeState('3b');
});
$w('#5bbutton').onClick(() => {
$w('#kimonogallery').changeState('5b');
});
$w('#antiquebutton').onClick(() => {
$w('#kimonogallery').changeState('10g');
});
});
function setButtonColor(button, opacity){
button.style.backgroundColor = `rgba(229,0,18,${opacity})`;
button.style.borderColor = `rgba(225,0,0,0)`;
opacity === 0? button.style.color = "#E50012" : button.style.color = "#ffffff";}
$w.onReady(function () {
let buttonsToChange = [$w("#3gbutton"), $w("#7gbutton"), $w("#3bbutton"), $w("#5bbutton"), $w("#antiquebutton")];//put the relevant buttons here
buttonsToChange.forEach(button => {
setButtonColor(button, 1);
button.onClick((event) => {
buttonsToChange.forEach(b => {
setButtonColor(b, 0.3);
});
setButtonColor(button, 1);
})
})
})
, little bit late —> 4:30 omg)