[TUTORIAL] MixItUp filtering plugin with Dynamic content

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

Hi @sabanna!

Your tutorials here are AMAZING! Thank you for all the time you put into them :raised_hands::smile:

I’m in the final stages of setting up multi-dimensional filtering of CMS items using checkboxes, and have followed your steps obsessively closely to recreate it.

However, I’m not sure why it’s not currently working. I’ve triple-checked everything and have re-read each tutorial twice :sweat_smile:

If you get a chance, would you (or anyone else who knows what’s going on) mind having a look for me?

Read only link: https://preview.webflow.com/preview/houseofmovement?utm_source=houseofmovement&preview=d9a2be916c234a62333f418336135548

The page in question is “Directory”.

Thanks so much in advance :blush:

1 Like

Hi @JamesDaly! Thank you for the feedback!

Could you try to remove this line and republish site?
CloudApp

1 Like

Wow, such an incredibly fast response, thank you @sabanna :smile:

I’ve removed and re-published, unfortunately no change

1 Like

You might also want to adjust the value for the data-value attribute
CloudApp
CloudApp

1 Like

Ah I see, that pesky slash making things difficult.

Cool, I’ve updated that in the checkbox attribute:

16%20pm

1 Like

1 Like

You’ve done it! Thank you SO much! I literally jumped up and down with happiness when I saw it working haha thank you for all of your help, and for making these tutorials in the first place :smile:

4 Likes

Dear @sabanna, may I kindly ask you extend your super awesome tutorial with masonry like this?: https://codepen.io/creotip/pen/QyeNYM

Thanks your very much! :pray:

1 Like

Hi, @berot3!

Just use this tutorial for create layout :slight_smile:

2 Likes

Hi @sabanna - thank you for a great tutorial! Have you considered also doing a pagination tutorial? And do you know if it’s possible to use the pagination plugin (Get Started – MixItUp Pagination Docs | KunkaLabs) together with the MixItUp MultiFilter plugin?

1 Like

Hi, @CasperKp!

Yes, their pagination is pretty easy can be implemented along with any type of filtering. It only requires buying separate license and adding few additional lines of code. I will consider creating a separate page explaining how to do that on the tutorial site.

1 Like

Hi @sabanna.

Thank you and sounds good :blush:

1 Like

Hey @sabanna

Would love if you could answer some questions based on your knowledge for a project I have with 100s and 1000s of CMS items inside of collections.

  1. Is the Mixitup plugin limited to filtering the 100 items displayed within a collection list?
  2. If not, can Mixitup controls filter multiple collection lists on the same page?
  3. Simalar question to above, is the Mixitup pagination also limited to display a paginated # of items within the 100 displayed items collection list limit?

Appreciate any answers. Thanks.

1 Like