Isotope Search & Filter + Webflow CMS

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

2 Likes

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:

5 Likes

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.

1 Like

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

2 Likes

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

Hi Chris,

Are you still having trouble with this as I may have sorted an answer when testing my own

PB

Great example @SidneyOttelohe ! I agree with @Koen – this what people want, ad it would be great to see this native in WF.

I’m trying to set this up too, and got it almost working. But I’m stuck at the same spot as @Chris_Scott now: Clicking on a category removes all items.

The reason seems to be that the category class doesn’t get applied to the list items. This is the code that should do it, but I don’t know why it doesn’t:

<script>
jQuery
( '.w-dyn-item .category' ).each
(
function( index, element )
{
	var _this = jQuery( element );
		_this.parent().parent().addClass( _this.text().toLowerCase() );
}
);
</script>

I wonder whether I could get some help here. I can’t for the life of me not work out what i’ve got missing. Many thanks!

http://absolute-return-partners.webflow.io/isotope

https://preview.webflow.com/preview/absolute-return-partners?preview=ceaa5a4ce55d99e96359a124d66951e5
(Second page down after the home page)

2 Likes

Hi @spirelli @pdccreative @Chris_Scott Try those tips (based on SidneyOttelohe Project):

  • Name of Colletion URL have to be same name of JS code (in this case, category) e.g. “webflow.io/category/item
  • Name of category must be in lowercase
  • Grid div must have ID: grid
  • Filters div must have ID: filters
  • A Form Text field must have ID: quicksearch

Hope can helped. Cheers!

Hi @SidneyOttelohe how are ya!
How did you make this - first shot is from your site:

I also trying to Embed the piece of code with the Dynamic data but I am getting this message every time I drag the Embed element

How can I add the piece of code to match your site?

thanks in advance

Hi I also having some trouble with this. It almost works except when you click on a category and it all disappears, the all button seems to work fine though.

Is someone could help that would be great, Thanks.

share link is https://preview.webflow.com/preview/daysofjoy-36fa8a?preview=f0357f5533433ca969e308c4d1484f16

and its on the projects page.

@SidneyOttelohe can I use this to create a search bar like this http://action-crete-homes.com/ ?

To add to this. After asigning the IDs the real last mistake to spot is indeed that the actually names you type into the category collection must be in lower case!!! Then it works. Now then I look at Sydney’s original and I see that there are capital letters - now he has simply styled these and added capitalise in Typography.

1 Like

Hey guys and gals,

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:

Best,
Sid

3 Likes

Thanks for sharing @SidneyOttelohe!

Champion :trophy:

Hello @SidneyOttelohe

Thanks for share this.

Can you help me? why the filter buttons doesn’t work for me? i’ve done everything just like your demo, but only the search input works.

here is the link with what i’ve done :slight_smile:

http://postcenter-tutorials.webflow.io/doc

here is the preview en webflow designer:

https://preview.webflow.com/preview/postcenter-tutorials?preview=e44775df2c4e6de05675c9fc81d9d6e8

Thanks!

Superb job @SidneyOttelohe!

I got most of it working including the search but when a category is clicked, it removes all the items. Clicking back on All it shows back the items.

Can anyone shed some light on how to solve this?

Thanks,
Daru

Hi @darusim_ws - I had this same issue the other day - Make sure to NOT use capital letters in your CMS Collection names - this fixed this issue for me. It might be this? - Good luck! Regards Kai

webflow-screen

ALL LOWERCASE!! :grin:

Hi @Keejo, I tried that but it didn’t works for me.

2 Likes

Instructions:

[TUTORIAL] Using Isotope and MixItUp plugins with Webflow
[TUTORIAL] MixItUp filtering plugin with Dynamic content