Streaming live at 10am (PST)

[TUTORIAL] MixItUp filtering plugin with Dynamic content

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

1 Like

Perfect, thanks again @sabanna

Thanks for the tutorial!

Hi @sabanna, thanks for you awesome tutorial :slight_smile:

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!

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

1 Like

Thanks a lot @sabanna! That solved the issue :slight_smile:

1 Like

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

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

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!

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…) :slight_smile:

Thank you & have a nice day,
Olivier

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

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 http://mixitup-webflow-tutorial.webflow.io/dynamix, 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!

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…

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

Happy Webflowing :heart:

Want to try a free version using List.js?

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

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

Hello Anna! @sabanna :wave:
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. :frowning:

Would You please check again my read only link, what’s wrong with the setup? :see_no_evil:
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

Hi, @Gabriel_Hajdok!

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

Big thank You @sabanna for Your help. :heart_eyes: 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? :see_no_evil:

  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.