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
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
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
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
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
