Filtering a dataset with multiple checkboxes; is it possible to filter comma separated values in a single cell?

Ask the community
,
1

Hello everyone,

I’m working on a website for my recipes, and could really use your help. I am pretty comfortable with many of Wix’s features, but I’m brand new to coding.

My request for help revolves around the coding for several checkboxes. Each checkbox would identify an ingredient found in at least one of the recipes. When checked, the code would hide a recipe from the repeater if that particular ingredient is in that particular recipe. I’m starting with about 50 recipes for now, but will expand the list in the future.

Here’s an example of what I’m hoping for the dataset to look like (please note that this is just a simple example, not my actual recipes, haha):
• Title Row: (Cell 1) recipeName, (Cell 2) recipeIngredients
• Recipe Row 1: (Cell 1) Strawberry-Banana Smoothie, (Cell 2) Strawberry, Banana, Yogurt, Water, Ice, Spinach
• Recipe Row 2: (Cell 1) Shrimp Cocktail, (Cell 2) Shrimp, Lemon, Horseradish, Tomato, Hot Sauce
• Recipe Row 3: (Cell 1) Club Sandwich, (Cell 2) Bread, Turkey, Ham, Bacon, Lettuce, Tomato, Mayo

Here’s an example of the checkboxes:
• Strawberry
• Banana
• Yogurt
• Spinach
• Water
• Ice
• Spinach
• Shrimp
• Lemon
• Horseradish
• Tomato
• Hot Sauce
• Bread
• Turkey
• Ham
• Bacon
• Lettuce
• Tomato
• Mayo

As you can see, the list of ingredients can be very different from one recipe to another. If it’s possible, I’d really love a solution that allows me to write the recipe’s ingredients in a single cell, that is filtered by checkboxes (and it would be even better if I didn’t have to code each checkbox individually, but I’ll take anything at this point).

Any time that you can spare to assist me is greatly appreciated; thank you so much!

Brad

2

import wixData from ‘wix-data’;
function ProductFilter() {
wixData.query(“Products”)
.eq(“heels”, $w(“#checkbox1”).checked)
.or(
wixData.query(“Products”)
.eq(“boots”, $w(“#checkbox2”).checked)
)
.or(
wixData.query(“Products”)
.eq(“sneakers”, $w(“#checkbox3”).checked)
)
// add or statements for the other checkboxes
.find()
.then((results) => {
console.log(results.items);
let Product = results.items;
$w(‘#repeater1’).data = Product;
})
.catch((err) => {
let errorMsg = err;
console.log(errorMsg);
});
}
$w.onReady(function () {
​
ProductFilter();
​
$w(‘#repeater1’).onItemReady(($w, itemData) => {
// Add here all the relevant elements of the repeater
$w(‘#text1’).text = itemData.name;
$w(‘#text2’).text = itemData.description;
$w(‘#text3’).text = String(itemData.price);
$w(‘#image1’).src = itemData.image;
});
});
export function checkbox1_change(event) {
ProductFilter();
}
export function checkbox2_change(event) {
ProductFilter();
}
export function checkbox3_change(event) {
ProductFilter();
}