[TUTORIAL] MixItUp filtering plugin with Dynamic content

**UPDATE:**

Since the MixitUp released a new version of their plugin MixitUp3 I started a new series of the tutorials. Please, check up a new tutorial on http://mixitup-webflow-tutorial.webflow.io

________________________________________________________________

Hello, guys and gals! :smiley:

Finally, I had some free time and put together the tutorial how to use MixItUp jQuery plugin for filtering Dynamic collections in Webflow.

It can be used for images, blogposts, articles or anything that you need to categorize :slight_smile:

Most amazing in this, that with help from @bartekkustra we were able to set filtering buttons to be dynamic too. So now, when you are adding new category and new items it will automatically appear in the filters and content.

I tried to write it as much detailed as possible, but feel free to ask if you have any questions.

All information, code snippets and examples you will find here:

You are welcome to clone this tutorial and use it for your projects. But DONā€™T FORGET that using MixitUp for non-personal projects required PAID LICENSE.
https://webflow.com/website/mixitup-filtering


UPD: Since there were many situations when dynamic item structure was different from what I have in my tutorial, here is a little explanation how it will affect the code snippet:

In the code snippet, we are taking the text from the node CATEGORY and creating a class for its PARENT NODE. So if you move CATEGORY deeper inside the Dynamic item structure, you will have to add one more .parent() parameter for each ā€œlayerā€

55 PM

05 PM


Best regards,
Anna

18 Likes

Wow! Awesome work @sabanna as always! :smiley:

Thanks!!

3 Likes

You are welcome, @aaronocampo :smile: Waiting to see new awesome works with using this technic <3

1 Like

Hi @sabanna!

Great work! It looks really cool and works smoothly :slight_smile: Do you think is it possible to make mixitup - select with dynamic content? There is no need to add categories with CMS, only elements. It would be an awesome solution for estate agencies <3

Cheers!

2 Likes

Hi, @MaciejIVE

It is more complicated.

We still will need some tags or categories for filtering dynamic content. But in this case, it would be not reference, but MULTIREFERENCE field.

The problem that I didnā€™t try using this snippet :point_up: for applying several classes to one dynamic item, for creating filtering in several dimensions.

1 Like

Ok, @MaciejIVE

Good news: code works just fine! :slight_smile: But I was wrong about Multireference field. You will have to use several reference fields connected to one or several collections with categories or tags or whatever dimensions should filter use. Then just add several text fields with same class (I used .categ) and everything should work.

PS: Select fields will NOT be dynamic.

Cheers,
Anna

1 Like

Thank you for your reply @sabanna,

we have just figured it out and our solution works too. Probably I will make a tutorial some time but now Iā€™m really busy.

Cheers!

2 Likes

Hi, @sabanna

Iā€™ve always loved the technics you provide, thank you!
Iā€™m trying to use this technic on my site, but I must have missed something,
I couldnā€™t apply it successfully.
A friend told me that he checked with google inspector to see where I didnā€™t get it right,
he said I didnā€™t create dynamic items classes from its categories (for the items).
But Iā€™m sure that I change the class name of my itemā€™s category to ā€œcateg.ā€ and the codes look the same.
Can you help me out? Thank you very much!!

Here is the read-only link :
https://preview.webflow.com/preview/yourshizuoka?preview=563f89af0a479610488e2e7d066b0044

hereā€™s the code I use on my site settings (before </body> tag:)

<script>
	//Creating dynamic items classes from its categories (for the items):
	$('.w-dyn-item .categ').each(
      function(index, element) {
        var _this = $(element);
        var text = _this.text();
        var select = text.indexOf(' ') == -1 ? text.length : text.indexOf(' '); 
        var className = text.substr(0, select);
        _this.parent().addClass(className.toLowerCase());
      }
    );

  	//Adding data-filter attributes for dynamic filters (for the categories):
    $('#dyn-filter-menu > div').each(
        function() {
            var catName = "." + $(this).children('a').text();
        $(this).attr('data-filter', catName.toLowerCase());
    });

  	//Initializing MixItUp plugin when page is loading:
    $(document).ready(function() {
            $(function(){
                $('#container').mixItUp(); 
        });
      });
  
</script>

ps. Iā€™m still trying to solve the issue, so Iā€™m currently editing the site,
but Iā€™m sure when I set the ā€œ.mixā€ class to display:none, it is still not workable.

Kind Regards,
Klio

1 Like

Hi, @Klio_Peng

You have to have ā€œ.categā€ field as a child of ā€œmixā€ item, and in your case, it is a grand-grand child :slight_smile: I understand that you needed it for showing category on the item card.

