I’ve updated this script to work with multi worded categories!
It also doesn’t matter anymore if you use capital letters in the collection since I’m converting these to lowercase, so making this script work in the future should be much easier.
Thanks @Mogeek, I was inspired to get this working by the previous work you & @maximus did on Isotope. I also managed to get the active state working btw!
I was able to get this working and its awesome! For one application I am struggling to set a filter on page load for a designated collection category and not have all the collection items appear on load.
I replaced this from // init Isotope: filter: function() { var $this = $(this); var searchResult = qsRegex ? $this.text().match( qsRegex ) : true; var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true; return searchResult && buttonResult; }
With: filter: '.category-item'
And that partly worked by filtering the collection by the desired category, but it eliminated the function of the other buttons and search.
Hey @SidneyOttelohe - this is awesome! If you got a chance to explain the mechanics one-on-one to @kasperkazzual I’d love to hear it too.
On a side note – any chance you freelance? Working on a bit of a deadline with a site that needs an isotope filter for the CMS collection and can find budget to get help. Cheers mate
Have you built a demonstration of anything like this? Would be super helpful for anyone using the CMS with inventory of some kind. Realtors, car dealers, etc.
Ok, I’ve messed with this for a couple of hours now. I’ve managed to get the filtering to work when searching, but when I click on an item in the dropdown, it filters everything out. The All button brings everything back. Just not able to get the Dropdown filtering to work.
@SidneyOttelohe … very cool! Do you think it would be possible for me to combine something like this with infinite scroll and have search and filtering apply to thousands of blog posts?
I have a website made in Webflow which presents products and categories.
In my first version of the website I used Isotope on the CMS.
At first it was very challenging… I’ve spent days studying the search and filter functions (because I lacked JavaScript knowledge).
At the end I managed to understand every line of the script and Isotope itself.
I am preparing a video demonstrating it’s use on Webflow CMS. I intend to cover search & filter functions along with some other tricks in Isotope. I also intend to cover the very basics of jQuery and JavaScript, so the ones who also lack scripting knowledge will be able to at least handle this issue.
Based on your experience, do you think it would be possible to use Isotope with many blog posts at once (maybe even thousands)? That would be so cool, but something tells me it’s designed more for a few items at a time. Either way, it’s still an awesome way to sort stuff.
Yes, you can sort as many as you wish. However, the more items being sorted, the less of performance you will get in your website navigation, and certainly that is not only applied with the use of Isotope (it’s not cool to have hundreds or thousands of items in one page in any situation).
I said “my first version” exactly due to that… I would have hundreds of products at the end, and when I added almost 100, it already begun to freeze the user experience, so I decided to drop that “all in one page” layout.
Have been messing around with this for a while and im having a bit of trouble in getting the dropdown filter to work. I have just started building an ecommerce site which will have a few hundred products connected to the cms and require a suitable filtering function to make it easier to navigate.
Im a novice at javascript so i have probably used the incorrect code somewhere along the line.
Just navigate to the “hiveware” page where you can see im trying to filter the hiveware products by there hiveware categories. Any tips would be much appreciated. Cheers
