Hi guys.
I have a problem with a code for checkbox filtering a repeater. I will try to explain this as simply as I can.
My site has a database of restaurants. Each restaurant has 3 properties; City, Area, and Vibe. Further, I have 3 corresponding checkbox filters, one for each property on the site.
The problem is that when the user filter for a Vibe (let’s say Party) all the party places pop up. But when they then filter for City and e.g. check New York, all the restaurants in New York also pop up, even if they are not tagged with the “party” tag.
If New York + Party is checked, I only want the restaurants tagged New York and Party to show. Not every restaurant in each category.
To be able to filter accordingly, I wrote this code, which I got from this tutorial . Does anyone know how to solve this?
import wixData from 'wix-data';
$w.onReady(function () {
});
export function cityGroup_change(event) {
filterPlaces()
}
export function areaGroup_change(event) {
filterPlaces()
}
export function vibeGroup_change(event) {
filterPlaces()
}
export function filterPlaces() {
let area = []
let city = []
let vibe = []
let cityOptions = $w("#cityGroup").selectedIndices
let areaOptions = $w('#areaGroup').selectedIndices
let vibeOptions = $w('#vibeGroup').selectedIndices
if (areaOptions.length > 0 || cityOptions.length > 0 || vibeOptions.length > 0) {
for (var i = 0; i < areaOptions.length; i++) {
area.push($w('#areaGroup').options[areaOptions[i]].value);
}
for (var i = 0; i < vibeOptions.length; i++) {
vibe.push($w('#vibeGroup').options[vibeOptions[i]].value);
}
for (var i = 0; i < cityOptions.length; i++) {
city.push($w('#cityGroup').options[cityOptions[i]].value);
}
if (city.length > 0 && area.length > 0 && vibe.length > 0) {
$w("#dataset1").setFilter(wixData.filter()
.hasSome("area", area)
.and(wixData.filter()
.hasSome("city", city))
.and(wixData.filter()
.hasSome("bestfor", vibe))
);
} else {
$w("#dataset1").setFilter(wixData.filter()
.hasSome("area", area)
.or(wixData.filter()
.hasSome("city", city))
.or(wixData.filter()
.hasSome("bestfor", vibe))
);
}
} else {
$w("#dataset1").setFilter(wixData.filter());
}
}
Thanks in advance!
Hmm, looking at the example, and it seems like that issue comes up when you have 3 or more kinds of filers active at once.
The API Docs have an example for utilizing multiple search filters. That might be able to work better for this particular filter.
Thanks for the reply Ryan.
I managed to find a solution to the problem, from this forum thread. I basically just used his lines of code (which were pretty similar to my original code) in the last post.
Below is the code if anyone needs it
Now I just need a reset button that clears the filters, any tips here? I think I know the lines of code, but not sure where in the code to put them
import wixData from 'wix-data';
$w.onReady(function () {
});
//Restaurant filter
export function filterPlaces(){
let city = [];
let area = [];
let vibe = [];
let sunshine = [];
// Get the indexes of all the checkboxes checked in that group
let cityOptions = $w("#cityGroup").selectedIndices
let areaOptions = $w('#areaGroup').selectedIndices
let vibeOptions = $w('#vibeGroup').selectedIndices
let sunshineOptions = $w('#sunshineGroup').selectedIndices
let filter = wixData.filter();
// Next, loop through the checked items and add each field to the array and apply filter
if (cityOptions.length > 0){
for (var i = 0; i < cityOptions.length; i++) {
city.push($w('#cityGroup').options[cityOptions[i]].value);
}
}
if (city.length > 0) {
filter = filter.hasSome("city", city); //The "city" is a reference to the FiledKey in the database
}
if (areaOptions.length > 0){
for (var i2 = 0; i2 < areaOptions.length; i2++) {
area.push($w('#areaGroup').options[areaOptions[i2]].value);
}
}
if (area.length > 0) {
filter = filter.hasSome("area", area);
}
if (vibeOptions.length > 0){
for (var i3 = 0; i3 < vibeOptions.length; i3++) {
vibe.push($w('#vibeGroup').options[vibeOptions[i3]].value);
}
}
if (vibe.length > 0) {
filter = filter.hasSome("bestfor", vibe);
}
if (sunshineOptions.length > 0){
for (var i4 = 0; i4 < sunshineOptions.length; i4++) {
sunshine.push($w('#sunshineGroup').options[sunshineOptions[i4]].value);
}
}
if (sunshine.length > 0) {
filter = filter.hasSome("sunshine", sunshine);
}
$w("#dataset1").setFilter(filter)
.then(() => {
console.log("count after", $w("#dataset1").getTotalCount());
})
.catch((err) => {
console.log(err);
});
}
// Filter each time you click a check box in a group
export function cityGroup_change (event) {
filterPlaces();
}
export function areaGroup_change(event) {
filterPlaces();
}
export function vibeGroup_change(event) {
filterPlaces();
}
export function sunshineGroup_change_1(event) {
filterPlaces();
}
export function button4_click(event) {
filterPlaces()
}
I actually solved the Reset Button also, if it may help anyone here’s the full code with the reset button:
import wixData from 'wix-data';
$w.onReady(function () {
});
//Restaurant filter
export function filterPlaces(){
let city = [];
let area = [];
let vibe = [];
let sunshine = [];
// Get the indexes of all the checkboxes checked in that group
let cityOptions = $w("#cityGroup").selectedIndices
let areaOptions = $w('#areaGroup').selectedIndices
let vibeOptions = $w('#vibeGroup').selectedIndices
let sunshineOptions = $w('#sunshineGroup').selectedIndices
let filter = wixData.filter();
// Next, loop through the checked items and add each field to the array and apply filter
if (cityOptions.length > 0){
for (var i = 0; i < cityOptions.length; i++) {
city.push($w('#cityGroup').options[cityOptions[i]].value);
}
}
if (city.length > 0) {
filter = filter.hasSome("city", city); //The "city" is a reference to the FiledKey in the database
}
if (areaOptions.length > 0){
for (var i2 = 0; i2 < areaOptions.length; i2++) {
area.push($w('#areaGroup').options[areaOptions[i2]].value);
}
}
if (area.length > 0) {
filter = filter.hasSome("area", area);
}
if (vibeOptions.length > 0){
for (var i3 = 0; i3 < vibeOptions.length; i3++) {
vibe.push($w('#vibeGroup').options[vibeOptions[i3]].value);
}
}
if (vibe.length > 0) {
filter = filter.hasSome("bestfor", vibe);
}
if (sunshineOptions.length > 0){
for (var i4 = 0; i4 < sunshineOptions.length; i4++) {
sunshine.push($w('#sunshineGroup').options[sunshineOptions[i4]].value);
}
}
if (sunshine.length > 0) {
filter = filter.hasSome("sunshine", sunshine);
}
$w("#dataset1").setFilter(filter)
.then(() => {
console.log("count after", $w("#dataset1").getTotalCount());
})
.catch((err) => {
console.log(err);
});
$w('#resetButton').onClick(function () {
$w('#cityGroup').value = undefined
$w('#areaGroup').value = undefined
$w('#vibeGroup').value = undefined
$w('#sunshineGroup').value = undefined
$w('#dataset1').setFilter(wixData.filter())
});
}
// Filter each time you click a check box in a group
export function cityGroup_change (event) {
filterPlaces();
}
export function areaGroup_change(event) {
filterPlaces();
}
export function vibeGroup_change(event) {
filterPlaces();
}
export function sunshineGroup_change_1(event) {
filterPlaces();
}
1 Like