Hi, I manage a Wix site (regular Wix, not studio) for a client that already has 60+ static pages. They are looking to implement an 80+ item portfolio, so we’d like to utilize the CMS for this. But we’d also like end users to be able to filter the content in the portfolio according to different keywords and categories if possible.
I found this tutorial: How to implement multiple search conditions in WIX CMS? | by Robin | Medium which looks like it will accomplish what I need, but I’m a little lost on what all needs to be renamed as our search functions are different than what’s outlined here.
Here’s the code they recommend after building your own input fields:
import wixData from 'wix-data';
$w.onReady(function () {
// Assuming you have connected your dropdown elements and input element
let input = $w('#textInput');
let dropdownAge = $w('#dropdownAge');
let dropdownCity = $w('#dropdownCity');
let dropdownGender = $w('#dropdownGender');
let searchButton = $w('#searchButton');
let resultsTable = $w('#listRepeater');
//attach the function to search button onClick event
searchButton.onClick(() => {
let textInput = input.value;
let dropdownValues = {
age: dropdownAge.value,
city: dropdownCity.value,
gender: dropdownGender.value
};
let filteredDataPromise = searchFunction(textInput, dropdownValues);
filteredDataPromise.then(filteredData => {
// Handle the filteredData here
resultsTable.data = filteredData.item;
// resultsTable.rows = filteredData;
/*you should use resultsTable.rows if filteredData is an array of items,
and resultsTable.data if filteredData has an items property
that holds the array of items.*/
});
});
});
function searchFunction(textInput, dropdownValues) {
let dataCollection = wixData.query('dataCollection');
let searchFilters = [];
if (textInput) {
// Create a filter for each column in the data collection
dataCollection = dataCollection.find().then(results => {
results.items.forEach(item => {
for (let key in item) {
if (item[key].toString().toLowerCase().includes(textInput.toLowerCase())) {
searchFilters.push(wixData.query().eq(key, item[key]));
}
}
});
});
}
if (dropdownValues.age) {
dataCollection = dataCollection.eq('age', parseInt(dropdownValues.age));
}
if (dropdownValues.city) {
dataCollection = dataCollection.eq('city', dropdownValues.city);
}
if (dropdownValues.gender) {
dataCollection = dataCollection.eq('gender', dropdownValues.gender);
}
if (searchFilters.length > 0) {
dataCollection = dataCollection.or(searchFilters);
}
return dataCollection.find();
}
Product:
Wix Editor
What are you trying to achieve:
Here’s a screenshot of the input fields I’ve created: Imgur: The magic of the Internet
From L to R: #dropdown1, #dropdown2, #input1, #button1
What have you already tried:
I edited the first part of that code in an attempt to match my own input fields:
let dropdown1= $w('#dropdown1');
let dropdown2= $w('#dropdown2');
let input= $w('#input1');
let searchButton = $w('#button1');
let resultsTable = $w('#listRepeater');
But I’m not sure what 'resultsTable" or #listRepeater is or means, if it’s already a built dynamic page or if I need to build it?
I got confused in the next section as I wasn’t sure why they had age and gender attached to the input button.
I’ve connected the input fields to a dataset called “Projects Portfolio” with the “Search” button’s action going to “apply filters.”
Additional information:
This is a wordpress site, but their “markets, services, keyword, search” function at the top of their projects is the kind of function we’re trying to build: Planning and Design Engineering Projects | Kimley-Horn
We’d like the search function to only search the Wix CMS projects section, not the entire site.
Thanks for any help!