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: