Hi all,
I am a total beginner and would appreciate your help. I am using the standard functionality of Wix to build my website but they don’t have it for filters on repeaters. Therefore, I followed a YouTube video to add a search field and a filter. Worked perfect!
However, I need more filters and the video didn’t cover that. I copy-pasted the lines for the first (working) filter for Category and changed the references to create a second filter for Colour. But the Colour filter doesn’t work. Whatever option I select on the dropdown, it returns 0 results in the repeater.
Do I need any additional code line for multiple filters? Where could the issue be? I am attaching my code for reference.
Thank you very much.
// API Reference: https://www.wix.com/corvid/reference
// “Hello, World!” Example: https://www.wix.com/corvid/hello-world
import wixData from 'wix-data';
$w.onReady (function () {
loadCategory();
loadColour()
});
let lastFilterKeywords;
let lastFilterCategory;
let lastFilterColour;
function filter (keywords, category, colour) {
if (lastFilterKeywords !== keywords || lastFilterCategory !== category || lastFilterColour !== colour ) {
let newFilter = wixData.filter ();
if (keywords) {
newFilter = newFilter.contains ("title", keywords)
}
if (category) {
newFilter = newFilter.contains ("category", category)
}
if (colour) {
newFilter = newFilter.contains ("colour", colour)
}
$w("#dynamicDataset").setFilter (newFilter);
lastFilterKeywords = keywords;
lastFilterCategory = category;
lastFilterColour = colour;
}
}
function loadCategory () {
wixData.query ("MEN").limit(1000).ascending("category").distinct ("category").then((results) => {
let distinctList = results.items.map (element => { return { label: element, value: element};})
distinctList.unshift ({"value": "", "label": "All"})
$w("#sCategory").options = distinctList
})
}
function loadColour () {
wixData.query ("MEN").limit(1000).ascending("colour").distinct ("colour").then((results) => {
let distinctList = results.items.map (element => { return { label: element, value: element};})
distinctList.unshift ({"value": "", "label": "All"})
$w("#sColour").options = distinctList
})
}
let onTime;
export function searchField_keyPress(event) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
if (onTime) {
clearTimeout (onTime)
onTime = undefined
}
onTime = setTimeout (() => {
filter ($w("#searchField").value, lastFilterCategory);
filter ($w("#searchField").value, lastFilterColour)
}, 500)
}
export function sCategory_change(event) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
filter(lastFilterKeywords, $w("#sCategory").value);
}
export function sColour_change(event) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
filter(lastFilterKeywords, $w("#sColour").value);
}