[TUTORIAL] Advanced filtering (several dimensions)+ Search with MixitUp plugin

That is awesome Matt! Great job and thanks for sharing.

As I’m quite sure as to how to implement this into my existing project, would you be able to explain the changes need to be made (apart from adding the above piece of code to the existing one without modifying anything else, I suppose)?

Alternatively, would it be possibile to take a sneak peek at your project?

Thanks!

Hi @Omar_Melizza, you can see the live site here: Blog | PT-Health | Personal Trainer Leeds

Its essentially the exact process from @sabanna’s tutorial but instead of adding the data-filter in the webflow editor, add the javascript I posted last time as custom code (change the class name in the first line to whatever your filter button class is) – the script will then grab whatever text is in your filter buttons and apply it as a ‘data-filter’.

Because the data-filters needed to be added via the webflow editor (in the tutorial), this meant we couldn’t use a dynamic list to show the filter buttons (in my case the categories, nutrition, lifestyle etc). Adding the data-filter dynamically using the JQuery code means the data-filter needed to get the buttons working is added automatically.

I hope this helps!

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

1 Like

Hey everyone! I have a question about mixitup… If I have a collection list with 1000 items for exemple… The max items per page is 100 right?. But if I have like 10 categories with 100 items in each ones, does mixitup will filter the 1000 items to show only the 100 corresponding to the category i checked?

Sorry if it’s not clear it’s complicated to explain :joy: (i’m french Canadian)

Thanks in advance!

Yes, but you could use tabs instead.

So i can show 100 items per tab on one single page?

Amazing! Thank you @sabanna!

Hello everyone! I am very excited to tell you the news. Since the MixitUp released a new version of their plugin MixitUp3 I felt a bit obligated to re-fresh earlier provided information and started a new series of the tutorials. :metal:t3::slightly_smiling_face:

Please, check up a new tutorial site on http://mixitup-webflow-tutorial.webflow.io

Currently, there is only Basic Filtering and Sorting page ready, but I am actively working on putting together pages for the Dynamic Content Filtering and creating Multifilter (what previously I called “multidimensional filtering”)

Stay tuned :smile: and thanks to everyone for trust in my tutorials! It is a great feeling to know that I can help you :heart_eyes:

4 Likes

Nice work, I need this in my life! Can’t wait for the cms one I see the page is not working, yet. Would really like to use multi filting so you can select more than one filter element at a time on a cms item, hopefully that is coming soon? Hopefully we will see multi faceted search natively built within webflow soon - this is definitely needed when ecommerce comes to life

Hi @RoseWebStudio!

I just released the 2nd part of the tutorial - Filtering and Sorting with CMS content

http://mixitup-webflow-tutorial.webflow.io/dynamix

Currently working on Multifilter tutorial

Cheers,
Anna

4 Likes

Excellent thank you for your help. Can’t wait for multi filter, let me know when it’s ready. :slight_smile:

1 Like

Hi ya, hope you are well. Any news on the multi filter tutorial - I’m desperate to get going on this. Thanks

Hey guys,

I made MixItUp work with column layout, but once I started using FlexBox the filter is no longer working. Does anyone know how to make it work with Flexbox?

hi Sabanna I was trying to get the CMS Checkbox Multidimensional filtering working on the ‘Workshop’ page on my site, I bought the subscription and its not working I was following your up to date tutorial (Multi-dimensional filtering for CMS content)

I dont know if im missing a part of the custom code or to its my layout/CMS

my code


my layout

heres my preview https://preview.webflow.com/preview/star-cross-groups?utm_source=star-cross-groups&preview=d34b3ebb369856402ffebbff740f0236

Thank you

Hi @hemison!

Your dropbox link to the multifilter file will not work in such format. In the purpose of getting access to js/css files on Dropbox, in the URL to your file you have to change www.dropbox.com to dl.dropboxusercontent.com

Best,
Anna

hi @sabanna.

I changed the link to this “https://dl.dropboxusercontent.com/s/szfddgo39bri1j5/mixitup-multifilter.min.js?dl=0” and its still not working.

https://preview.webflow.com/preview/star-cross-groups?utm_source=star-cross-groups&preview=d34b3ebb369856402ffebbff740f0236

thanks for the quick reply,
hemison

It looks like in the custom code you don’t have a part that does actual filtering (#3 in this example http://mixitup-webflow-tutorial.webflow.io/multi-dimensional-filtering-for-cms-content#checkboxes-controls)

@hemison, I checked your page structure and I see no values applied to any of chekboxes.

Please, read through that part of the tutorial that explains how to setup the filtering controls with chekboxes (Filtering CMS content - checkboxes) “Multifilter” part is only explains how to make an advanced level of filtering with the additional functionality.

Best regards,
Anna

@sabanna for the win. :raised_hands:

I added the values to each of my checkboxes which match up to the cms options

was there anything else I needed to add?