USING TOGGLE SWITCHES TO FILTER REPEATER ITEM RESULTS

I am creating an online store for a coffee bean company. There are FOUR filters I am using to conditionally display products in the repeater. In the content manager, each product has been assigned an array of the filters it includes. For example, the “vanilla medium roast whole bean” product would be assigned:
[
“Medium Roast”,
“Whole Bean”
]

Each of the four filters has its own toggle switch (see below)

The goal is to have all items automatically populate in the repeater. As a user narrows down their choices, they can turn the switch off/on and add/remove the items within that specific array to the repeater. (I.E. maybe I would like to see medium roast options, but i do not want to see whole bean.)

My code at the moment is a mess and probably makes no sense because I am slowly losing my mind trying to figure out my issue. I will attach the code snippet I have so far… THANKS IN ADVANCE


import wixData from ‘wix-data’ ;
const databaseName = ‘FilteredProducts’ ;
const databaseField = ‘tags’ ;

$w . onReady ( function () {
//whole bean
$w ( ‘#WholeBean’ ). onChange (( event ) => {
if ( $w ( ‘#WholeBean’ ). checked ) {
addWholeBeanItems ();
} else {
removeWholeBeanItems ();
}
})
//medium roast
$w ( ‘#MediumRoast’ ). onChange (( event ) => {
if ( $w ( ‘#MediumRoast’ ). checked ) {
addMediumRoastItems ();
} else {
removeMediumRoastItems ();
}
})
});

//whole bean
function addWholeBeanItems ( ) {
wixData . query ( databaseName )
. eq ( databaseField , “Whole Bean” )
. find ()
. then ( ( results ) => {
if ( results . items . length > 1 ) {
let FilteredItems = results . items ;
console . log ( FilteredItems );
$w ( ‘#repeater1’ ). data = FilteredItems ;}
})}

function removeWholeBeanItems ( ) {
wixData . query ( databaseName )
. eq ( databaseField , “Whole Bean” )
. find ()
. then ( ( Removeresults ) => {
if ( Removeresults . items . length > 1 ) {
let RemoveItems = Removeresults . items ;
console . log ( RemoveItems );
$w ( “#repeater1” ). data =;
}
})}

//Medium Roast
function addMediumRoastItems ( ) {
wixData . query ( databaseName )
. eq ( databaseField , “Medium Roast” )
. find ()
. then ( ( results ) => {
if ( results . items . length > 1 ) {
let FilteredItems = results . items ;
console . log ( FilteredItems );
$w ( ‘#repeater1’ ). data = FilteredItems ;
}
})}

function removeMediumRoastItems ( ) {
wixData . query ( databaseName )
. eq ( databaseField , “Medium Roast” )
. find ()
. then ( ( RemoveMediumresults ) => {
if ( RemoveMediumresults . items . length > 1 ) {
let RemoveMediumItems = RemoveMediumresults . items ;
console . log ( RemoveMediumItems );
$w ( “#repeater1” ). data =;
}
})}

Hello. So my first thought looking at this is you will have to build on the query in reaction to the user inputs instead of calling a query with each toggle. By resetting the query each time instead of building the query (vanilla + whole bean) you will override your results (vanilla then whole bean)

So you will need to first have one query that returns results based on all current filters and updates each time the user changes something. Let me know if you need more information to work on that. Once you are consistently getting the data results back as expected, then you can hook up the repeaters so the UI shows as expected too

Thank you very much for the prompt reply! I will try and play with it in the console later & hopefully figure it out. If not, I may be pestering you with questions lol.