#Repeater #Input #Dataset #Filter #Dropdown #Example #Checkbox #setFilter
Hello !! I’ve recently started working with wixcode. Currently I’m having a problem with implementing chekbox dropdowns for filtering a database. I’ve implemented the example :
https://www.wix.com/code/home/forum/wix-tips-and-updates/example-checkbox-dropdown by @yisrael-wix
but instead of using a search bar I’m using 2 checkbox dropdowns and the problem is they work individually to filter the content but they don’t work together. One is based on location and one is based on categories. like city1 and city2 and activity categories in the cities but when I select a city and category the filters don’t work together so the content is not filtered properly. How can I fix that ? Right now I’m using 2 different filter functions to make them work individually but I have to combine them to make them work together and I don’t know how to do that. In the future I want to add more filters.
My site is arcticcircleinfo.fi/activities ,the content is still in progress but I’m working on the code. and one more small problem is when no checkbox is selected, my whole content disappears, I want all of it to show when nothing is selected. How do I do that ?
Any help would be appreciated !! And sorry in advance for the long post …
Here is a screenshot of the website:
Here is my code: (highlighted part is the filters)
var containsAll = function containsAll(arr1, arr2) {
return arr2.every(function (arr2Item) {
return arr1.includes(arr2Item);
});
};
var sameMembers = function sameMembers(arr1, arr2) {
return containsAll(arr1, arr2) && containsAll(arr2, arr1);
};
var compareArrays = function compareArrays(arr1, arr2) {
if (!Array.isArray(arr1) || !Array.isArray(arr2) || arr1.lenght !== arr2.lenght) return false;
return sameMembers(arr1, arr2);
};
var lastFilterLocations = ;
var lastFilterTitle = void 0;
var lastFilterCategories = ;
$w.onReady(function () {
$w(“#categories”).onItemReady(function ($item, itemData, index) {
var text1 = $item(“#optionText”);
text1.text = itemData.value;
});
loadCategories();
});
$w.onReady(function () {
$w(“#locations”).onItemReady(function ($item, itemData, index) {
var text1 = $item(“#optionText2”);
text1.text = itemData.value;
});
loadLocations();
});
function loadCategories() {
_wixData2.default.query(‘Categories’).find().then(function (res) {
$w(“#categories”).data = ;
$w(“#categories”).collapse();
var options = ;
var id = 0;
options.push.apply(options, _toConsumableArray(res.items.map(function (category) {
return { “_id”: “” + ++id, “value”: category.title, “label”: category.title };
})));
$w(‘#categories’).data = options;
});
}
function loadLocations() {
_wixData2.default.query(‘Locations’).find().then(function (res) {
$w(“#locations”).data = ;
$w(“#locations”).collapse();
var options = ;
var id = 0;
options.push.apply(options, _toConsumableArray(res.items.map(function (location) {
return { “_id”: “” + ++id, “value”: location.title, “label”: location.title };
})));
$w(‘#locations’).data = options;
});
}
function new_filter(title, category) {
var res = compareArrays(category, lastFilterCategories);
if (lastFilterTitle !== title || !res) {
var newFilter = _wixData2.default.filter();
if (title) newFilter = newFilter.contains(‘title’, title);
newFilter = newFilter.hasSome(‘category’, category);
$w(‘#dataset1’).setFilter(newFilter).then(function () {
var count = $w(“#dataset1”).getTotalCount();
});
lastFilterTitle = title;
lastFilterCategories = category;
}
}
function filtertwo(title, location) {
var res = compareArrays(location, lastFilterLocations);
if (lastFilterTitle !== title || !res) {
var newFilter = _wixData2.default.filter();
if (title) newFilter = newFilter.contains(‘title’, title);
newFilter = newFilter.hasSome(‘location’, location);
$w(‘#dataset1’).setFilter(newFilter).then(function () {
var count = $w(“#dataset1”).getTotalCount();
});
lastFilterTitle = title;
lastFilterLocations = location;
}
}
function categoryBox_click(event) {
if ($w(‘#categories’).collapsed === true) {
$w(“#categories”).expand();
} else {
$w(“#categories”).collapse();
var arrCategories = ;
$w(“#categories”).forEachItem(function ($item, itemData, index) {
if ($item(‘#optionCheckbox’).checked) {}
});
new_filter(lastFilterTitle, arrCategories);
$w(‘#numCategoriesText’).text = arrCategories.length + " category" + " selected";
}
}
function optionCheckbox_change(event) {
// Added to make changes happen when you check or uncheck a continent
var arrCategories = ;
$w(“#categories”).forEachItem(function ($item, itemData, index) {
if ($item(‘#optionCheckbox’).checked) {
var text = $item(“#optionText”).text;
arrCategories.push(text);
}
});
new_filter(lastFilterTitle, arrCategories);
$w(‘#numCategoriesText’).text = arrCategories.length + " category" + " selected";
}
function locationBox_click(event) {
if ($w(‘#locations’).collapsed === true) {
$w(“#locations”).expand();
} else {
$w(“#locations”).collapse();
var arrLocations = ;
$w(“#locations”).forEachItem(function ($item, itemData, index) {
if ($item(‘#optionCheckbox2’).checked) {}
});
filtertwo(lastFilterTitle, arrLocations);
$w(‘#numLocationText’).text = arrLocations.length + " location" + (arrLocations.length > 1 ? "s " : " ") + “selected”;
}
}
function optionCheckbox2_change(event) {
// Added to make changes happen when you check or uncheck a continent
var arrLocations = ;
$w(“#locations”).forEachItem(function ($item, itemData, index) {
if ($item(‘#optionCheckbox2’).checked) {
var text = $item(“#optionText2”).text;
arrLocations.push(text);
}
});
filtertwo(lastFilterTitle, arrLocations);
$w(‘#numLocationText’).text = arrLocations.length + " location" + (arrLocations.length > 1 ? "s " : " ") + “selected”;
}