Hi All,
I really need some help in creating some conditional filters for my Wix Website. I have managed to create and write the code for the drop downs correctly by following the steps in the Video posted onto the Wix Community YouTube Channel by the Code Queen however, in the video she doesn’t explain how to then link these up to such things as a repeater, and this is exactly what I need!
The code I have used/in the video is below:
$w.onReady( function () {
uniqueDropDown1();
});
function uniqueDropDown1 (){
wixData.query(“doublefiltertest”)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w(“#dropdown1”).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.colour);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
export function dropdown1_change(event, $w) {
uniqueDropDown2();
$w(“#dropdown2”).enable();
}
function uniqueDropDown2 (){
wixData.query(“doublefiltertest”)
.contains(“colour”, $w(“#dropdown1”).value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w(“#dropdown2”).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.object);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
As I said, I really need to be able to link this up to a repeater, as well as including a ‘Reset’ button to put the filters and repeater back to the original state. I have tried testing this by created dropdowns called ‘Colour’ and ‘Object’. So for example, I would like to filter my repeater by ‘Red’ things and then filter by red objects such as:
Red > Ball/Button/Lollipop
Blue > Sky/Car/Water
I would really appreciate if anyone can help me on this as its the last thing I need to implement before my website is finished!
Thanks,
Luke