Filtering a Filtered Result?

Discussion Ask a question
,
1

I have a dynamic gallery with a dataset showing the entire collection of images. I’d like to apply multiple filters to via checkboxes.

From this post (https://www.wix.com/code/home/forum/questions-answers/filter-collection-by-multiple-fields)

I know that I can do OR statements, but how do I chain several of these together?

Here is a screenshot of the page I’m working on. Each title is a field name in my collection, and each check box are the values in those fields.

My rudimentary attempt was to use IF statements for checked or unchecked states, then “add” onto the filter. Please take a look, any help would be appreciated.

import wixData from ‘wix-data’;
var kwFilter;
export function applyFilterButton_click(event, $w) {

if($w("#kwCheckbox").checked){ 
	console.log("kwchecked"); 
	 kwFilter = wixData.filter().contains("collection", "kenneth"); 
} else { 
	console.log("kwNotchecked"); 
	 kwFilter = wixData.filter().not(wixData.filter().contains("collection", "kenneth")); 
} 
if($w("#erCheckbox").checked){ 
	console.log("erchecked"); 
	 kwFilter = kwFilter.contains("collection", "ella"); 
} else { 
	console.log("erNotchecked"); 
	 kwFilter = kwFilter.not(wixData.filter().contains("collection", "ella")); 
} 
if($w("#gaCheckbox").checked){ 
	console.log("gachecked"); 
	 kwFilter = kwFilter.contains("collection", "gallery"); 
} else { 
	console.log("gaNotchecked"); 
	 kwFilter = kwFilter.not(wixData.filter().contains("collection", "gallery")); 
} 
if($w("#fmCheckbox").checked){ 
	console.log("fmchecked"); 
	 kwFilter = kwFilter.contains("collection", "femme"); 
} else { 
	console.log("fmNotchecked"); 
	 kwFilter = kwFilter.not(wixData.filter().contains("collection", "femme")); 
} 
	
$w("#dynamicDataset").setFilter(kwFilter);

}

1015×494 53.2 KB

2

For anyone wondering, I got this all sorted out very neatly.

The trick is to not use the OR or NOT statements in your query. You can’t chain those together to create a “complex” user selected query like you see in the image I originally posted.

If a product attribute column is never empty, as in it must have an attribute, use hasSome. hasSome takes an array, so all you have to do is create an empty array, use logic to see if the checkbox is checked, and if it is, push it into the array. Here’s an example:

superquery = wixData.query(“DatabaseName”);
var silhouetteFilter = [];
if( $w(“#ballgown”).checked ) {silhouetteFilter.push(‘Ballgown’);}
if( $w(“#aline”).checked ) {silhouetteFilter.push(‘A-Line’);}
if( $w(“#mermaid”).checked ) {silhouetteFilter.push(‘Mermaid’);}
if( $w(“#sheath”).checked ) {silhouetteFilter.push(‘Sheath’);}
if (silhouetteFilter.length > 0) {superQuery = superQuery.hasSome(“silhouette”, silhouetteFilter);}

(KEY NOTE: hasSome is an EXACT comparison, so make sure you push in the exact result you wish to query)

If a product attribute column is a simple Yes or No, just use .contains(“attribute”, “Yes”); or something along those lines.

So in short, you just keep doing that for each attribute you’re trying to query. If you look at the query API, you’ll see that you can just keep adding on search parameters to it, so all you need to do is superQuery = superQuery.hasSome(“attribute”, attributeArray). You just keep stacking it on. My problems came from using the OR or NOT statements, because you can’t keep stacking those on. Its “easier” to just use if/else statements or Switch Cases to do the logic then add them to the query.

When its all said and done, you just do the normal query.find() and thats it. The query results were used to fill up a gallery. I recommend using Wix Pro galleries since there’s no actual limit to how many results it will load. Just remember the default is 50 if you don’t set a limit beyond that.

3 Likes
3

hello ken ,
Can You Please Share your Code .I am Also Working on same kind of problem.

4

Hi Ken,

Any chance you can help me out with my coding? I am working on the same thing but cannot get my coding to load on the preview page… Do you have an email??

Thank you for your help so far!!

5

The reason I haven’t posted any code is because a lot of the data/information there is protected under an agreement I have with my client. If you have any questions about specific parts of your code, I can help the best I can.

6

Hi Ken,

Thanks so much.

I have attached an image of what my page looks like.

809×400 193 KB

Originally, each of the categories were buttons, where I managed to create the following code to sort the items from price high-low or low-high.

import wixData from ‘wix-data’;

$w.onReady( function() {
$w(“#button23”).onClick( (event, $w) => {
$w(“#dataset1”).setSort( wixData.sort()
.descending(“price”) );
} );

$w(“#button22”).onClick( (event, $w) => {
$w(“#dataset1”).setSort( wixData.sort()
.ascending(“price”) );
} );
} );

However, I tried to amend this to use with the checkboxes and there are errors.

import wixData from ‘wix-data’;

$w.onChange( function() {
$w(“#checkbox17”).checked() (event, $w) => {
$w(“#dataset1”).setSort( wixData.sort()
.descending(“price”) );
} );

$w(“#checkbox16”).checked( (event, $w) => {
$w(“#dataset1”).setSort( wixData.sort()
.ascending(“price”) );
} );
} );

I would ultimately like to be able to filter my gallery - #gallery1 (linked to my dataset) as you click and unclick the checkboxes.

Any help will be much appreciated!

Thanks,

Helen

7

Maybe involving “on change” to trigger both changing the value and mimic a search button click to update the results will work, try with one and replicate for other check boxes, good luck.