Thank you in advance for helping me out with this. I have been searching and trying out codes from examples and the forum for 2 straight weeks without success. I am looking to build the same type of product filter similar to the Wix Store filter. The reason I opt out on Wix store is due to the lack of customization for its product pages. Really appreciate any help on this. Thank you again.
Currently my filter has two checkboxGroup with 5 to 6 values in each. Each checkboxGroup is set to query value from two individual Tag fields in the same database. From one contributors example, I was able to get closer to what I need and was able to query multiple items from one checkboxGroup. But once I select a check box from the second checkboxGroup the query would only match the second checkboxGroup and disregard the first checkboxGroup
The code for that looks like this
import wixData from 'wix-data';
const databaseName = 'StoneType';
const databaseField = 'stoneCategory';
const databaseField2 = 'stoneColor';
$w.onReady(function () {
$w('#checkboxGroup1').onChange((event) => {
addItemstoRepeater($w('#checkboxGroup1').value);
});
$w('#checkboxGroup2').onChange((event) => {
addItemstoRepeater($w('#checkboxGroup2').value);
});
$w('#clearButton').onClick((event) => {
$w("#checkboxGroup1").value = undefined;
$w("#checkboxGroup2").value = undefined;
addItemstoRepeater()
});
});
//populates repeater
function addItemstoRepeater(selectedOption = []) {
let dataQuery = wixData.query(databaseName);
if (selectedOption.length > 0) {
dataQuery = dataQuery.hasSome(databaseField2, selectedOption)
.or (dataQuery.hasSome(databaseField, selectedOption));
}
dataQuery
.find()
.then(results => {
const filtereditemsReady = results.items;
$w('#repeater1').data = filtereditemsReady;
})
}
Then after checking through the forum I found Velo Ninja’s code and tried it out. I was able to get closer to what I am looking for but the filter would only allow one check box to be selected from each checkboxGroup. When more than one is selected the whole checkbox disappears. Also the onclick reset function stops working with the code.
import wixData from 'wix-data';
const databaseName = 'StoneType';
const databaseField = 'stoneCategory';
const databaseField2 = 'stoneColor';
$w.onReady(function () {
$w('#checkboxGroup1').onChange((event) => {
addItemstoRepeater();
});
$w('#checkboxGroup2').onChange((event) => {
addItemstoRepeater();
});
$w('#clearButton').onClick((event) => {
$w("#checkboxGroup1").value = undefined;
$w("#checkboxGroup2").value = undefined;
addItemstoRepeater()
});
});
function addItemstoRepeater(){
let dataQuery = wixData.query(databaseName);
let item1, item2
if ($w('#checkboxGroup1').value[0]!==undefined) {item1 = $w('#checkboxGroup1').value}
if (item1!==undefined){
for (var i=0; i < item1.length; i++) {
dataQuery = dataQuery.hasSome(databaseField, item1[i])
}
}
if ($w('#checkboxGroup2').value[0]!==undefined) {item2 = $w('#checkboxGroup2').value}
if (item2!==undefined){
for (var a=0; a < item2.length; a++) {
dataQuery = dataQuery.contains(databaseField2, item2[a])
}
}
dataQuery
.find()
.then(results => {
const filtereditemsReady = results.items;
$w('#repeater1').data = filtereditemsReady;
})
}
This is what my dataBase looks like
This is what my filter looks like
