Create a Search Filter with 2 filter values

Ask the community
, ,
1

Hi!
I am trying to create a search bar filter for my store, needs to consider both Product Name (name) and SKU (sku).

  1. Product Name as per User Input,
  2. while I wish to ‘hardcode’ SKU to specific products range only. I have named all my SKUs as KLxxx or PGxxx, 2 brands, and split them into 2 different pages, different collections but same store account.

So, while searching for product name in PG’s page, this filter should only show products for SKUs with PGxxx. Vice versa, for KL’s page, filter should only show products for SKUs with KLxxx.

However, it didn’t work. When user starts to input product name into search bar, both KL and PG products will appear as they may have similar names, but with different SKU (I tried with start with / contains).

How can I limit PGxxx to appear in PG product page, KLxxx to appear in only KL products page, using both SKU and Name filter?

I am completely new to coding, tried my best in last few days with videos and guides, hope someone can help me out here please, thanks a lot in advance!

FYI - screenshot of my search bar and repeater. Please note that the dropdown here ‘PG’ is not connected to any dataset yet as it does not seem to work with the search bar.

1194×487 73 KB

Thank you!

import wixData from ‘wix-data’ ;

$w.onReady( function () {
//TODO: write your page related code here…

});

export function dataset1_ready() {
$w( “#repeater1” ).onItemReady( ($item, itemData, index) => {
$item( “#sku” ).text = itemData.sku;
});
}

let lastFilterName;
let lastFilterSKU;

let debounceTimer;

function filter(name, sku) {
if (lastFilterName !== name || lastFilterSKU !== sku) {
let newFilter = wixData.filter();
if (name)
newFilter = newFilter.contains( ‘name’ , name);
if (sku)
newFilter = newFilter.contains( “PG” , sku);
$w( “#dataset1” ).setFilter(newFilter);
lastFilterName = name;
lastFilterSKU = sku;
}
}

export function searchBar_keyPress(event) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout (() => {
filter($w( “#searchBar” ).value, lastFilterSKU);
}, 200 );
}

2

Hi riche4vr,
you are never setting sku when you pass it to your filter() function. Since you want to use the same search bar to search on both fields, you need to pass only one argument and create a filter that will search by name or by sku.

Your filter function, filter($w(‘searchBar’).value, lastFilterSKU), is always receiving lastFilterSKU as the argument to search by SKU, but you are never setting that variable.

3

Hi Karl!
This works now, but not 100% yet!
I can’t seem to get the #dropdown1 to automatically activated. I want it to be activated by default, without user selecting it. Added 2 pictures below for easy illustration.
FYI:
i) dropdown1 by default = to be “PG”,
ii) searchBar to show the user input.

import wixData from 'wix-data';

$w.onReady(function () {
 //TODO: write your page related code here...

});

export function dataset1_ready() {
    $w("#repeater1").onItemReady( ($item, itemData, index) => {
        $item("#sku").text = itemData.sku;
    });
}

let lastFilterName;
let lastFilterSKU;

let debounceTimer;

function filter(name, sku) {
 if (lastFilterName !== name || lastFilterSKU !== sku) {
 let newFilter = wixData.filter();
 if(name)
        newFilter = newFilter.contains('name', name);
 if(sku)
        newFilter = newFilter.contains("sku", "PG-");
        $w("#dataset1").setFilter(newFilter);
        lastFilterName = name;
        lastFilterSKU = sku;
    }
}
export function searchBar_keyPress(event) {
 if (debounceTimer) {
        clearTimeout(debounceTimer);
        debounceTimer = undefined;
    }
    debounceTimer = setTimeout (() => {
        filter($w("#searchBar").value, lastFilterName);
    }, 200);
}
export function dropdown1_viewportEnter(event) {
 if (debounceTimer) {
        clearTimeout(debounceTimer);
        debounceTimer = undefined;
    }
    debounceTimer = setTimeout (() => {
        filter($w("#searchBar").value, lastFilterSKU);
    }, 200);
}

For illustration purpose,

  • Before i re-select the dropdown as PG again, I searched for Orange. SKU Filter didnt work.

1687×534 120 KB

  • After i re-select the dropdown as PG again, I searched for Orange again. Now SKU Filter works!

975×540 56.8 KB

Thanks!

4

I got it! I changed from
export function dropdown1_viewportEnter ( event ) {
to
export function dropdown1_ready ( event ) {

Thanks for letting me know where was the problem. Got it working now, thanks!