[TUTORIAL] MixItUp filtering plugin with Dynamic content

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

1 Like

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!!

1 Like

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: https://preview.webflow.com/preview/check-filter?utm_medium=preview_link&utm_source=dashboard&utm_content=check-filter&preview=e4cb06562260e1cb0f0a9566c3093b19&mode=preview

Iā€™d be thankful to be pointed in the right direction :slight_smile:

2 Likes

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)"

1 Like

Thanks @sabanna
Will try that!

1 Like

Hello @sabanna,

First of all, thanks a lot for this tutorial, itā€™s really amazing!
I achieved to do most of the part youā€™re explaining on your Tutorial. But now Iā€™m quite lost haha.

When I use the filters on my catalog, it seems that only the ā€œreset filtersā€ button is working and I donā€™t get why.
When we click on other filters button, it show no product for each categoryā€¦

Here is my read-only link, could you have a look and help me there ?

Thank you very much !

1 Like

Hi, @Joris_Alexandre!

It seems like you were able to solve the problem. Filtering works now.
Please; let me know if you have any other questions.

Respcetfully,
Anna

2 Likes

Hello @sabanna !

No I didnā€™t change anything yet, and itā€™s still not working on the live version of my website :sweat:
Iā€™m sharing below some screenshots of the live version:

This first screenshot is on the ā€œno filter selectedā€ or ā€œreset filterā€ has been clicked.

This second screenshot happens whenever I click on a filter (it doesnā€™t matter which one we select, itā€™s doing the same for every filter).

In case you need it, I add my read-only link here.

Thanks again for your help, itā€™s much appreciated !

2 Likes

Hi, @Joris_Alexandre!

I will probably need a bit more information to figure out why it doesnā€™t work for you. It workes as expected on my end:
Shared with CloudApp

Is it possible you have some browser extension blocking javascript or something like this?

1 Like

Hey @sabanna, again thanks for your time and your research here !

So your gif help me understand why itā€™s not working actually.
Iā€™m using a solution to have multi-language on my site (weglot).

So I see that filters are working also on my side but only when itā€™s on italian language (default language) which is the language I used to set up mixitup.

Once I switch to French or English, filter does not work anymore. Is there any way to make it work also when I switch to FR or EN ?
FIY : when you switch to FR or EN, domain name switch from www.utis.shop/catalog to :

  • FR: www.fr.utis.shop/catalog
  • EN: www.en.utis.shop/catalog

Not sure if there is anything to deal with that but just wanted to share all info I have on my side.

Thanks again for your help!

1 Like

Hi, @Joris_Alexandre !

Your guess is right, the translation is interrupting filters setup.

When the user switches t a different language, all content on the page got translated, including those hidden ā€œfiltering categoryā€ divs. Then, the script from the mixtup setup ā€œreadā€ the category name on each dynamic item and creates a class for further filtering. And, since those categories are translated now, the class-name will be different from what you have on the Italian version.

At the same time, the class-name on the filtering button stays the same, because it is embedded HTML and uses slug as a data source.

So, basically, filter functioning correctly, it is categories, that are getting messed up.

The solution would be either somehow mark those hidden categories as ā€œnon-translateā€ or finding out how to adjust the script.

2 Likes

Hi @sabanna, Iā€™m trying to make it so that I can apply multiple filters to the same collection list. Right now, the location filters work, but the hour filters donā€™t (I also want to add one more for filtering tags). Iā€™m not sure what Iā€™ve done wrong, hereā€™s the read only link: https://preview.webflow.com/preview/internedjobs?utm_medium=preview_link&utm_source=designer&utm_content=internedjobs&preview=02a2436acf727cdd1678d9b688c0ae71&workflow=preview

Also the live site: https://internedjobs.webflow.io/

Also, I have tried to turn off the animations with the extra code you mentioned on another thread, but every time I do, it just makes the filter effect stop working completely.

1 Like

Hi, @Elsa!

In your project, there is nothing wrong with the code. The issue is that you put checkboxes from different types of categories into separate forms. Therefore, the plugin only recognizes the very first one and simply ignores anything else.

You can recreate all the same structure (sections, divs, etc) but inside one form, then it should work with multiple filters applied.

2 Likes

Hi Sabanna, thanks! That worked, but I have a few more problems now. The first being that the ā€˜Allā€™ checkbox doesnā€™t uncheck itself when you click one of the other options. Also, the filtering seems to be working independently. So if I filter only locations in Tanga, and then also try and narrow it down even more by clicking Part-Time, it will show me the part-time options that are in all locations. Rather than only the part-time locations in Tanga. I want the filtering to be ā€˜ANDā€™ and not ā€˜ORā€™ between the filter groups (not within an actual group).

@sabanna

1 Like

Hey, @Elsa!

I see what you mean. Unfortunately, you canā€™t get this work without adding a ā€œmulti-filterā€ addon from MixitUp. With basic functionality, you can only control logic INSIDE the group but NOT BETWEEN groups.

Here is a step-by-step guide on how to do that
https://mixitup-webflow-tutorial.webflow.io/multi-dimensional-filtering-for-cms-content

3 Likes

Hey @sabanna

Hope youā€™re well?
I was trying to use your MixitUp code on a template and canā€™t get it to work. It works perfect for me when I recreate it on a blank code sheet, but not a template.
The code is like-for-like to yours and the template itself has no scripts which could override it.
If I click any categories, they disappear.
Any idea what could be causing this not to work?

https://bammedia-471f4f.webflow.io/mix-it-up

https://preview.webflow.com/preview/bammedia-471f4f?utm_medium=preview_link&utm_source=designer&utm_content=bammedia-471f4f&preview=2e299e3739820af690d5062740e5a3fe&pageId=6113e6d18195efe8c3557e1e&workflow=preview

Hi, @Bammedia !

The data-filter attribute should be on the button (link) and not on the Collection Item. You will need to adjust your code

Image 2021-08-11 at 3.42.23 PM

Hey @sabanna
Thanks for the quick reply! :slight_smile:
Iā€™m a bit confused by this as my setup is exactly as your clone setup i.e. data-filter is on the button only. (See screenshot) However when you click on a category the data-filter selects that class, i.e. above .packaging.
The same thing happens to the code on your clone when you select a category. (See screenshot)
What am I doing wrong?


Also, when I click on my categories the container appends a class of fail.

This class got applied by MixitUp when container have no result