[TUTORIAL] MixItUp filtering plugin with Dynamic content

[DrNinjamonkey]

Just wondering if anyone has made any progress on this?

[DrNinjamonkey]

Just wondering if anyone else is working on this? I am yet to find an example with text AND dropdowns (or check boxes) working correctly. If you have seen one please send me a link. Thanks!

[ASAFAF (Andy Taylor)]

Hi there, thanks so much for the tutorials. I have one quick question. Would it be possible to set this up in such a way that if I have a set of product categories in a shop, such as “Necklaces” “Pendants” “Earrings”, but had sub categories ONLY for Earrings like “Stud Earrings” “Long Earrings” etc, then when I click the main earrings category filter, a set of filter buttons for filtering those sub-categories appears. A kind of sub-filter? But only visible on categories that have sub-categories?

Hope that makes sense!

[sabanna (Anna)]

Hi, @ASAFAF. It is doable either with custom animation or extra code work (depends on your design).

[ASAFAF (Andy Taylor)]

Thanks @sabanna . Good to know. Do you mean custom animations as in interactions? I imagine the design to have a set of filter ‘buttons’ for the top level products and then sub-filters would just appear underneath.

[sabanna (Anna)]

@ASAFAF

Do you mean custom animations as in interactions?

Yes, I meant interactions. And as I mentioned it depends on the project design needs

[ASAFAF (Andy Taylor)]

Thanks for the clarification! I’ll see how I get on!

[Jonas-Pro_Orb (Jonas Hiltl)]

Hello, I have a problem with my website.
I want to filter after the colours available for a T-Shirt. Some T-Shirts all have the same colours available, for example colour white and black.
All T-Shirts together I have 6 different colours available but the maximum colour variaton of one T-Shirt is only 4 but I still have to create 6 refernce fields to not mix up the class names and actual colours.
But my issue is that the maximum amount of refernce fields is 5 so I can`t create every single refernce field for every colour.

read only link: link
My collection is on the categories template

Hope you can understand my issue!

[npfosi (Nicholas Pfosi)]

Is anyone able to help me troubleshoot a CMS template page where I am attempting to use this MixItUp feature with a set of lightbox images and multi-image fields from the Webflow CMS.

Here is my read-only link: https://preview.webflow.com/preview/nicholaspfosiphoto?utm_medium=preview_link&utm_source=designer&utm_content=nicholaspfosiphoto&preview=6532666811a6dde76efa787602d44637&pageId=5e55d6b20aff9d4699f218f0&itemId=5e55d6e35781130d29b7a826&mode=preview

I am not sure I am labeling the classes correctly and have tried a few different permutations to troubleshoot… a filtering event occurs when I hit the filter buttons but it is inconsistent and doesn’t seem to follow a pattern from what I can tell, which is super confusing to me.

What I am attempting to do, is create a “portfolio” page template… there are 5 collection lists because of the 25 image upload limit for multi image fields… my thinking is, say I have an “architecture” portfolio… this would have 3 subcategories… i.e. interiors, exteriors and abstracts… these would be the filter categories and they would selectively hide the respective multi-image fields. Let me know if I can clarify anything… thanks

Nick

[thesilentstudio]

Hi Anna @sabanna,

first of all thanks for your awesome work, your tutorial was a huge help getting started with mixitup!

I have followed the steps you described in the second part here: How to add dynamic filtering and sorting to your Webflow websites | Webflow Blog, and got the sorting to work, but seem to be unable to fix the filtering. The filtering seems to take effect for a second, but then the items are bouncing back.

I have tried a lot of things already, but nothing seems to work. In case you have an idea what I might have done wrong for this to happen (I’m sure I still make a ton of mistakes^^), I would be very grateful:-)
Here is my attempt: Dynamic news items with filtering and sorting
And the link to the preview

Thanks a lot, have a great day!
Carola

[sabanna (Anna)]

Hi, @thesilentstudio!

Most likely it is a “accent characters” issue. The code snippet that creates categories on the the mix item does not replace accent characters (as it Webflow slug system does) and further javascript does not recognize them.

We had a post with similar problem earlier. You will need to add additional lines in the custom code.

[TUTORIAL] MixItUp filtering plugin with Dynamic content

[18%20PM] You can’t leave spaces in the values, because they should match CSS classes, any spaces should be replaced by dash (-) 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)]

Hi, @npfosi!

Your situation is definitely non-standard. With multi-image field it is probably not possible to achieve, unless each multi-image collection have the same category.
There is a way to do it by using the separate collection for images and multi-reference it to portfolio item.

If you want to brainstorm some ideas, feel free to DM me.

[thesilentstudio]

Hi @sabanna,
thank you very much for your fast reply!
Unfortunately so far, I didn’t get it right. Here is what I tried:
I pasted the additional code to replace umlauts into the custom code and after this didn’t help I additionally changed the category titles to match the slugs (with “o” instead of “ö” and without spaces).
The bouncing back is still there though. Do you have another guess what I could try?
If not I’ll probably just start all over…

Thank you!
Carola

[sabanna (Anna)]

Ok, I think I guess what might still be wrong.

When you added the html embed buttons you applied the same classname on the button AND on the embed element. It might cause the problem. Could you, please remove that class from the embed element and leave it only inside the html code.

[thesilentstudio]

Hi @sabanna,
I would so much love to say that this was it, but unfortunately not… I removed the class and tried with a new one as well, but nope…
Could it be that I have messed up the positioning somewhere, or overflow? I’m still learning… sorry!

[sabanna (Anna)]

Wow that’s quite a puzzle. I will take a closer look later and will let you know

[thesilentstudio]

@sabanna thanks so much! I’m really grateful – I don’t know if this saying exists in english, but in german we say: I can’t see a single tree anymore cause of all the forest

[npfosi (Nicholas Pfosi)]

Okay thanks for the input.

I am not sure I understand the first part of what you said but regarding the multi-reference solution, that seems like something to be optimistic about. Will DM you thanks

[Ricky-Chau]

I followed multiple of your tutorial, and I still can’t get my CMS based mixitup filter going.

Here is the share link if you want to take a look!
https://preview.webflow.com/preview/ricky-makes?utm_medium=preview_link&utm_source=designer&utm_content=ricky-makes&preview=8a87973da24bba39a61510e20ef4c400&mode=preview

Thank you!

[sabanna (Anna)]

Hi, @Ricky-Chau!

1. Make sure you are binding filter-category to the correct field and that field has a data
   
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