Streaming live at 10am (PST)

[TUTORIAL] MixItUp filtering plugin with Dynamic content

The issue I am having is a little different to this (but that is a useful solution I am sure I will use later!)

Multifilter works fine (thanks to your tutorials). Keyword search works fine - its combining the 2 that does not work for me.

If you look at @jocando 's webflow site https://jayco-recruitment.webflow.io/jobs you can see what I am referring to.

  • Type “support” in the text input, now select “health and social” - the results are all “health and social” but do not consider the text input.

  • Pick “health and social”, now type “ant” into the search input - the results include a result in the “technical” feild as the “health and social” input is no longer considered.

I have found many example of mixitup working and I am sure this is a simple change to the code so that the function considers all inputs when any changes are made - unfortuantely I do no know how to make it work.

Please let me know if you need me to explain it further or if you can help. Thanks again!

Just wondering if anyone has made any progress on this?

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!

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!

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

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.

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

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

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!

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

Nick

Hi Anna @sabanna,

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

I have followed the steps you described in the second part here: https://webflow.com/blog/dynamic-filtering-and-sorting, 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

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.

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.

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! :slight_smile:
Carola

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.

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!

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

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

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 :slight_smile: thanks

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!