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
Add a Wix Repeater to showcase all your products. Then add product filter buttons to your webpage.
Add Wix Code to your webpage to filter product categories.
Add Wix Code to your webpage to filter product categories.
Add a Wix Repeater to showcase all your products. Then add product filter buttons to your webpage.
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.
Please complete all required fields.
No comments. Be the first to leave a comment.
Thank you for this tutorial! Can you explain how to do this if the field is a Reference field?
William
Oct 26, 2019
1
Hi William,
Thanks for leaving a comment!
Is your reference field setup in the dataset you are trying to filter? If so, the same code applies, you should be able to filter your dataset by the reference field. Do let us know if you have successfullly implemented this. Thank you!
Andrew (Vorbly)
Nov 02, 2019
0
I love u man <3 I have been looking for this code for a long time. Thanks :))
Davit
Apr 28, 2020
1