How Can I create Multi Checkbox Filter similar to the Wix store prebuild filter?

Ask the community
, ,
21

So i hope you tried to study all given tips and here it comes…
I think, this is what you were looking for…

import wixData from 'wix-data';

//-------- USER-INTERFACE -------------------------------------------------
var DBFIELDS = []
var DATABASE = "Team"
var DBLIMIT = 1000
var REPEATER = "repeater1"
//-----------------------------
DBFIELDS[0] = "sprache"; //<---simple adding new TAGS-DATAFIELD here --> 1-st. CBG        
DBFIELDS[1] = "bundesland"; //<---simple adding new TAGS-DATAFIELD here --> 2-nd. CBG
//-------- USER-INTERFACE -------------------------------------------------
 
$w.onReady(()=>{
    wixData.query(DATABASE)
   .limit(DBLIMIT)
   .find()
   .then(async(results)=>{console.log(results.items);
      let ITEMS = results.items
      getUniqueCBGtitles(ITEMS, DBFIELDS[0], "CBG1"); //<--- simple adding new CBG here
      getUniqueCBGtitles(ITEMS, DBFIELDS[1], "CBG2"); //<--- simple adding new CBG here
   });

    $w('#'+REPEATER).onItemReady(async($item, itemData, index) => {
       console.log(itemData.sprache)
       $item("#imgMain").src = itemData.pic
       $item("#txtFirstname").text = itemData.vorname
       $item("#txtLastname").text = itemData.name
   });

    $w('#CBG1, #CBG2').onChange(()=>{
       populateRepeater($w('#CBG1').value, $w('#CBG2').value)
    });
    $w('#btnClear').onClick(()=> {
       $w("#CBG1, #CBG2").value = undefined; populateRepeater();
    }); 
});

function populateRepeater(selectedOption1, selectedOption2) {
 let dataQuery = wixData.query(DATABASE);
 if (selectedOption1.length>0){dataQuery = dataQuery.hasAll(DBFIELDS[0], selectedOption1);}
 if (selectedOption2.length>0){dataQuery = dataQuery.hasAll(DBFIELDS[1], selectedOption2);}
    dataQuery.find()
 .then(results => {
    const filteredItems = results.items;
    $w('#'+REPEATER).data = filteredItems;
 })
}

async function getUniqueCBGtitles(ITEMS, DBFIELD, CBG){
 let uniqueTitles = await [...new Set(getxxx(ITEMS).flat())]; $w('#'+CBG).options = buildOptions(uniqueTitles);
 function getxxx(items) {const titlesOnly=items.map(item => item[DBFIELD]); return [...new Set(titlesOnly)];}
 function buildOptions(item) {return item.map(item => {return {label:item, value:item};});}
}

An working example can be found here…
https://www.media-junkie.com/checkbox-filter

EDIT:
You will have to add a hasSome-filtering functionality if just 1 of 2 CBGs is selected.
Code some kind of a SWITCH (using if-else-queries).

If just one CBG is checked —> switch to —> “hasSome”
else —> switch to —> “hasAll”

22

Let me try this out. I havn’t had the chance to try it yet. Will do that right now and let you konw how it went. Thanks again

23

appreciate the help @russian-dima
i tested the code. it is very clean and easy to understand
but i am facing the same issue i had previously with filtering.
this is the part i don’t know how to implement

If just one CBG is checked —> switch to —> " hasSome "
else —> switch to —> " hasAll "

where would i put this code and how would i code it. Do i put it within the funcition and how would i condition it?

would it be like

if($w("#CBG1").value !== undefined && $w(#CBG2").value == undefined){
	if(selectedOption1.length>0){dataQuery = dataQuery.hasSome(DBFIELDS[0], selectedOption1);}
	if(selectedOption2.length>0){dataQuery = dataQuery.hasSome(DBFIELDS[1], selectedOption2);}     
	dataQuery.find().then(results=>{const filteredItems = results.items;$w('#'+REPEATER).data = filteredItems;
	})
}

I am aware of the condition just not sure how to code the condition and would need some pointer

sorry if the question seems really basic.

24

Just a quick note. I changed the exsiting code to hasSome instead of hasAll and it works almost the same as the store filter. Thank you again for all the help.

But if you have time, I would still like to learn from you how I would code the condition above.

If just one CBG is checked —> switch to —> " hasSome "
else —> switch to —> " hasAll "

25

@megmortalwinlive
You can simply create two or several FILTER-FUNCTIONS, which would act different.

One would act with “hasAll” depending to your IF-PART of your if-else-query.
Another would act with “hasSome”, depending to the ELSE-PART of your if-else-Query.

Than you would have 2-functions (or even more):

Function-1: —> a hasAll-Filter

function has_AllFilter() {
    //create here your filtering needs, how shoud work this filter?
}

Function-2: —> a “hasSome-Filter”

function has_AllFilter() {
    //create here your filtering needs, how shoud work this filter?
}

Function-3: —> another kind of filter"

function anotherFilter() {
    //create here your filtering needs, how shoud work this filter?
}

And then you simply let your if-else-query decide, which filter to let work for every different situation, related to the selected Values of your 2x-CBGs.