Filter Gallery by Checkbox

Ask the community
,
1

Hi Guys,

So I’ve been working on creating a new website with a section that shows all entertainment acts via a Pro Gallery. As you will see via the link below I have then created a search function and a row of dropdown menus such as price range and act type which then filters associated acts in my ‘Artists’ database and refreshes the gallery according to the criteria selected via the dropdown menus.

website link:
https://owen0106.wixsite.com/website-9

I’m now looking to add one final layer of filtering via a collapsable checkbox list ‘genre’ but I am struggling to get this working at all. Component-wise, it is all there, but I haven’t been able to get it filtering the artists ‘pro gallery’ in the same way as the other dropdown menus.

Any help would be greatly appreciated as this is the last hurdle I need to overcome to get everything i need from this website and be able to take it live.

Best wishes,
Owen

2

Have you seen this tutorial already as this could work for you.
https://www.wix.com/corvid/example/checkbox-dropdown

3

Hi GOS,

Yea I saw this a thought this might have been the answer I was looking for, even though it means creating a second database just for my genre ‘categories’ but this didn’t seem to work either and possibly even clashed with the code I already have in place to filter using the other dropdowns I already have in place.

I’ve attached a snippet of the code I’ve been applying to my dropdowns with a change in state triggering the filtering across on dropdowns and then showing the results in the gallery. Is there a line of code I can add to then include the ‘checked’ boxes from my latest dropdown?

// Category Dropdown

$w.onReady(function () {
//TODO: write your page related code here...
});
export function iCategories_change(event, $w){
$w("#dataset1").setFilter(wixData.filter()
.contains("category", $w('#iCategories').value)
.contains("eventType", $w('#iEventType').value)
.contains('tags', $w('#iSearch').value)
.ge("costs",parseFloat($w('#iPriceFrom').value))
.le("costs",parseFloat($w('#iPriceTo').value)))

.then((results) => {
console.log("Dataset is now Filtered");
$w("#gallery1").data = results.items;
})
.catch((err) => {
console.log(err);
});
$w("#gallery1").expand();
}

Appreciate any ideas.

Thanks,
Owen