Hi,
I’m building a recipes website, and I’ve created a repeater which shows all recipes (from a database), and can be sorted and filtered with a number of user inputs, such as: search, slider and multiple check drop downs. In addition I’ve created a ‘Clear filters’ button, to make it easy for the user to clear all filters at once.
Now, all filters including the button works well - so far so good.
The problem is that all filters works separately and I need them to work together - with an ‘and’ condition between them - and I just don’t know how to do that.
For example, If I type in the the search bar : ‘cakes’, and then I choose from the Diet drop down ‘vegan’ option - I want the repeater to return only vegan cakes. Currently, it would just return all vegan recipes on the website, even if they’re not cakes. that means that all it currently does is returning the results of the last filter input, without considering the input in the filters before.
My website url is: https://morgilady.wixsite.com/thefitfatty/recipes-2
And here is my code:
// For full API documentation, including code examples, visit Velo API Reference - Wix.com
// For full API documentation, including code examples, visit Velo API Reference - Wix.com
import wixData from ‘wix-data’;
let debounceTimer;
export function searchbar_keyPress_1(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w("#searchbar").value, lastFilterCourseTitle, lastFilterCourse);
}, 500);
}
let lastFilterSearch;
function filter(search) {
if (lastFilterSearch !== search) {
$w("#dataset1").setFilter(wixData.filter().contains('title', search));
lastFilterSearch = search;
}
}
export function slider1_change(event) {
let calories = $w(“#slider1”).value
$w("#dataset1").setFilter(wixData.filter()
.le('calories', calories)
)
}
export function sorting_change(event) {
if (event.target.value === “Newest”) {
$w(“#dataset1”).setSort(wixData.sort()
.descending("_createdDate")
);
}
if (event.target.value === “Most Popular”) {
$w(“#dataset1”).setSort(wixData.sort()
.descending("popularity")
);
}
if (event.target.value === “Calories: Low to High”) {
$w(“#dataset1”).setSort(wixData.sort()
.ascending("calories")
);
}
if (event.target.value === “Calories: High to Low”) {
$w(“#dataset1”).setSort(wixData.sort()
.descending("calories")
);
}
}
// code to compare string arrays
// used to compare the current and previous course selections
const containsAll = (arr1, arr2) =>
arr2.every(arr2Item => arr1.includes(arr2Item))
const sameMembers = (arr1, arr2) =>
containsAll(arr1, arr2) && containsAll(arr2, arr1);
const compareArrays = (arr1, arr2) => {
if (!Array.isArray(arr1) || !Array.isArray(arr2) || (arr1.length !== arr2.length))
return false ;
return sameMembers(arr1, arr2);
}
let lastFilterCourseTitle;
let lastFilterCourse = ;
$w.onReady(() => {
// handle each suggestion repeater item
$w(“#courses”).onItemReady(($item, itemData, index) => {
const text1 = $item(“#optionText1”);
text1.text = itemData.value;
});
loadCourses();
});
function loadCourses() {
wixData.query(‘Courses’)
.find()
.then(res => {
$w(“#courses”).data = ;
$w(“#courses”).collapse();
let options = ;
let id = 0;
options.push(…res.items.map(courses => {
return { “_id”: “” + ++id, “value”: courses.title, “label”: courses.title };
}));
$w(‘#courses’).data = options;
});
}
export function courseBox_click_1(event) {
if ($w(‘#courses’).collapsed === true ) {
$w(“#courses”).expand();
} else {
$w(“#courses”).collapse();
let arrCourses = ;
$w(“#courses”).forEachItem(($item, itemData, index) => {
if ($item(‘#optionCheckbox1’).checked) {
let text1 = $item(“#optionText2”).text;
let text = $item(“#optionText1”).text;
arrCourses.push(text);
}
});
new_filter1(lastFilterCourseTitle, arrCourses);
$w('#numCourseText').text = arrCourses.length + " courses";
}
}
function new_filter1(title, course) {
let res = compareArrays(course, lastFilterCourse);
if (lastFilterCourseTitle !== title || !res) {
let newFilter1 = wixData.filter();
if (title)
newFilter1 = newFilter1.contains(‘title’, title);
newFilter1 = newFilter1.hasSome(‘course’, course);
$w(‘#dataset1’).setFilter(newFilter1).then( function () {
let count = $w(“#dataset1”).getTotalCount();
});
lastFilterCourseTitle = title;
lastFilterCourse = course;
}
}
let lastFilterIngredientTitle;
let lastFilterIngredient = ;
$w.onReady(() => {
// handle each suggestion repeater item
$w(“#ingredients”).onItemReady(($item, itemData, index) => {
const text2 = $item(“#optionText2”);
text2.text = itemData.value;
});
loadIngredients();
});
function loadIngredients() {
wixData.query(‘Ingredients’)
.find()
.then(res => {
$w(“#ingredients”).data = ;
$w(“#ingredients”).collapse();
let options = ;
let id = 0;
options.push(…res.items.map(ingredients => {
return { “_id”: “” + ++id, “value”: ingredients.title, “label”: ingredients.title };
}));
$w(‘#ingredients’).data = options;
});
}
export function ingredientBox_click(event) {
if ($w(‘#ingredients’).collapsed === true ) {
$w(“#ingredients”).expand();
} else {
$w(“#ingredients”).collapse();
let arrIngredients = ;
$w(“#ingredients”).forEachItem(($item, itemData, index) => {
if ($item(‘#optionCheckbox2’).checked) {
let text = $item(“#optionText2”).text;
arrIngredients.push(text);
}
});
new_filter2(lastFilterIngredientTitle, arrIngredients);
$w(‘#numIngredientText’).text = arrIngredients.length + " ingredients";
}
}
function new_filter2(title, ingredient) {
let res = compareArrays(ingredient, lastFilterIngredient);
if (lastFilterIngredientTitle !== title || !res) {
let newFilter2 = wixData.filter();
if (title)
newFilter2 = newFilter2.contains(‘title’, title);
newFilter2 = newFilter2.hasSome('ingredient', ingredient);
$w('#dataset1').setFilter(newFilter2).then( function () {
let count = $w(“#dataset1”).getTotalCount();
});
lastFilterIngredientTitle = title;
lastFilterIngredient = ingredient;
}
}
let lastFilterCategoryTitle;
let lastFilterCategory = ;
$w.onReady(() => {
// handle each suggestion repeater item
$w(“#categories”).onItemReady(($item, itemData, index) => {
const text3 = $item(“#optionText3”);
text3.text = itemData.value;
});
loadCategory();
});
function loadCategory() {
wixData.query(‘Category’)
.find()
.then(res => {
$w(“#categories”).data = ;
$w(“#categories”).collapse();
let options = ;
let id = 0;
options.push(…res.items.map(category => {
return { “_id”: “” + ++id, “value”: category.title, “label”: category.title };
}));
$w('#categories').data = options;
});
}
export function categoryBox_click(event) {
if ($w(‘#categories’).collapsed === true ) {
$w(“#categories”).expand();
} else {
$w(“#categories”).collapse();
let arrCategory = ;
$w(“#categories”).forEachItem(($item, itemData, index) => {
if ($item(‘#optionCheckbox3’).checked) {
let text = $item(“#optionText3”).text;
arrCategory.push(text);
}
});
new_filter3(lastFilterCategoryTitle, arrCategory);
$w(‘#numCategoryText’).text = arrCategory.length + " categories";
}
}
function new_filter3(title, category) {
let res = compareArrays(category, lastFilterCategory);
if (lastFilterCategoryTitle !== title || !res) {
let newFilter3 = wixData.filter();
if (title)
newFilter3 = newFilter3.contains(‘title’, title);
newFilter3 = newFilter3.hasSome('category', category);
$w('#dataset1').setFilter(newFilter3).then( function () {
let count = $w(“#dataset1”).getTotalCount();
});
lastFilterCategoryTitle = title;
lastFilterCategory = category;
}
}
let lastFilterCuisineTitle;
let lastFilterCuisine = ;
$w.onReady(() => {
// handle each suggestion repeater item
$w(“#cuisines”).onItemReady(($item, itemData, index) => {
const text4 = $item(“#optionText4”);
text4.text = itemData.value;
});
loadCuisine();
});
function loadCuisine() {
wixData.query(‘Cuisine’)
.find()
.then(res => {
$w(“#cuisines”).data = ;
$w(“#cuisines”).collapse();
let options = ;
let id = 0;
options.push(…res.items.map(cuisine => {
return { “_id”: “” + ++id, “value”: cuisine.title, “label”: cuisine.title };
}));
$w(‘#cuisines’).data = options;
});
}
export function cuisineBox_click(event) {
if ($w(‘#cuisines’).collapsed === true ) {
$w(“#cuisines”).expand();
} else {
$w(“#cuisines”).collapse();
let arrCuisine = ;
$w(“#cuisines”).forEachItem(($item, itemData, index) => {
if ($item(‘#optionCheckbox4’).checked) {
let text = $item(“#optionText4”).text;
arrCuisine.push(text);
}
});
new_filter4(lastFilterCuisineTitle, arrCuisine);
$w(‘#numCuisineText’).text = arrCuisine.length + " cuisines";
}
}
function new_filter4(title, cuisine) {
let res = compareArrays(cuisine, lastFilterCuisine);
if (lastFilterCuisineTitle !== title || !res) {
let newFilter4 = wixData.filter();
if (title)
newFilter4 = newFilter4.contains(‘title’, title);
newFilter4 = newFilter4.hasSome('cuisine', cuisine);
$w('#dataset1').setFilter(newFilter4).then( function () {
let count = $w(“#dataset1”).getTotalCount();
});
lastFilterCuisineTitle = title;
lastFilterCuisine = cuisine;
}
}
let lastFilterDietTitle;
let lastFilterDiet = ;
$w.onReady(() => {
// handle each suggestion repeater item
$w(“#diets”).onItemReady(($item, itemData, index) => {
const text5 = $item(“#optionText5”);
text5.text = itemData.value;
});
loadDiet();
});
function loadDiet() {
wixData.query(‘Diet’)
.find()
.then(res => {
$w(“#diets”).data = ;
$w(“#diets”).collapse();
let options = ;
let id = 0;
options.push(…res.items.map(diet => {
return { “_id”: “” + ++id, “value”: diet.title, “label”: diet.tag };
}));
$w(‘#diets’).data = options;
});
}
export function dietBox_click(event) {
if ($w(‘#diets’).collapsed === true ) {
$w(“#diets”).expand();
} else {
$w(“#diets”).collapse();
let arrDiet = ;
$w(“#diets”).forEachItem(($item, itemData, index) => {
if ($item(‘#optionCheckbox5’).checked) {
let text = $item(“#optionText5”).text;
arrDiet.push(text);
}
});
new_filter5(lastFilterDietTitle, arrDiet);
$w(‘#numDietText’).text = arrDiet.length + " diets";
}
}
function new_filter5(title, diet) {
let res = compareArrays(diet, lastFilterDiet);
if (lastFilterDietTitle !== title || !res) {
let newFilter5 = wixData.filter();
if (title)
newFilter5 = newFilter5.contains(‘title’, title);
newFilter5 = newFilter5.hasAll('diet', diet);
$w('#dataset1').setFilter(newFilter5).then( function () {
let count = $w(“#dataset1”).getTotalCount();
});
lastFilterDietTitle = title;
lastFilterDiet = diet;
}
}
export function resetbutton_click_1(event, $w) {
$w("#searchbar").value = undefined;
$w("#slider1").value = 0;
$w("#sorting").value = undefined;
$w("#numCourseText").text = "Course";
$w("#optionCheckbox1").checked = undefined;
$w("#numIngredientText").text = "Ingredient";
$w("#optionCheckbox2").checked = undefined;
$w("#numCategoryText").text = "Category";
$w("#optionCheckbox3").checked = undefined;
$w("#numCuisineText").text = "Cuisine";
$w("#optionCheckbox4").checked = undefined;
$w("#numDietText").text = "Diet";
$w("#optionCheckbox5").checked = undefined;
$w("#dataset1").setFilter(wixData.filter());
}
@yisrael-wix @yoav-wix @noamca @amit-wix
I’ll be extremely thankful for any help with that, I really need to solve that issue ASAP
Thanks!