Need help creating search for store products that would use multiple fields in a single search bar

Ask the community
, ,
1

I am trying to create a search page where you can search either the name or the SKU of the product using the same search bar element. I was able to get it to work using either or but not in conjunction @shantanukumar847 thanks for your help getting that to work.

2

Hi,

Keep the rest of the code as it was shown in the tutorial and just make a change to the filter function

function filter(name, price) {
 if (lastFilterName !== name || lastFilterPrice !== price) {
 let newFilter = wixData.filter();
 if(name)
        newFilter = newFilter.contains('name', name).or(newFilter.contains('sku', name)); //added an 'or' condition
 if(price)
        newFilter = newFilter.le('price', price);
        $w("#dataset1").setFilter(newFilter);
        lastFilterName = name;
        lastFilterPrice = price;
    }
}

I have added an or condition after the name filter as shown above

3

Thanks @shantanukumar847 That worked.

One more question. If we want to put the search bar to the header. So when a user enters a search query and they press submit or enter. is it possible to show the results on the search page? instead of having the search bar on the dedicated search page?

4

Yes it is possible, although bit more complex. Take a look at my answer here which will help you understand how you can ‘carry over’ a value from one page to another and then filter on the destination page.

5

Thanks that was helpful. If needed, I should be able to figure that out using that information.

6

Hey @shantanukumar847 sorry one more thing. Just noticed that searching the SKU is case sensitive. For example if the SKU is TZ-1088 and I search tz-1088. No results appear unless I type it out with the proper case. Do you know what we can do to make it not case sensitive?

This is the site:
https://www.upgradedplanters.com/search

7

I think i figured it out. I added .toUpperCase() to the filter value for the searchbar keypress event.

Is the following code correct?

 
export function searchBar_keyPress_1(event) {

 if (debounceTimer) {

        clearTimeout(debounceTimer);

        debounceTimer = undefined;

    }

    debounceTimer = setTimeout(() => {

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

    }, 100);


}
8

toUpperCase() will convert your existing string to uppercase letters. This means that “tHis” will become “THIS” and “This” will also become “THIS”

However in the filter function you are using .contains() which is not case sensitive. Hence your problem might be lying somewhere else.