I'm building a search filter feature on my healthy products website but I stuck and need help with the code.
The main objective of the filter is to search a correct product correspond to the specific symptoms.
I'm going to explain all the information as much detail as I can and keep in mind I'm not a developer, so please answer it like you're talking to a non-coder person (although I can read really-really basic code).
~Thank you in advance
PAGE STRUCTURE & ELEMENT
Main Page = consist of almost all the elements, including:
Container Box (#box1) : for containing #repeater1
Repeater (#repeater1) : for containing #checkbox1 and #text1
Single Checkbox (#checkbox1) : I used an empty single checkbox (not a group checkbox and has no value) to customize the layout (border, fill, color, position, etc.). Because if I use template checkbox, I can't customize the design later
Text (#text1) : Because of the #checkbox1 has no value and needed to load the value (symptoms) later, this text also link to the same collection to load 'Collection 2' about symptoms name
Search Button (#button1): a triggered click to start the filter process -> it will open the #lightboxResult and show the result on #repeaterResult
Clear Button (#clearButton) : to clear all the checkboxes and query
![](https://static.wixstatic.com/media/e85d8d_137dc37978df44b084f7b4aced7aead8~mv2.png/v1/fill/w_75,h_21,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/e85d8d_137dc37978df44b084f7b4aced7aead8~mv2.png)
Lightbox Page = only consist of the result of the filter function above
Lightbox (#lightboxResult) : for containing #repeaterResult
Repeater (#repeaterResult) : for the result of the filter. The dataset shows each field from 'Collection 1'
Text (#productResult) : for the product filter result
Text (#symptomResult) : for the symptoms name filter result Close button
![](https://static.wixstatic.com/media/e85d8d_eb9fa60666404a2aace0a52cc08c3a45~mv2.png/v1/fill/w_46,h_25,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/e85d8d_eb9fa60666404a2aace0a52cc08c3a45~mv2.png)
COLLECTION & DATASET
Collection 1 (ID: Products)
Field 1 (type: Text / key: title) : for the product name. A product can be used on more than 1 symptoms
Field 2 (type: Tags / key: symptoms) : filled with the symptoms correspond to the products. It can consist more than 1 symptom per product
![](https://static.wixstatic.com/media/e85d8d_772e65270c9c47149edfd0a812b98b81~mv2.png/v1/fill/w_46,h_29,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/e85d8d_772e65270c9c47149edfd0a812b98b81~mv2.png)
Collection 2 (ID: Symptoms)
Field 1 (type: Text / key: name) : consist of all symptoms name. It is a basic data to fill all the #checkbox1 & #text1 value
![](https://static.wixstatic.com/media/e85d8d_998c6e00dd894afa880d634286651189~mv2.png/v1/fill/w_87,h_128,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/e85d8d_998c6e00dd894afa880d634286651189~mv2.png)
LOGIC & FUNCTION
Function 1
Load all the symptoms name ('name') from the Collection 2 ('Symptoms') and add it to the #checkbox1 & #text1 list
Function 2
#checkbox1 selected > filter the products that contain any of the selected symptoms based on the data on Collection 1 ('Products')
Function 3
Search Button #button1 clicked > show #lightboxResult and call the #repeaterResult to show all the correspond products from the filter
CODE
I manage to write a code until some point. The Function 1 and Function 2 works fine, but the result query is showing on the same page in a repeater. But when I try to make Function 3, I got stuck. The result query won't show on the Lightbox page within the #repeaterResult. It just showing all the data from the collection instead. Here's the code:
import wixData from 'wix-data';
import wixWindow from 'wix-window';
$w.onReady(() => {
setupRepeater();
loadSymptoms();
});
function setupRepeater() {
$w('#repeater1').onItemReady(($item, itemData) => {
$item('#checkbox1').onClick(() => {
searchCB();
});
$item('#text1').text = itemData.value;
});
}
function loadSymptoms() {
wixData.query('Symptoms')
.find()
.then(results => {
$w('#repeater1').data = [];
let symptomsDropdownOptions = [];
symptomsDropdownOptions.push(...results.items.map(symptoms => {
return { _id: symptoms._id, value: symptoms.title, label: symptoms.title };
}));
$w('#repeater1').data = symptomsDropdownOptions;
});
}
let symptomsCB = [];
function searchCB() {
$w('#repeater1').forEachItem(($item, itemData, index) => {
if ($item('#checkbox1').checked) {
symptomsCB.push($item('#text1').text);
}
});
}
export function searchButton3_click(event) {
symptomsCB = [];
$w('#repeater1').forEachItem(($item, itemData, index) => {
if ($item('#checkbox1').checked) {
symptomsCB.push($item('#text1').text);
}
});
let query = wixData.query("Products");
for (let i = 0; i < symptomsCB.length; i++) {
query = query.hasAll("symptoms", symptomsCB[i]);
}
query.find().then(results => {
// Filter the results based on the selected symptoms
const filteredResults = results.items.filter(item => {
return symptomsCB.every(symptom => item.symptoms.includes(symptom));
});
// Assign the filtered results to the repeater in Lightbox1
wixWindow.openLightbox("LightboxResult").then(() => {
$w('#repeaterResult').data = filteredResults;
});
});
}
$w.onReady(() => {
$w('#clearButton').onClick(() => {
$w("#repeater1").data.forEach(item => {
$w("#checkbox1").checked = false;
});
$w("#dataset1").setFilter(wixData.filter());
});
});
That's all, and please kindly help me. ~ Thank you
Issue resolved?
Step-1: Getting-Data + Generating CHB-List...
Till here .....
import wixData from 'wix-data'; // ----------USER-INTERFACE------------------ const dbProducts = "Products"; const dbSymptoms = "Symptoms"; const REP1 = "#repeater1 "; const CHB1 = "#checkbox1"; // ----------USER-INTERFACE------------------ let symptomsCB = []; $w.onReady(async() => { //Preparing first REPEATER with data from "Symptoms"-DB first.. //...and feed repeater1 with this data... let symptomData = await loadSymptoms(dbSymptoms); console.log("Symptoms: ", symptomData); //reset of repeater... $w(REP1).data = []; //feed repeater with returned data... $w(REP1).data = symptomData; $w(REP1).onItemReady(($item, itemData, index) => { $item('#text1').text = itemData.value; $item(CHB1).onClick(async()=> {get_Symptoms();}); $item('#text1').text = itemData.value; }); }); function loadSymptoms(DB) { wixData.query(DB) .find() .then(results => { let symptomsDropdownOptions = []; symptomsDropdownOptions.push(...results.items.map(symptoms => { return { _id: symptoms._id, value: symptoms.title, label: symptoms.title }; })); return symptomsDropdownOptions; }); }
.... everything looks not bad.
You get data from SYMPTOMS-DB and feed your REPEATER1 with all the data from SYMPTOMS-DB, to generate your dynamic Check-Box-List.
Step-2: Click onto a repeated-item --> searchCB()
Part of already coded part above... --> the click to start all the process....
$item(CHB1).onClick(()=> {searchCB();});
Attention the name of the function has been changed in this example...
function get_Symptoms() { $w('#repeater1').forEachItem(($item, itemData, index) => { let text = $item('#text1').text; if ($item('#checkbox1').checked) { symptomsCB.push( {id:$item('#checkbox1').id, value:text, label:text} ); } }); }
You got all your selected SYMPTOMS from your REPEATER now!
Step-3: Click the SEARCH-Button to start the search...
!!! AND HERE IT IS ---> YOUR ERROR !!!
export function searchButton3_click(event) {---> symptomsCB = [];
First you do a lot to get all the selected values putting them into an ARRAY!!!
But when starting your --> SEARCH <--- ---> you FIRST RESET the ARRAY ???
Ok, i think you should REWRITE further CODE-PARTS (rewrite your --->
export function searchButton3_click(event) {.........
...putting it also into the onReady()-Main-Block ....
$w.onReady(async() => { // already generated code ... // code ... // code ... // code ... $w('#button1').onClick(()=>{ FUNCTION3(); }); });
Another aspect ---> If you are using a DATASET-CONNECTION --> do not for get to add...
$w.onReady(async() => { $w('#dataset1').onReady(()=>{}); // already generated code ... // code ... // code ... // code ... $w('#btnSearch').onClick(()=>{ start_SearchFunction(); }); }); });
Also use just logical element-IDs :
#button1 ----------------------------------------> BAD !!!!!
#btnSearch ------------------------------------> GOOD !!!!
Now try to get all that done and complete your task !!!!
!!! Good luck and happy coding !!!