How to create a search bar in Wix Stores | Dude Lemon Web Developement

#WIXSTORES

Search Bar

import wixData from 'wix-data';

 

$w.onReady(function () {

 

});

 

export function dataset1_ready() {

    $w("#repeater1").onItemReady( ($item, itemData, index) => {

        $item("#price").text = itemData.price + ' ' + itemData.currency;

    });

}

 

let lastFilterName;

let lastFilterPrice;

 

let debounceTimer;

 

function filter(name, price) {

    if (lastFilterName !== name || lastFilterPrice !== price) {

        let newFilter = wixData.filter();

        if(name)

        newFilter = newFilter.contains('name', name);

        if(price)

        newFilter = newFilter.le('price', price);

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

        lastFilterName = name;

        lastFilterPrice = price;

    }

}

 

export function searchBar_keyPress(event) {

    if (debounceTimer) {

        clearTimeout(debounceTimer);

        debounceTimer = undefined;

    }

    debounceTimer = setTimeout(() => {

        filter($w("#searchBar").value, lastFilterPrice);

    }, 200);

}

 

export function slider1_change(event) {

    let num = Number($w('#slider1').value);

    filter(lastFilterName, num);

}

Dude Lemon

© 2020 Dude Lemon. All Rights Reserved

Quick Links

Stay Connected

Facebook
Instagram
Youtube