[TUTORIAL] MixItUp filtering plugin with Dynamic content

Would it be possible to be able to see that in webflow? If I can already and I’m opening the link wrong please let me know :slight_smile:

1 Like

Hi, i am still working on this and am determined to make it work! Ideally I want to be able to filter jobs with 3 or 4 dropdowns - I have added one for now but when i pick an option it just clears all the container content. I really have no idea what I am doing here - would it be possible to take a look and see if you can see where I am going wrong? Thanks!

https://preview.webflow.com/preview/mixituptesting?utm_medium=preview_link&utm_source=dashboard&utm_content=mixituptesting&preview=61641e737e17122e95178906c6400284&mode=preview

https://mixituptesting.webflow.io/

I just put static options in the filter select for now to try and keep it simple.

Thanks!

1 Like

Hi, @DrNinjamonkey!

I guess you tried to add a link to the mixitupt-multifilter library here. But this link is not valid for adding the JavsScript file.


If you still want to store files on Google Drive you need a direct link to the file.

Try using the direct link generator here Google Drive Direct Link Generator

Step 1: Go to Google Drive and right click the file that you want to share. Now click on “Share…”.
Step 2: On the window that comes up, click “Get shareable link”.
Step 3: Make sure the dropdown is set to one of the “Anyone with the link…” or “Anyone on the internet…” options, then click “Copy link”.
Step 4: Now just paste that link into the text box above and create your direct link.

Hope it will work.

2 Likes

Its all working now - 3 dropdowns!

Thanks

2 Likes

Hi, i have seen a few people trying to get this to work so i am hoping to finally crack it so i can share!

I want to be able to filter with dropdowns AND search with a keyword. My current set-up works but when you change a dropdown it filters again and ignores the keywords typed. Searching by dropdowns and then by keywords seems to work fine.

https://platform-e8da42-7d16e88396a01fdac366165.webflow.io/job-searching

https://preview.webflow.com/preview/platform-e8da42-7d16e88396a01fdac366165?utm_medium=preview_link&utm_source=designer&utm_content=platform-e8da42-7d16e88396a01fdac366165&preview=d04ee9cd492254afad6c40e4f6fa1ce9&pageId=5da75e292362c8e4a038fc3c&mode=preview

Would appreciate some help. There are a TON of examples out there but none that i can find doing exactly what i need.

Cheers!

1 Like

@sabanna

I emailed yesterday, but wasn’t sure it was the best way to get to you. Sorry for the double messages…

I’m having two issues with Mix It Up. Hoping you can clear them up :slight_smile:

  1. I used this method from @samliew to auto-populate the keyword search from the search bar in the home page header. But, I can’t get the list to actually filter. I commented out the code I was trying to use for this.

  2. If I select “Health and Social” from the first dropdown, then select “Full-Time” from the second dropdown, and last re-select “All Job Types” in the second dropdown, nothing shows up and the filters stop working?

Webflow Subdomain: https://jayco-recruitment.webflow.io/jobs
Read-Only Link: Webflow - Jayco Recruitment

Thanks so much for any help you can give!

Jose

1 Like

@sabanna or @samliew Pinging you guys, hopefully one of you could check this out for me? Thank you both!

1 Like

@Waldo Thought I would add you to the ping mix :slight_smile: If you know a good solution, needing some help!

1 Like

Hey @sabanna ,

I hope you’re doing well.

I’m contacting you today because I’m facing a new challenge / problem, regarding mixitup multifilter.

If you could please have a look on this shared link, I’ll be amazing: https://preview.webflow.com/preview/verreriedusud1?utm_medium=preview_link&utm_source=designer&utm_content=verreriedusud1&preview=acaad5d75eaa1a2b600b35bd2f4070f1&pageId=5db9d1b2918a6df899a77dda&mode=preview

I’ve copied the code from the “MULTIFILTER WITH CHECKBOXES” section of this page : http://mixitup-webflow-tutorial.webflow.io/multi-dimensional-filtering-for-cms-content

But I’m probably doing something wrong.

Hope you can find my mistakes.

Kind regards,
Olivier

1 Like

@olivierp, I believe you’re using radio buttons in your layout… not checkboxes.

2 Likes

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