Hi @najmazahid, thanks for the offer, but I actually figured it out
It took many iterations through Gemini and breaking down the code bit by bit to get it to work separately first and then making it go together, but I got there in the end.
For anyone interested in a solution (of sorts), I’ll post the code below and try my best to explain it in as much detail as I can. I say of sorts, because I ended up shifting away from Booleans (see below). I realise there may be cases where you do need them to be Booleans, in which case, I’m not sure this post will help you sorry, but there may be some building blocks to start from?
To provide an update on how things changed:
Firstly, I realised it wasn’t necessary to use multiple Boolean inputs in my case, but rather use the multi-checkbox, as it won’t actually be connected to the CMS and so I can order the labels and values as I like. A note on this step: make sure the “values” you assign the checkboxes are exactly the same (case sensitive) as the “values” of the “field” in your dataset that you will link it to with the code.
Secondly, I still wanted to be able to filter the repeater across more than one multiple checkbox input, so the code does include that capability.
Thirdly, once I figured out the code for filtering the repeater using multiple checkbox inputs, I realised that this code overrode the filter (only showing items with a specific value on a specific field) and sort (alphabetically) I had applied to the dataset connected to the repeater through the panel (not coded), so I needed to add code to make this happen again.
So here is the code, with as much details shown using the //text as I can think of to include. Note: I am not an experienced coder - amateur at best - so I may not have used correct terminology along the way, but hopefully it makes sense to the average person.
Hope this helps and happy to answer any questions!
import wixData from 'wix-data';
// Note: your Collection ID may not be the same as you your Database ID. To find your Collection ID, go into "Edit Collection Settings" of your collection.
const databaseName = 'Your Collection ID'; // Your Collection ID.
const difficultyField = 'Your Field ID #1'; // Field ID you will link your first checkbox input to.
const activityField = 'Your Field ID #1'; //Field ID you will link your second checkbox input to.
//Consider changing the prefix (start) of the second and third const to better align with your FieldID name - note where you will need to change the references to them throughout the code. You can also add additional const lines if you wanted to add more inputs.
//The below code initially filters and sorts the repeater so that only items of a specific value on a specific field from the dataset are shown to users when the page loads, and the items are ordered alphabetically.
$w.onReady(() => {
const initialQuery = wixData.query(databaseName)
.eq("yourFieldName", "yourValue") //Field name and specific value you are sorting the repeater by.
.ascending("yourFieldName"); //Field name you are ordering the repeater by.
// The below code creates the on change event for when users check a box in the checkboxes.
$w('#difficultyInput').onChange((event) => {
filterItems(initialQuery);
});
$w('#activityInput').onChange((event) => {
filterItems(initialQuery);
});
// The below code performs the initial fetch without filters.
initialQuery.find()
.then((results) => {
$w('#yourRepeater').data = results.items; // Your repeater ID.
})
.catch((err) => {
console.error(err);
});
});
// The below code queries the dataset to filter the repeater.
function filterItems(initialQuery) {
const selectedDifficulty = $w('#yourInputID1').value; //The element ID of your first checkbox input.
const selectedActivities = $w('#yourInputID2').value; ////The element ID of your second checkbox input.
// Consider changing the suffix (end) of both const to better align with your element IDs - note where you need to also change the references to them throughout the code.
let query = initialQuery;
// The below code filters by the first checkbox input.
if (selectedDifficulty.length > 0) {
query = query.hasSome(difficultyField, selectedDifficulty);
}
// The below code filters by the second checkbox input, with an AND condition (meaning that if two boxes in the checkbox are ticked, it will only return results that have both those values). If you don't want the AND condition, replace '[activity]' with 'selectedActivities' - noting that if you changed this const earlier, you would replace it with that.
if (selectedActivities.length > 0) {
selectedActivities.forEach(activity => {
query = query.hasSome(activityField, [activity]);
});
}
query.find()
.then(results => {
$w('#yourRepeaterID').data = results.items; // Your repeater ID.
})
.catch(err => {
console.error('Error fetching data:', err);
});
}