Vorbly <Code>
CODING MADE EASY WITH VORBLY
WIX REPEATER MULTIPLE FILTERS WITH RESET
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
Add a Wix Repeater to showcase all your products. Then add a search bar, dropdown filter and reset button to your webpage. Add a repeater with all your product information.
Add Wix Code to your webpage to filter specific products.
Add Wix Code for reset button to clear all existing filters.
Add a Wix Repeater to showcase all your products. Then add a search bar, dropdown filter and reset button to your webpage. Add a repeater with all your product information.
THE ELEMENTS
The Page
Repeater: #repeater1
User Input: #searchbar
Dropdown: #dropdownfilter
Image Element: #searchicon
Button Element: #resetbutton
The Database
Create a database: Products (dataset1)
Recommended fields:
-
Product Name Field: product
-
Product Description Field: description
-
Price Field: price
-
Product Type Field: productype (for filtering)
Then link fields to your repeater.
THE CODE
Page Code
import wixData from 'wix-data';
$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;
export function searchbar_keyPress(event, $w) {
//Add your code for this event here:
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w("#searchbar").value, lastFilterType);
},200);
}
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;
}
}
export function dropdownfilter_change(event, $w) {
filter(lastFilterSearch, $w("#dropdownfilter").value);
}
export function resetbutton_click(event, $w) {
$w("#dropdownfilter").value = undefined;
$w("#searchbar").value = undefined;
$w("#dataset1").setFilter(wixData.filter());
}
COMMENTS
I'm a paragraph. Click here to add your own text and edit me. It's easy.