Vorbly <Code>
CODING MADE EASY WITH VORBLY
WIX REPEATER WITH MULTIPLE FILTERS
Starting an eCommerce business? This tutorial will show you how to add multiple product filters to your online store using Wix Repeaters. Help your customers find specific products and improve conversion rates. We will provide you with the webpage elements and sample codes required to implement this feature.
THE DEMO
THE ELEMENTS
The Page
Repeater: #repeater1
User Input: #searchbar
Dropdown: #dropdownfilter
Image Element: #searchicon
The Database
Create a database: Products (dataset1)
Recommended fields:
-
Product Name Field: product
-
Product Description Field: description
-
Price Field: price
-
Product Type Field: productyype (for filtering)
Then link fields to your repeater.
THE CODE
Page Code
import wixData from 'wix-data';
// Set Dropdown Options //
$w.onReady(() => {
wixData.query('Type')
.find()
.then(res => {
let options = [{"value": "", "label": "All Types"}];
options.push(...res.items.map(type => {
return {"value": type.search,"label": type.search};
}));
$w("#dropdownfilter").options = options;
})
});
let lastFilterSearch;
let lastFilterType;
let debounceTimer;
// Search Bar //
export function searchbar_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w("#searchbar").value, lastFilterType);
},200);
}
// Set Filters //
function filter(search, type) {
if (lastFilterSearch !== search || lastFilterType !== type) {
let newFilter = wixData.filter();
if(search)
newFilter = newFilter.contains('product',search);
if(type)
newFilter = newFilter.eq('producttype', type);
$w("#dataset1").setFilter(newFilter);
lastFilterSearch = search;
lastFilterType = type;
}
}
// Dropdown Filter //
export function dropdownfilter_change(event, $w) {
filter(lastFilterSearch, $w("#dropdownfilter").value);
}
For More Filters
import wixData from 'wix-data';
let lastFilter1;
let lastFilter2;
let lastFilter3;
// Set Filters //
function filter(filter1, filter2, filter3) {
if (lastFilter1 !== filter1 || lastFilter2 !== filter2 || lastFilter3 !== filter3) {
let newFilter = wixData.filter();
if(filter1)
newFilter = newFilter.contains('item1', filter1);
if(filter2)
newFilter = newFilter.eq('item2', filter2);
if(filter3)
newFilter = newFilter.ge('item3', filter3);
$w("#dataset1").setFilter(newFilter);
lastFilter1 = filter1;
lastFilter2 = filter2;
lastFilter3 = filter3;
}
}
// Dropdown Filters //
// NOTE: The order of the filter functions are important; lastFilter1, lastFilter2, lastFilter3 //
export function dropdown1_change(event, $w) {
filter($w("#dropdown1").value, lastFilter2, lastFilter3);
}
export function dropdown2_change(event, $w) {
filter(lastFilter1, $w("#dropdown2").value, lastFilter3);
}
export function dropdown3_change(event, $w) {
filter(lastFilter1, lastFilter2, $w("#dropdown3").value);
}
COMMENTS
I'm a paragraph. Click here to add your own text and edit me. It's easy.
