Filtering grid items
| 08 Dec 2020
This makes it a really effective and lightweight approach to add useful interactivity to the page and allowing users to filter out information that they don't need to see.
To set up a grid filter
- enable it in the Grid Plus stack
- add in details of all the different categories (giving each a label and a value)
- add the relevant category (or categories) to each individual grid item (see image below)
Examples
I have used this in numerous projects. A couple of particularly good examples are:
- The interactive menu and recipes (in the Pizza Monkeys project)
- The portfolio section (in the Freelancer project)
- The Source projects filter (on the Source pages)
Bonus tip: Filtering via the url!
By adding just a couple of lines of javascript to the page we can allow for the grid to be filtered on page load by passing in a url parameter. For example we could show all grid items that match the category 'blue' by adding the following to our url: ?category=blue
.
The code that we need to add (to the Javascript tab of the page inspector in RW) is:
var urlParams = new URLSearchParams(window.location.search);
if(document.location.search.length) {
document.getElementById(urlParams.get('category')).checked = true;
}
This is a really useful approach if you want to link to particular categories from a different page to where the grid it on.
Like this post?
Why not share with others that might like it too?!