How do i create a search bar to filter my products on wix store ?

Ask the community
, ,
1

i am currently trying to add a search bar to my wix store, to filter out products. my question is can i filter the products that are displayed on the listgrid? can someone help me on this.

2

Hi @henrydchanph02

I hope this video can help you :

https://www.youtube.com/watch?v=Hx7_8-lRsW0&feature=youtu.be

This is the full code from the video :

import wixData from "wix-data";

$w.onReady(() => {
  loadContinents();
});

let lastFilterTitle;
let lastFilterContinent;
let debounceTimer;
export function iTitle_keyPress(event, $w) {
  if (debounceTimer) {
    clearTimeout(debounceTimer);
    debounceTimer = undefined;
  }
  debounceTimer = setTimeout(() => {
    filter($w('#iTitle').value, lastFilterContinent);  
  }, 500);
}

export function iContinent_change(event, $w) {
	filter(lastFilterTitle, $w('#iContinent').value);
}

function filter(title, continent) {
  if (lastFilterTitle !== title || lastFilterContinent !== continent) {
    let newFilter = wixData.filter();
    if (title)
      newFilter = newFilter.contains('articleTitle', title);
    if (continent)
      newFilter = newFilter.contains('continent', continent);
    $w('#dataset1').setFilter(newFilter);		
    lastFilterTitle = title; 
    lastFilterContinent = continent;
  }
}

function loadContinents() {
  wixData.query('Continents')
	  .find()
	  .then(res => {
	  	let options = [{"value": '', "label": 'All Continents'}];
	  	options.push(...res.items.map(continent => {
	  		return {"value": continent.title, "label": continent.title};
	  	}));
	  	$w('#iContinent').options = options;
	  });

}
3

thanks for the info.

4

Or you can look at the actual example yourself and open it up in your own Wix Editor with the page all setup along with all the needed code already added to the page as well.
https://www.wix.com/corvid/example-old/search

5

An easy option for you would be to just use the Wix Site Search app.
https://support.wix.com/en/article/about-wix-site-search

What does Wix Site Search search?
Static pages
Pages hidden from your site menu (excluding pages pages hidden from search engines )
Pages with dynamic content
Wix Stores products
Wix Bookings
Wix Forum
Wix Blog

6

@givemeawhisky thanks for the advice. i tried that sure it was able to search some of the items but as i found out it was unable to search all the items. i tried to search all item one by one.