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
Add a Wix Repeater to showcase all your products. Then add multiple checkboxes to your webpage. Add a repeater with all your product information.
Add Wix Code to your webpage to filter specific products. When users uncheck a product category, the Wix Repeater is filtered for the remaining product categories.
Add Wix Code to your webpage to filter specific products. When users uncheck a product category, the Wix Repeater is filtered for the remaining product categories.
Add a Wix Repeater to showcase all your products. Then add multiple checkboxes to your webpage. Add a repeater with all your product information.
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.
Please complete all required fields.
No comments. Be the first to leave a comment.
Hi, thank you for this, I think its close to what I'm looking for. I'm trying to filter my dynamic repeater with a multiple choice checkbox. Do you have any advice on how to do that?
Karen
Aug 18, 2019
2
Hi Karen,
You can use radio buttons or a dropdown instead for a multiple choice "checkbox". Then filter the dataset (repeater) by the value of the radio button or dropdown.
Cheers!
Andrew (Vorbly)
Aug 25, 2019
3
Is the #checkbox1 the ID? I can only add the ID of the whole checkbox in that piece of the code. Also, I am getting the message "'checked does not exist'" as a message. Also, do I need to add the repeater information piece?
Faith
May 22, 2020
0
Hey,
if I use your code, I get a lot of "wrong" items.
For example: When I choose boots, the filter also shows me heels.
And do you use the multiple checkbox group, or do you have individual checkboxes ?
Nick
Jul 17, 2020
0