โ–ผ
Streaming live at 10am (PST)

[TUTORIAL] MixItUp filtering plugin with Dynamic content


#1

**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:
http://mixitup-filtering.webflow.io/mixitup-plugin-dynamic-content

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.


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


[TUTORIAL] Advanced filtering (several dimensions)+ Search with MixitUp plugin
[TUTORIAL] Using Isotope and MixItUp plugins with Webflow
Isotope Filter + Webflow CMS - HELP?
Isotope Search & Filter + Webflow CMS
Is there a tutorial for menu on this site that sorts the posts?
Help creating drop down search filter
Adding Custom Attributes to Webflow CMS List Items
Post/Zip code form for delivery website
Isotope Filter + Webflow CMS - HELP?
Changing Collection List Item Class Independantly
#2

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

Thanks!!


#3

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


#4

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!


#5

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.


#6

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


#7

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!


#8

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


#9

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


#10

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


#11

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 : https://preview.webflow.com/preview/ef-coaching?preview=1e3f03209078e7bdf29e23d5cdd7fc84

Here is the published site: http://ef-coaching.webflow.io/servicios

Thanks!
Yon


#12

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


#13

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


#14

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


#15

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?

http://mixitup-filtering.webflow.io/mixitup-checkboxes

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


#16

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


#17

Thank you @sabanna

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


#18

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!


#19

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


#20

Hi @sabanna,

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