[TUTORIAL] Using Isotope and MixItUp plugins with Webflow

Okay. Thanks! I appreciate all the good info you post here. :slight_smile:

1 Like

For those, who tried this tutorial and wasnā€™t able to make it work, I want to apologize. :pensive:

Tonight I found couple mistakes in tutorial text, which would mess up everything if you followed tutorial word by word, thanks @webdes.

Mistakes fixed, tutorial updated.

Regards,
Anna

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