Vorbly <Code>
CODING MADE EASY WITH VORBLY
WIX REPEATER WITH FILTER BUTTONS
Starting an eCommerce business? This tutorial will show you how to add product filter buttons 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
Button Elements
-
Bike Button: #BikeButton
-
Board Button: #BoardButton
-
All Button: #AllButton
The Database
Create a database: Products (dataset1)
Recommended fields:
-
Product Name Field: product
-
Product Description Field: description
-
Price Field: price
-
Product Type Field: producttype (for filtering)
Then link fields to your repeater.
THE CODE
Page Code
import wixData from 'wix-data';
export function BikeButton_click(event, $w) {
console.log("filtering bike");
$w("#dataset1").setFilter(wixData.filter().contains('producttype','Bike'));
$w("#BikeButton").style.backgroundColor = "Green";
$w("#BoardButton").style.backgroundColor = "Grey";
$w("#all").style.backgroundColor = "Grey";
}
export function BoardButton_click(event, $w) {
console.log("filtering board");
$w("#dataset1").setFilter(wixData.filter().contains('producttype','Board'));
$w("#BikeButton").style.backgroundColor = "Grey";
$w("#BoardButton").style.backgroundColor = "Green";
$w("#AllButton").style.backgroundColor = "Grey";
}
export function AllButton_click(event, $w) {
console.log("reset filters");
$w("#dataset1").setFilter(wixData.filter().contains('producttype',''));
$w("#BikeButton").style.backgroundColor = "Grey";
$w("#BoardButton").style.backgroundColor = "Grey";
$w("#AllButton").style.backgroundColor = "Green";
}
COMMENTS
I'm a paragraph. Click here to add your own text and edit me. It's easy.
