Streaming live at 10am (PST)

[TUTORIAL] MixItUp filtering plugin with Dynamic content

Hi, @Ricky-Chau!

  1. Make sure you are binding filter-category to the correct field and that field has a data
    Image 2020-03-09 at 11.18.30 AM
  2. Make sure that in the code .parentElement parameter used as many times as many levels deep your filter-category (and sort-category) is inside the mix item (in you case category is only 1 level deep and in the code you are using 2 parameters)
  3. You don’t need to put the dot infront of the class-name in Designer
    Image 2020-03-09 at 11.13.21 AM
1 Like

@sabanna Thank you so much for your help! This makes so much more sense now!
Sorry to bug you on this! But one more question,
I have put the CMS mix into a responsive grid with the autofit method.
The problem is that when I use the filter



it will first filter out and then have a really harsh resizing. Is it possible to
smooth out the resizing?
And while on the topic, is it possible to sort the filter button by hue like how you can in the CMS collection page?

image

The link before should still work:

https://preview.webflow.com/preview/ricky-makes?utm_medium=preview_link&utm_source=designer&utm_content=ricky-makes&preview=8a87973da24bba39a61510e20ef4c400&mode=preview

And if you want to take a look, the live site is

And that’s it!!! Again, Thank you so much!

Hi @sabanna

Thank you so much for your tutorials! I was wondering, is there a way to have a filter preselected when coming in from a specific page?

In my scenario I have an ecommerce site where I have categories listed on the homepage and when one is clicked I want to go to the product grid page that has all the products and the filters but with that specific category they clicked on to be already selected in the filters.

Thank you!!

Hi @sabanna
Huge appreciation for all the tutorials you’ve made. I’ve managed to build a CMS checkbox filter and now I’m wondering if it is possible to reverse it: a checked item disappears from the container? The end goal would be to allow an allergic person to remove a ticked product from the search result. I’ve tried to change: mixer.filter(selectorString); to remover.filter(selectorString) and it “sort of” worked, but not perfect.

Here’s a link to the project: Webflow - Check filter

I’d be thankful to be pointed in the right direction :slight_smile:

1 Like

Hi, @michal.pietrucin!

Yes, you can. When you are applying the value to the filter-checkbox, instead of putting value = ".classname" make it value = "not:(.classname)"

Thanks @sabanna
Will try that!

Hey @sabanna
First of all, thanks for the outstanding work and answering all the questions from the community!

I have tried to integrate your work in my own project. Unfortunately I ran into the bug that you can’t take categories with the same name at the beginning. Since you already answered this bug, I tried to fix it with these responses from you. Unfortunately it does not work for me (or apparently I’m still doing something wrong :smiley: ). In summary, I would like to have the field “Name” as text in the buttons and based on the field “Filter Name” I would have filtered.

Here the link to the project: Webflow - Rock Your Life

Would be nice if you could look over it. Thanks a lot!