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.
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.
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.
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/
@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!!
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
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.
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?
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.
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 and thanks to everyone for trust in my tutorials! It is a great feeling to know that I can help you
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.
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
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
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
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
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:
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
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.
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!