topic Filter Sidebar in CMS Development

Filter Sidebar

MaximSiebert — Thu, 18 Apr 2019 17:47:54 GMT

I'm looking to create a filter sidebar for my field group items - similar to done on this page https://www.blueprintsys.com/resources. I have the items listed on this page https://www.ada.support/learning-centre. I've added a 'choice' field to my field group so that for each item I can pick if it's an ebook/webinar/etc. Now I'm looking to create the filter sidebar.

My first instinct is to create a text repeater field which I would add all the types from the field group choice field to, then using jquery/css to hide and show items based on which text repeater item is selected.

This feels very hacky and I was wondering if there's a better way to achieve this.

Thanks in advance!

Re: Filter Sidebar

cbarley — Tue, 30 Apr 2019 18:01:54 GMT

Hi @MaximSiebert , do you have access to HubDB? If so, I'd say this would be quite easy to set up without the browser having to render all items, and hide them with CSS.

This article (https://designers.hubspot.com/docs/tutorials/how-to-build-a-real-estate-listing-with-hubdb) has a really great example of filtering capabilities with HubDB.

Your CSS/Jquery solution is definitely okay too, as long as the number of items doesn't get too large, and you don't have to render out a ton of things to the DOM initially

Re: Filter Sidebar

Adesignl — Wed, 01 May 2019 17:45:21 GMT

The way you are filtering by type could be used top filter by category as well. You would jiust have to check against both at the same time.

This is a great and fast way to do it if there is not to many items. but if you have a larger selection it is better to use ajax.

Here is a doc with the javascript connectors info.

https://docs.google.com/document/d/e/2PACX-1vTuu12oFF4bQY1zVD2-WKFuM2dEDN81-fZRV1tGaCL5Z_OcjC-B6O3mHXR6chaq25BU1D2FuvKIjc49/pub

Re: Filter Sidebar

MaximSiebert — Tue, 07 May 2019 13:35:52 GMT

I ended up going with my CSS/jQuery solution for now, but I do agree - once the number of items gets a little too large I'll have to look into the HubDB solution you shared!