Filter Wix product by collections from dropdown list value.

Ask the community
, ,
1

I want to filter my products by collection name from dropdown list value.
I tried some codes, but can’t get it work.

Here my code:

function search() {
let collectionName=$w(“#collectionDropdown”).value.toString();

wixData.query('Stores/Products')

.contains(‘name’, $w(“#searchBar”).value)
.hasAll(‘collections’, collectionName)
.find()
.then(res => {
$w(“#repeater1”).data=res.items;
})
. catch ( (error) => {
let errorMsg = error.message;
let code = error.code;
console.log(“ERROR:”+code+" | "+errorMsg);
} );

}

Somebody help me fix it.

2

https://support.wix.com/en/corvid-by-wix/wix-stores-with-corvid
https://www.wix.com/corvid/reference/wix-data.WixDataQuery.html

For starters why are you changing your dropdown value toString, especially when you are expecting the contains query to search for the value of it too.

Also your let line should be before you call any function, the data query should really be wrapped up in your function.

Plus, you can’t call a function simply by using function search… You would also be better off using dropdown onChange
https://www.wix.com/corvid/reference/$w.Dropdown.html#onChange

Have a read of these too,
https://support.wix.com/en/article/corvid-working-with-the-properties-panel
https://support.wix.com/en/article/corvid-reacting-to-user-actions-using-events

3

Thank you. I just made a simple page for product searching with product name textbox and product collections dropdownlist. When i click Search button i want it filter name and collection name to display products.

Here’s my code:

export function searchButton_click() {
search();
}
export function searchBar_keyPress(event, $w) {
if (event.code === 13){
search();
}
}

function search() {
let collectionName=$w(“#collectionDropdown”).value;

wixData.query(‘Stores/Products’)
.contains(‘name’, $w(“#searchBar”).value)
.hasSome(‘collections’, collectionName)
.find()
.then(res => {
$w(“#repeater1”).data=res.items;
})
. catch ( (error) => {
let errorMsg = error.message;
let code = error.code;
console.log(“ERROR:”+code+" | "+errorMsg);
} );

}

It doesn’t need toString() for dropdown value. I call search function from Search button click event. Is it ok?

Without collection dropdownlist, my page is working normally. But with it, searching doesn’t work.
I don’t know this code: .hasSome(‘collections’, collectionName) is right or wrong. Collection field in Wix Product is a reference field and has type is array. I don’t know how to use it.

Here’s when i clicked Search button, there’s nothing display, no any log:

3831×1906 384 KB

Please help me to make it work.