[TUTORIAL] MixItUp filtering plugin with Dynamic content

[sabanna (Anna)]

Hi, Oliver!
Yes, you have too many parentElement parameters right now 2 will be enough

[olivierp (Olivier)]

Perfect, thanks again @sabanna

[albsama (Alberto)]

Hi @sabanna, thanks for you awesome tutorial

I’m trying to implement the Checkbox Filtering following the steps on your tutorial. Everything seems to be in order in my page. Classes are assigned correctly to the .mix element and mixer.filter(selectorString) seems to be called with the right arguments. However, the filtering doesn’t work as nothing happens as I check or uncheck the checkboxes. I’d very much appreciate some help.

Here’s the link to the preview:
https://fulbrightpy.webflow.io/full-pages/becarios-example

And here’s the link to the project:
https://preview.webflow.com/preview/fulbrightpy?utm_source=fulbrightpy&preview=f90c7264511351f42a57412345e27910

Thanks!

[sabanna (Anna)]

Hello, @albsama!

I checked the code on your example and noticed that when you are assigning the containerEl you are pointing to the element with classname .mix, which is not correct. The way it is pointed now the plugin is trying to find what items it can filter inside the 1st “mix” element that it can find on the page. As a result, you have nothing.

containerEl should be pointed to the element with the class of the div (or container) that is wrapping (contains) all mix-items, in other words, WHERE plugin should look and filter items. In your case, it would be the .becarios-collection-list

If you have more than one div with this class, then you can point it by ID. In your case, it would be
containerEl = document.querySelector('#becarios-collection-list)'

Best regards,
Anna

[albsama (Alberto)]

Thanks a lot @sabanna! That solved the issue

[olivierp (Olivier)]

Hey @sabanna

I hope you’re fine!

I’m currently building a new project and I’m facing an issue.

If you check this page, you’ll see that the filter is not working.

I’m probably missing something, but I’ve checked everything I could.

So If you could have a quick look on it, it will be awesome!!

Thanks a lot for your help.

Shared link here

Have a nice day,
Olivier

[sabanna (Anna)]

Hi, @olivierp!

Sorry for the late reply. I checked your project on a published link and it seems works fine. Did you figure out the problem?

Cheers,
Anna

[olivierp (Olivier)]

Hello @sabanna,

Thanks for your answer, but I’m not sure about the link you’ve checked, because on my side it’s not working.

Published link is here, and not working.

Let me know if you need more info!

Thank you!

[olivierp (Olivier)]

Hey @sabanna,

I really do not want to bother you, but wanted to be sure that you’ve read my previous message.
I will understand if you’re busy (or in Holidays…)

Thank you & have a nice day,
Olivier

[sabanna (Anna)]

I sent you DM that day, check your inbox, please

[spirelli]

@sabanna

Most amazing in this, that with help from @bartekkustra we were able to set filtering buttons to be dynamic too. So now, when you are adding new category and new items it will automatically appear in the filters and content.

Hi @sabanna – or anyone else. This is exactly what I’m looking for: dynamic filter buttons that will update automatically if a category is added or removed in the CMS. However, I cannot find any instructions for how to set this up.

I’m lookind at “FILTERING AND SORTING CMS CONTENT” at Filtering CMS content | Webflow+MixitUp3 tutorial, and step 4 only seems to have instructions for building non-dynamic controls.

I’d be happy if someone could point me into the right direction!

[11153 (김성곤)]

Hi sabana and all,
first of all, thank you so much for a great tutorial!!
however,I have a trouble with webflow cms collection limited list and I have to implement to list over
100 items in my contests section.
is there any idea and solution in this mixitup?
actually, I have seen the website made by webflow and mixitup before, to be over 100 items using mixitup multiFilter and this site is like followed site.

site

I don’t know well… I guess he can use the data-ref=“container-1” and the data-ref=“container-2” in cms collection custom attributes.
(I could see this site before, unfortunately, not this time)
I really appreciate it if somebody can inform me like this example site…

[sabanna (Anna)]

I created a separate topic where I showed a Workaround for Big collections:

[TUTORIAL] MixItUp3 - Filter and paginate Collections with more than 100 items

Hello, dear Community!!! As many of you know, Webflow has a limit on how many Collection Items can be rendered in one Collection List (100 items in one dynamic collection instance). This limitation based on the front-end and back-end performance concerns and for now can’t be removed. Many users asked me if there is a solution for situations when you need to use MixitUp Filters on big (more than 100 items) collections I can suggest a workaround, that will help you with this problem. …

Happy Webflowing

[blurp1478963 (Ben)]

Want to try a free version using List.js?

https://webflow-free-custom-filters-tutorial.webflow.io/

[AlexWEBsites]

@sabanna I wanted to thank you in the forum for the help you have provided with my project … I took you’re suggestion and simplified my data-values. however, I am still having an issue. could you take a look (hopefully one last time) I would really appreciate it

read only link:

[Gabriel_Hajdok (Gabriel Hajdók)]

Hello Anna! @sabanna
It’s me again, Gabriel.

Thanks to Your help I could move forward and tried the MixItUp multifilter function.
Unfortunately something went wrong, the filtering isn’t working.

Would You please check again my read only link, what’s wrong with the setup?
https://preview.webflow.com/preview/gabriels-amazing-project-9f0517?utm_medium=preview_link&utm_source=dashboard&utm_content=gabriels-amazing-project-9f0517&preview=986d089f6f8fc47a8f5adf20cf993af2&mode=preview&fbclid=IwAR01tmbJFVYTkjFu5Viu3mAojuxLf-4MCpgVQQDShtDqQ_lBXSgYvA3U2hw

published site: https://gabriels-amazing-project-9f0517.webflow.io

Thank You for your time!

Gabriel

[sabanna (Anna)]

Hi, @Gabriel_Hajdok!

You simply lost the letter “n” in the URL and browser can’t get access to the file

[Gabriel_Hajdok (Gabriel Hajdók)]

Big thank You @sabanna for Your help. This means a lot to me.

Now the first dropdown filter is working, but the others still not. I think I missed something from your “Multidimensional filtering” tutorial, but don’t know what exactly.

Would you please check again what’s the problem?

[sabanna (Anna)]

1. You can’t leave spaces in the values, because they should match CSS classes, any spaces should be replaced by dash (-)

2. MixitUp automatically transforms all “special” (non ASCI) characters inside its API when you making any filter selection ( changes ü to u for example), so you will need to make sure your markup matches the sanitised version of any query.
   I will try to write a function for doing it automatically, but it will take some time.

[sabanna (Anna)]

Ok @Gabriel_Hajdok, here is what you will need to do:

1. Change the function that I showed on the screenshot to the code snippet bellow

   var conv = function (str) {
    if (!str) {
        str = 'empty';
        }
    return str.replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, '')
    	      .replace(/ /g, "-")
            .replace(/[ä|à|á|æ|ã]/gi, "a")
            .replace(/[ó|ö|ô|ò|œ]/gi, "o")
            .replace(/[ü|ú|ű|û|ù]/gi, "u")
            .replace(/[í|î|ï|ī]/gi, "i" )
            .toLowerCase()
            .trim();   	
  };

2. In all filters, replace all umlauts and accents to the “Latin” characters accordingly (examples you can see in the code snippet above ) and add dashes instead of spaces.

3. Remove values from the “all” option, it doesn’t work properly with word all in the latest MixitUp API