Vorbly Code | WIX REPEATER MULTIPLE FILTERS WITH RESET

Vorbly <Code>

CODING MADE EASY WITH VORBLY

WIX REPEATER MULTIPLE FILTERS WITH RESET

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/4

THE ELEMENTS

The Page

Repeater: #repeater1​​

User Input: #searchbar

Dropdown: #dropdownfilter

Image Element: #searchicon​

Button Element: #resetbutton

The Database

Create a database: Products (dataset1)

Recommended fields:

  • Product Name Field: product

  • Product Description Field: description

  • Price Field: price

  • Product Type Field: productype (for filtering)

Then link fields to your repeater.

THE CODE

Page Code

import wixData from 'wix-data';

 

$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;

 

export function searchbar_keyPress(event, $w) {

    //Add your code for this event here:

    if (debounceTimer) {

        clearTimeout(debounceTimer);

        debounceTimer = undefined;

    }

    debounceTimer = setTimeout(() => {

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

    },200);

 

}

 

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;

    }   

 

}

 

export function dropdownfilter_change(event, $w) {

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

}

export function resetbutton_click(event, $w) {

$w("#dropdownfilter").value = undefined;

$w("#searchbar").value = undefined;

$w("#dataset1").setFilter(wixData.filter());

}

COMMENTS

I'm a paragraph. Click here to add your own text and edit me. It's easy.

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP