[TUTORIAL] MixItUp filtering plugin with Dynamic content

Owww, @rkoomera

In your project it is a bit more complicated because of Categories names (Metal categories collection).

You are running in the problem similar too one that I explained above

Here is what your filtering buttons will look for:

And here is what automatically script will create from that category names:

For example, Category 14 karat rødguld will become class .14, it is how script working

1.

For fixing this problem add one more field in the Metal category collection as I explained in the other comment, then use that field data for binding to the .categ text field.

2.

Next step - adding same hidden field inside the Filtering menu, next to the buttons.



3.

After binding add combo-class .hidden to the categ field

4.

Change script in one place:

Instead of a property change it to the .categ.

Should work after that.

Best,
Anna

1 Like

Hi @sabanna!

I have an issue similar to others but can’t seem to figure it out. I tried to hire someone but can’t find anyone willing and would happily pay for your time.

I am trying to use dynamic filtering combined with the checkbox filtering.

The page I am testing is here:
http://cerimani-new.webflow.io/our-collections/view-all

Read-only link (go to ‘view all’ page)
https://preview.webflow.com/preview/cerimani-new?preview=e42b4d605338c06b9dc44c905a1a2942

I have been messing with these filters for 2 days now and my brain is fried. I think part of the problem is that there is an extra layer between #container and the .mix item, but I had to do that so I could add multiple dynamic categories. There’s also a chance I messed some other things up when trying to combine the checkbox filtering script with the dynamic script.

I truly appreciate any help you can offer and like I said, I’m sure you’re busy so would be happy to pay for your time. I am losing my mind here, lol.

1 Like

@sabanna i have a question! Can i mix different types? a need a dropdown and a dynamic embed to filter the same container!

1 Like

Dear @sabanna, its time to give some compliments… ok, its just a start… i only tried the Number 1 sample… But even this guy… as no-coder… could work easily with this tutorial! Many Many Many Thanks
http://autobestickering.webflow.io/

Site is stil in progress…

2 Likes

@sabanna This is such an awesome tutorial!! Thank you so much. Do you think there would be a way to use the checkbox filtering for Dynamic Content? That would be incredible!!

1 Like

Hello, @Toby_Parmenter

Yes, it is possible to combine Checkbox filtering with Dynamic content. You just need to use the snippet that created classes from Dynamic categories and everything else build like in the Advanced filtering tutorial Filtering plugins

Cheers,
Anna

1 Like

How does this related to the Isotope method? Is this MixitUp a “better” method for filtering CMS content?

Thank,

1 Like

Hi, @eric594

Isotope (https://isotope.metafizzy.co/) and Mixitup (MixItUp | KunkaLabs) just 2 different plugins, created by 2 different people/teams. They are basically solving similar problems: filtering and sorting content.

When I was creating the tutorial MixitUp Documentation was more clear to me so I used it. You still can use any of these plugins with CMS content, I just can’t provide Isotope step-by-step tutorial for now.

Best,
Anna

2 Likes

Hi @sabanna. Thanks a million for your tutorial here. I’ve made it almost the whole way. What I’m trying to figure out is how to populate my dropdowns with the dynamic content. I’m filtering via country and month and it works fine, but I have to manually write the options for the dropdowns in the designer.

tldr; How do I populate multiple (two) dropdowns with filter categories from dynamic content?

Link here: https://preview.webflow.com/preview/alfredevents?preview=cdc85bffc8352b5da417da752aa0041e

1 Like

Hello everyone! I am very excited to tell you the news. Since the MixitUp released a new version of their plugin MixitUp3 I felt a bit obligated to re-fresh earlier provided information and started a new series of the tutorials. :metal:t3::slightly_smiling_face:

Please, check up a new tutorial site on http://mixitup-webflow-tutorial.webflow.io

Currently, there are only Basic Filtering and Sorting and Filtering with CMS content, I am actively working on putting together example for creating Multifilter (what previously I called “multidimensional filtering”)

Stay tuned :smile: and thanks to everyone for trust in my tutorials! It is a great feeling to know that I can help you :heart_eyes:

3 Likes

Trully amazing tutorial ! Thank you @sabanna ! :ok_hand:t2::sunglasses:
Looking forward to the multi-filtering one… with dynmic CMS ? :slight_smile:

2 Likes

Hey @sabanna , any estimated date for tutorial for muli-filtering? Thanks so much!

2 Likes

Hello everyone, again!

My apology for the delay… But I am very excited to announce that full tutorial is ready!
I tried to do my best and I hope I was able to explain all the process of creating complex filtering on your project.

https://webflow.com/website/mixitup-webflow-tutorial

Now you can find a detailed step-by-step manuals for:

  • Basic Filtering and Sorting
  • Filtering and sorting with CMS
  • Different types of elements for controls
  • Complex Multidimensional filtering

Disclaimer: I am NOT affiliated anyhow to the MixitUp and created this tutorial ONLY for sharing my knowledge and experience of using it within Webflow projects

8 Likes

First of all thanks for sharing your valuable knowledge with the community, in mi case that’s been crucial to my project. Everything was going fine with “FILTERING AND SORTING CMS CONTENT” using buttons as controls, but when I tried to implement the select-dropdowns control or checkbox controls, didn’t work at all. I’ve followed step by step all your directions and nothing seems to work. Can you help me with this little detail please?
Here is the link: http://multidimensional-filtering-cms.webflow.io/
Thanks,
Camilo

1 Like

Hello, @Camiloguzvel!

Thanks for the feedback, I am happy to help!

It seems you have an extra characters in the code, that should be removed:

It’s probably “leftovers” from the copy-paste of the code from the tutorial :woman_facepalming: I will make sure to remove them as well

Best,
Anna

1 Like

Hi @sabanna,
Thanks for your promt response.
I have made the changes you sugested but still not working. Im afraid that must be a minimum detail i have missed. Let me know if you need anything else that i can help.
Thank you so much,
Best,
Camilo

2 Likes

One of your items does not have a category applied and it is breaking the code’s logic.

If that item should not have any “Intervention technique” applied, I would recommend create option “none” in the list of those technics and use that option.

If this approach is not acceptable then replace

25%20PM

with this code:

  // Reusable function to convert any string/text to css-friendly format
  var conv = function (str) {
  	if (!str) { 
    		str = 'none';
    	}
    return str.replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, '')
    		   .replace(/ /g, "-")
               .toLowerCase()
               .trim();
  };

Also, If you are not planning to use Sorting you can remove these lines:

25%20PM

1 Like

Wooow! thank you so much Sabanna!! with changing those lines of code worked perfect! Finally I will be able to use the multidimensional filter :smiley:

Can you tell me what changes you made in those lines of code? I am not a pro coder lol

Best,

Camilo

2 Likes

These lines are returning text “none” if there are no text inside the .category div
59%20PM

1 Like

Hello everyone!

First of all I want to thank you all for the feedback on my tutorials and also helping me to find “weak spots” in it! Our amazing community as always helps to make everything better :heart_eyes:

Recently I have been introduced to the case where:

Category name for the filtering would start with the digits or whole Category name would be a number itself

And since we are converting those names into classes, it would violate the CSS syntax rules (CSS classname can’t start with a digits) and break the filtering logic.

So, if you have a similar situation in your project, here is the solution:

add these 2 lines of code inside the snippet that responsible for the “Creating dynamic classes” to make sure that any classname that starts with the digits will get a prefix applied to it. And of course, don’t forget to add that prefix when you set the values in the filtering controls.

33%20AM

So now that snippet will look like that:

      // Creating dynamic elements classes from their categories:

      var catArray = document.querySelectorAll('.w-dyn-item .categ');
      catArray.forEach( function(elem) {
        var text = elem.innerText || elem.innerContent;
        var className = conv(text);
        if (!isNaN(parseInt(className.charAt(0), 10))) {
            className = ("_" + className);
          } 
      	elem.parentElement.parentElement.classList.add(className);
      });

I will make sure to include all recent changes into the tutorial as well!

Thank you all for the support and awesomeness! :heart:

4 Likes