Vorbly <Code>
CODING MADE EASY WITH VORBLY
WIX REPEATER MULTIPLE CHECKBOX FILTERS
Starting an eCommerce business? This tutorial will show you how to add multiple checkbox 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
Product Repeater (#repeater1)
-
Product Image: #image1
-
Product Name: #text1
-
Product Description: #text2
-
Product Price: #text3
-
Buy Now Button: #button1
Filter Elements
-
Size Slider Bar: #slider1
-
Checkbox (Heels): #checkbox1
-
Checkbox (Boots): #checkbox2
-
Checkbox (Sneakers): #checkbox3
-
Submit Button: #submit
-
Container Box: #box1
The Database
Create a database: Products (dataset1)
Recommended fields:
-
Product Name Field: product
-
Product Description Field: description
-
Price Field: price
-
Product Type (Boolean): heels (for filtering)
-
Product Type (Boolean): boots (for filtering)
-
Product Type (Boolean): sneakers (for filtering)
THE CODE
Page Code
import wixData from 'wix-data';
function ProductFilter() {
wixData.query("Products")
.eq("heels", $w("#checkbox1").checked)
.or(
wixData.query("Products")
.eq("boots", $w("#checkbox2").checked)
)
.or(
wixData.query("Products")
.eq("sneakers", $w("#checkbox3").checked)
)
// add or statements for the other checkboxes
.find()
.then((results) => {
console.log(results.items);
let Product = results.items;
$w('#repeater1').data = Product;
})
.catch((err) => {
let errorMsg = err;
console.log(errorMsg);
});
}
$w.onReady(function () {
ProductFilter();
$w('#repeater1').onItemReady(($w, itemData) => {
// Add here all the relevant elements of the repeater
$w('#text1').text = itemData.name;
$w('#text2').text = itemData.description;
$w('#text3').text = String(itemData.price);
$w('#image1').src = itemData.image;
});
});
export function checkbox1_change(event) {
ProductFilter();
}
export function checkbox2_change(event) {
ProductFilter();
}
export function checkbox3_change(event) {
ProductFilter();
}
COMMENTS
I'm a paragraph. Click here to add your own text and edit me. It's easy.
