Streaming live at 10am (PST)

Isotope Search & Filter + Webflow CMS


#1

Hey guys,

Made a small site example on how you can use Isotope to search and filter Dynamic Collections.

It’s pulls the filters from the collection ‘Categories’, so whenever you add a new category a new filter is added.

Please note that the search isn’t a site-wide search, it will only search and display items from a dynamic collection displayed on that page.

You can find it here: http://dynamic-search.webflow.io/

As always, I made it clone-able!


Update:

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. :+1:


Isotope + Webflow... Filter grid based layouts with ease
CMS Filter for visitors
Sidebar Search for Blog
Filtering dynamic collections cant make it work
We need a Search module
[TUTORIAL] MixItUp filtering plugin with Dynamic content
CMS API + Zapier Comments System
Search functionality available?
Filter by tag dropdown
Isotope Filter + Webflow CMS - HELP?
#2

Thanks Sidney, bookmarked and duly noted. Good work :wink:


#3

#4

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!


#5

Outstanding work @SidneyOttelohe!
I am looking forward to learning from it :slight_smile:


#6

Hey @SidneyOttelohe, that looks amazing!
Could you show/explain how it works exactly? I'd like to use this on another website!


#7

thanks @kasperkazzual!
Yes I actually wanted to to make a small how-to around it but haven't had the chance to yet.

I can pm and explain you the basic mechanics one-on-one if you'd like.


#8

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.


#9

Awsome! Congrats for this :slight_smile:


#10

you are the man,,,, i just was looking for something like this :slight_smile:


#11

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


#12

Hey @karoline thanks!

And yeah sure - just send me a private message and we'll see how I can help!

Cheers


#13

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.


#14

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.

Here's my share link: https://preview.webflow.com/preview/swift20?preview=3ff09e4c1d7cc6e855743937a7472f2f

Page is the Isotope Test page at /isotope.

Would love any help to get this up and running!

Thanks!
Chris


#15

@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?


#16

This is what everybody wants! But for me as " No Coder" to complicated... So Webflow, please take a look at this kind of filters!


#17

Hello guys

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.

I'll be back soon. :slight_smile:


#18

I'm excited now :slight_smile:

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.


#19

@ckboddic

Thanks for the 1 up.

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.

I intend to post my video until friday :slight_smile:


#20

Hey guys,

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.

You can view my read only link here :

https://preview.webflow.com/preview/beekeeping-supplies-northland?preview=5fccccdfade1302ac1e16636a8bccf4a

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