Vorbly <Code>

CODING MADE EASY WITH VORBLY

WIX REPEATER WITH MULTIPLE FILTERS

Starting an eCommerce business? This tutorial will show you how to add multiple product 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/2

THE ELEMENTS

The Page

Repeater: #repeater1​​

​​

User Input: #searchbar

​

Dropdown: #dropdownfilter

​

Image Element: #searchicon​

​

The Database

Create a database: Products (dataset1)

​

Recommended fields:

  • Product Name Field: product

  • Product Description Field: description

  • Price Field: price

  • Product Type Field: productyype (for filtering)

​

Then link fields to your repeater.

​

​

​

THE CODE

Page Code

import wixData from 'wix-data';

​

// Set Dropdown Options //

​

$w.onReady(() => {

    wixData.query('Type')

        .find()

        .then(res => {

            let options = [{"value": "", "label": "All Types"}];

            options.push(...res.items.map(type => {

                return {"value": type.search,"label": type.search};

            }));

        $w("#dropdownfilter").options = options;

        })

});

 

let lastFilterSearch;

let lastFilterType;

let debounceTimer;

​

// Search Bar //

 

export function searchbar_keyPress(event, $w) {

​

    if (debounceTimer) {

        clearTimeout(debounceTimer);

        debounceTimer = undefined;

    }

    debounceTimer = setTimeout(() => {

        filter($w("#searchbar").value, lastFilterType);

    },200);

 

}

​

// Set Filters //

​

function filter(search, type) {

    if (lastFilterSearch !== search || lastFilterType !== type) {

​

        let newFilter = wixData.filter();

​

        if(search)

            newFilter = newFilter.contains('product',search);

​

        if(type)

            newFilter = newFilter.eq('producttype', type);

            

    $w("#dataset1").setFilter(newFilter);

​

    lastFilterSearch = search;

    lastFilterType = type;

​

    }   

 

}

​

// Dropdown Filter //

​

export function dropdownfilter_change(event, $w) {

    filter(lastFilterSearch, $w("#dropdownfilter").value);

}

For More Filters

import wixData from 'wix-data';

 

let lastFilter1;

let lastFilter2;

let lastFilter3;

​

// Set Filters //

​

function filter(filter1, filter2, filter3) {

    if (lastFilter1 !== filter1 || lastFilter2 !== filter2 || lastFilter3 !== filter3) {

​

        let newFilter = wixData.filter();

​

        if(filter1)

            newFilter = newFilter.contains('item1', filter1);

​

        if(filter2)

            newFilter = newFilter.eq('item2', filter2);

            

        if(filter3)

            newFilter = newFilter.ge('item3', filter3);

​

    $w("#dataset1").setFilter(newFilter);

​

    lastFilter1 = filter1;

    lastFilter2 = filter2;

    lastFilter3 = filter3;

​

    }   

 

}

​

// Dropdown Filters //

// NOTE: The order of the filter functions are important; lastFilter1, lastFilter2, lastFilter3 //

​

export function dropdown1_change(event, $w) {

    filter($w("#dropdown1").value, lastFilter2, lastFilter3);

}

​

export function dropdown2_change(event, $w) {

    filter(lastFilter1, $w("#dropdown2").value, lastFilter3);

}

​

export function dropdown3_change(event, $w) {

    filter(lastFilter1, lastFilter2, $w("#dropdown3").value);

}

​

​

​

​

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! this is exactly what I needed. You made the code easy to understand

Jared Low

Jul 31, 2018

5

Thanks Jared! I'm glad we made it easy for you to understand the code.

Ben (Vorbly)

Jul 31, 2018

7

Hi Ben, how can I reset filter after selecting an option? i.e. to go back to the pre-filtered or All results?

Jared Low

Aug 01, 2018

5

Hi Jared,

You can use the following code to reset all filters. For pre-filtered inputs, change the "undefined" values to your pre-filtered values.

export function resetbutton_click(event, $w) {
$w("#dropdownfilter").value = undefined;
$w("#searchbar").value = undefined;
$w("#dataset1").setFilter(wixData.filter());
}

Hope this helps.

Ben (Vorbly)

Aug 07, 2018

6

Vorbly is amazing, what a tool to have as you learn coding. Such great service, and knowledgeable team, yet they make it make SENSE!

‎Aura Estrella

Feb 28, 2019

2

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP

CONTACT US