All you need to do is add one more ā€œ.categā€ text field, then you can add subclass ā€œhiddenā€ and make it display: none

Regards,
Anna

3 Likes

Hi, @sabanna

That is exactly the problem!! Thank you ^^
my friend helped me solve the problem by changing the code,

// Creating dynamic elements classes from its categories:
$('.w-dyn-item .categ').each(
  function(index, element) {
    var _this = $(element);
    var text = _this.text();
    var select = text.indexOf(' ') == -1 ? text.length : text.indexOf(' '); 
    var className = text.substr(0, select);
    _this.parent().parent().parent().addClass(className.toLowerCase());
  }
);

adding .parent().parent() will indicate adding categories to its great great grandfatherā€™s class name

both way can do~ thank you for telling me another solution!! :smiley:

Cheers,
Klio

2 Likes

Hi, @sabanna
Thank you for your great tutorial.
Iā€™m trying to use this technic on my site, however I am not getting it to work for some reason.
Would you be kind enough to point out what I am doing wrong? I have checked it many times, but I canā€™t figure out what is going wrong.

Here is the read-only link : Webflow - EF Coaching

Here is the published site: Para Coaches

Thanks!
Yon

1 Like

Hello, @Yon_Belausteguigoiti

The problem that you are experiencing can be fixed by changing category names.

Now each of category contains 2 words and each starts from the same word. The script that converting category names to classes (for filtering purposes) read the 1st word only, that is why all your dynamic elements getting same class and filtering doesnā€™t work.

I would recommend adding one more field in the Category collection: ā€œCategory-filter-nameā€ and add there some unique names, by using only one word. For example: ā€œtodosā€, ā€œempresasā€ and ā€œcoachesā€.

Then use that field data inside the Dynamic item.

Hope it helps. Let me know if you still have some questions.

Cheers,
Anna

1 Like

Thank you Ana! That did the trick.
Is there a way to have the link text be the name of the category (para coaches), but make it filter by the ā€œfilter-nameā€ (coaches). I tried having both inside the filter div and not show the ā€œfilter-nameā€ but that breaks the links.
Is there a way to accomplish this?

Thanks!
Yon

1 Like

Of course, @Yon_Belausteguigoiti

Just change the field that you are connecting to the Filtering buttons (links)

It will NOT AFFECT all filtering :slight_smile:

Cheers,
Anna

1 Like

Hi @sabanna

Finally, I think I found what I was looking for. Thank you so much!

But it is a little difficult to follow since there is a lot of technical stuff involved. :slight_smile:

Do you know if itā€™s possible to implement advanced filtering with dynamic content? Also, in place of checkboxes is it possible to use buttons?

Here is the page where Iā€™m trying to implement advanced filtering - http://toft-jessen.webflow.io/jewelry/gold

And here is the preview link - https://preview.webflow.com/preview/toft-jessen?preview=7539c9296bf1e804261ad1de45e91218

Could you please help me?

Thank you so much!
Ravi

1 Like

Hello, @rkoomera. My apology for the delayed answer.

The task that you want to archive is complicated but possible to do. Unfortunately, I canā€™t give you the simple step-by-step manual cuz it will definitely take some tweaks, but I can give you some advice:

  1. For apply several categories to one dynamic item, you will need several reference fields, connected to the ā€œCategoryā€ collection, DO NOT USE MULTI-REFERENCE. And, of course, you will have to use code snippet from the tutorial about Dynamic content filtering

  2. You can style labels as buttons and hide checkboxes. It will require some changes in HTML&CSS, but then you will not have to change JavaScript code

  3. You can use tags button instead of input and remove of labels too. But then you will have to change the code, that makes filtering work.

If you are totally not familiar with coding then probably it will be easier for you to hire somebody for this particular piece of work.

Cheers,
Anna

1 Like

Thank you @sabanna

I will try this solution and let you know if it worked.

2 Likes

Hi @sabanna, Like you said itā€™s getting complicated to implement the advanced filtering. Instead, Iā€™d like to go with the what you built into your mixit up website.

I followed all the steps on your website, and it worked to some extent. But it does not look like Iā€™m seeing the right results after clicking the filter button. Can you please tell me if Iā€™m missing anything?

Here is the preview link - https://preview.webflow.com/preview/toft-jessen?preview=7539c9296bf1e804261ad1de45e91218

Link - http://toft-jessen.webflow.io/jewelry/pear-earrings

Thank you so much!

1 Like

Hi, @rkoomera

IT looks like mix item is still visible, even that there is setting diplay:none

Reapply this setting to the mix-item and it should start working

1 Like

Hi @sabanna,

Thanks for looking into it. Now it does not display anything when I click a button.

1 Like