Sort / Filter Options for Products

I Need Help
1

Hi,

I wondered if this was possible within Blocs:

i.e. I have 100 cars on the the website, and I wondered if it was possible to say click a tab to show all the Red, or blue, or Green cars, or to show only hatchbacks, or saloons etc.

The only thing I could think that comes close to mind would be Tab Anything Pro, but there could be a lot of div containers to make it work. I only want to be able to sot by 1 thing at a time, not multiple.

I suspect some form of JS is going to be needed… any other external 3rd party sources?

2

This might be helpful. It does come with managing a lot of DIVs or whatever type of element you are using, but it is not that difficult in my experience.

1 Like
3

Thanks Eldar, I guessed something like this would be the way to do it. However, I may see if I can do it with a dropdown rather than tabbed content.

Thanks,

4

@Brocky120 I am implementing something similar on my new site for filtering reviews. Using a dropdown.

You do need to code this in javascript, it looks for changes in the dropdown, get the selected value, and then looks for that across an array of items and adds a class to hide the item. I do a crude version of this on my temporary Blocs Builder website on the store page at the moment, but using buttons.

You can of course use this to link to a filtered range using a URL, which is what I will be doing here. Really handy.

You can use classes or attributes as a filter target.

There is actually an existing library (well many) you can get for free online that does this too, called Isotope Filtering, have a google.

5

I know it might be overkill, but you could also use the Volt CMS Blog functionality therefore. Add a car with one blog post, and add categories to the car.

4 Likes
6
7

I uploaded a blocs file based on isotope filtering to the forum a while back. You might want to do a search.

2 Likes
8