[TUTORIAL] MixItUp filtering plugin with Dynamic content

Hi, @olivierp

  1. From what I can see in your project it has Radiobuttons, not Checkboxes
    33%20PM

  2. You are applying values that start with numbers and contain capital letters. It will not work because values should be actual classes. CSS syntax is not allowing to use capital letters and classname cant start with the number. so, for example, instead of .75CL you need to use ._75cl

2 Likes

Did anyone ever build a working version of MIXITUP with dropdowns + a couple of check boxes and text search? Would love to take a look at a live / preview site if you managed it - I’ve been trying on and off for weeks now!

1 Like

Hey @sabanna, @anthonysalamin
Thanks for your answer, I’ve made some changes!

However, I’m pretty sure there are some other mistakes to solve, but I don’t know where.

If you’ve any clues, I would love to hear them.

Thanks again

1 Like

it seems you do not have any reference to your categories inside your mix div. Mixitup can’t know which div has which categories if those are not referenced within the mix div you set up.

Screenshot%20(585)

1 Like

Hey @anthonysalamin,

Thank you for taking the time.

However, I’m not sure how to add reference to categories, so If you could guide me It’ll be super cool.

Moreover, if by any chance there is a clonable version of this set up somewhere, I would love to have a look on it.

Thanks again.

1 Like

@olivierp unfortunately I don’t think people will make their project clonable since Mixitup 3 multifilter require a paid licence.

However, I recently did an extensive Mixitup 3 one dimensional filtering research which I published in this post. Feel free to have a look, you’ll get an idea of what I mean by referencing the categories (here refered as “categ”). You can also have a look at the associated codepen where you can have a look at the structure you should be reproducing in Webflow.

1 Like

Hey @anthonysalamin, thanks for your help but without coding knowledge It’s hard for me to understand the real changes I need to make in my structure.

I’ve found this clonable project, but It’s not exactly the same filtering configuration.

I’ve simplified the “mix” structure to make it easier to visualize, available here.

If you or @sabanna are ready to take the time, maybe by private message, to help me with it, It’ll be awesome.

1 Like

Hi - just having a look at this for you because I have similar problems.

In your second example everything seems to be working as expected because the only “health and social” jobs are “full time”. However i did find an error with your search:

If you select “technical” from the second dropdown and then type “su” in the keyword area - ALL matching jobs appear and the filter does not take into account the existing filter. This is a similar problem I am having.

If anyone has a solution I would love to hear it - I will keep working on it and will share the results when I eventually solve it :slight_smile:

1 Like

@DrNinjamonkey I’ve emailed with Sabanna a little bit. She recommended removing the “all” value from the dropdowns.

58%20PM

However, I’m still having issues with the search input not filtering in tandem with the dropdowns…

1 Like

I will share my project with you later if I can - if not it will be tomorrow.

My friend is a very experienced JavaScript developer and he is coming to help Friday so he will hopefully solve it for me then and ill share my results with you all!

1 Like

Hi, @jocando and @DrNinjamonkey.

Maybe this solution from @steven.riot will work for you, guys:

1 Like

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!

1 Like

Just wondering if anyone has made any progress on this?

1 Like

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!

1 Like

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!

1 Like

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

1 Like

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.

1 Like

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

1 Like

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

1 Like

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!

1 Like