Vorbly Code | WIX REPEATER MULTIPLE CHECKBOX FILTERS

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

1/3

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.

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

1

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

2

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP