Streaming live at 10am (PST)

[TUTORIAL] Using Isotope and MixItUp plugins with Webflow

Hi @sabanna, thanks a tonne for the amazing tutorial. Is there a way to add more filtering options like checkboxes and search bar to narrow down a field? This demo is pretty much what I need but creating this entirely in webflow hasn’t really worked out for me so far.

Thanks.

1 Like

Hi, @zebualvi.

The article to this demo says they used MixitUp plugin, so it may be pretty much doable. I will have to dig deeper and try to implement that in Webflow. It just may take some time.

I will let you know about results.

Cheers,
Anna

1 Like

Thanks Anna, I really appreciate it.

Hi again, @zebualvi.

I tried to follow the steps from that article and implement the same filtering features that they have.
Have to be honest, I didn’t succeed on 100% because they did not tell much details in the article.
Here is result that I got: http://js-filtering-plugins.webflow.io/mixitup-advanced

I still can’t figure out how they did that un-checking the checkbox will “clean” the filters and can’t make “Select option” work.
Will try to come back to that later, when will have more time.

If the radio buttons and search field will be enough for your project, I will go to make more detailed tutorial.

Regards,
Anna

1 Like

OMG I want that! I need that for an upcoming project. I hope you guys can figure it out! I am here to help though I am awful at code.

1 Like

You are a legend Anna, thank you very much. Would it be possible for me to make a clone of http://js-filtering-plugins.webflow.io/mixitup-advanced so I can have a look at how you did it? My site is for a film festival so i’m thinking about a combination of buttons, checkboxes and radio buttons to help viewers narrow down their choices via type, genre and date. I really appreciate you taking time to help me out.

Regards,
Alvi

Hey, thanks for the wonderful tutorial.
Got a problem here.

When cloning your site, only isotope is working.
But mixitup is not functional at all :frowning: !!!

Hello, @Daniel_Schultheiss.
Let me check it up. Cuz I am currently working on adding advanced filtering and could mess up something.

Thanks @sabanna . Got it here:
https://preview.webflow.com/preview/daniels-isotope-test?preview=b2f32f1aa1720dc0f017e49ef28727db

And live:
http://daniels-isotope-test.webflow.io/mixitup-plugin#setup-mixit
(no items will show up)

Owww, I know what is wrong.

One of the important details for make this plugin work is: filtering items should be display: none initially, then plugin makes them all display: inline-block.
Previously, I set interaction on load, which make all that elements display: none. But, for some reason, it doesn’t work anymore, so you will have to disconnect elements from interaction and simply set class “mix” to display: none (in style panel). Then everything will work again.

Cheers,
Anna

@sabanna

Thank you so much :slight_smile:

New tutorial about using MixitUp plugin for more advanced filtering you can find in this topic:

P.S. Tutorial about using filtering plugins with Dynamic content is coming.

1 Like

Thank you again for these tutorials @sabanna
I tried to redesign my webtools library using mixitup (without the CMS) and the result is here : http://toolscamp.webflow.io/
Best,

1 Like

Thanks for this @sabanna. I can’t seem to get this to work and I’m trying to troubleshoot:

:white_check_mark: I’ve pasted the code in my site settings. Both the script src code and the actual script are pasted in the “Footer Code”, right?

:white_check_mark: I’m linking to the .js file which I’ve posted in my public dropbox.

:white_check_mark: I’ve published the file… it has to be published to work, right?

Maybe it’s something to do with my buttons or how I’m labeling things?

https://preview.webflow.com/preview/isotope-test-35b51c?preview=8176ca1ad095264a7c0dfca58c58865e

Hello!

Do you have an update for dynamic content using these filters?

1 Like

Dear all,

This tutorial is awesome and it helps a lot in general, but I have a bit more specific problem…I have a client who needs filtering implemented by a search field for dynamic content. I have found a similar example using isotope (https://codepen.io/desandro/pen/wfaGu) - but it would be just great to have a similar tutorial or, to be honest, to have any help in this. :slight_smile:

Thanks a lot!

Cheers,
G

1 Like

Hello everybody :slight_smile:

Here is a new part of the MixItUp tutorial:

Using MixItUp jQuery plugin for filtering Dynamic collections in Webflow

Best,
Anna

2 Likes