Filterable product list / gallery

I Need Help
1

I am making a product list of say, 20 products, and I would like to add filter buttons at the top to filter them into 2 categories, plus one button for all products together, so 3 categories. I tried the Bootstrap collapse codes in the custom attributes but didn’t work well. I don’t want to embed a whole html code and Javascript, but use the built in blocks and bricks as much as possible. I managed to do it with the tabbed content bric and styled buttons, as this seems to have most of the open/collapse triggers built in. Eldar made a similar solution for his Estate Agency template Apartment - Blocs Templates

My question is, it seems easy to display one section or the other, but how can I display everything together? I could make one section with grey products, one section with beige products and a third section with beige and grey products but then things would be duplicated. is there a more logical way to set it up?

By the way, such a bric is absolutely essential and it would be great if you could integrate it into a future version.

Screen Shot 2020-10-20 at 16.26.17|690x438

2

I don’t know if there is any better way to do that, but I have used the method you described in your post in my Shopping template. I had a 3rd tab with 1st and 2nd combined.

Here’s the demo: Shop - Shopping Template for Blocs

Cheers,
Eldar

1 Like
3

Hi @pjmc, @PeteSharp found a solution for filtering. Details can be found in this topic of a few months ago.

4

thanks. yes that is the other option. I was just wondering if there was a native way using standard brics to avoid huge embedded html’s and external Scripts. I did try a hybrid of that method tying it to standard brics with custom attributes, but it isn’t so straightforward.

5

thanks Eldar. looks great. I hadn’t seen it.