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
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
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ā
Great work! It looks really cool and works smoothly 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
Good news: code works just fine! 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.
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ā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.
You have to have ā.categā field as a child of āmixā item, and in your case, it is a grand-grand child 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
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.
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.
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?
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:
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
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
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.
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?