Streaming live at 10am (PST)

[TUTORIAL] MixItUp filtering plugin with Dynamic content

Hello @sabanna,

Thanks for your answer, but I’m not sure about the link you’ve checked, because on my side it’s not working.

Published link is here, and not working.

Let me know if you need more info!

Thank you!

Hey @sabanna,

I really do not want to bother you, but wanted to be sure that you’ve read my previous message.
I will understand if you’re busy (or in Holidays…) :slight_smile:

Thank you & have a nice day,
Olivier

I sent you DM that day, check your inbox, please

Hi @sabanna – or anyone else. This is exactly what I’m looking for: dynamic filter buttons that will update automatically if a category is added or removed in the CMS. However, I cannot find any instructions for how to set this up.

I’m lookind at “FILTERING AND SORTING CMS CONTENT” at http://mixitup-webflow-tutorial.webflow.io/dynamix, and step 4 only seems to have instructions for building non-dynamic controls.

I’d be happy if someone could point me into the right direction!

Hi sabana and all,
first of all, thank you so much for a great tutorial!!
however,I have a trouble with webflow cms collection limited list and I have to implement to list over
100 items in my contests section.
is there any idea and solution in this mixitup?
actually, I have seen the website made by webflow and mixitup before, to be over 100 items using mixitup multiFilter and this site is like followed site.

site

I don’t know well… I guess he can use the data-ref=“container-1” and the data-ref=“container-2” in cms collection custom attributes.
(I could see this site before, unfortunately, not this time)
I really appreciate it if somebody can inform me like this example site…

I created a separate topic where I showed a Workaround for Big collections:

Happy Webflowing :heart:

Want to try a free version using List.js?

https://webflow-free-custom-filters-tutorial.webflow.io/

@sabanna I wanted to thank you in the forum for the help you have provided with my project … I took you’re suggestion and simplified my data-values. however, I am still having an issue. could you take a look (hopefully one last time) I would really appreciate it

read only link:

Hello Anna! @sabanna :wave:
It’s me again, Gabriel.

Thanks to Your help I could move forward and tried the MixItUp multifilter function.
Unfortunately something went wrong, the filtering isn’t working. :frowning:

Would You please check again my read only link, what’s wrong with the setup? :see_no_evil:
https://preview.webflow.com/preview/gabriels-amazing-project-9f0517?utm_medium=preview_link&utm_source=dashboard&utm_content=gabriels-amazing-project-9f0517&preview=986d089f6f8fc47a8f5adf20cf993af2&mode=preview&fbclid=IwAR01tmbJFVYTkjFu5Viu3mAojuxLf-4MCpgVQQDShtDqQ_lBXSgYvA3U2hw

published site: https://gabriels-amazing-project-9f0517.webflow.io

Thank You for your time!

Gabriel

Hi, @Gabriel_Hajdok!

You simply lost the letter “n” in the URL :see_no_evil: and browser can’t get access to the file

Big thank You @sabanna for Your help. :heart_eyes: This means a lot to me.

Now the first dropdown filter is working, but the others still not. I think I missed something from your “Multidimensional filtering” tutorial, but don’t know what exactly.

Would you please check again what’s the problem? :see_no_evil:

  1. You can’t leave spaces in the values, because they should match CSS classes, any spaces should be replaced by dash (-)

  2. MixitUp automatically transforms all “special” (non ASCI) characters inside its API when you making any filter selection ( changes ü to u for example), so you will need to make sure your markup matches the sanitised version of any query.
    I will try to write a function for doing it automatically, but it will take some time.

Ok @Gabriel_Hajdok, here is what you will need to do:

  1. Change the function that I showed on the screenshot to the code snippet bellow

47%20PM

   var conv = function (str) {
    if (!str) {
        str = 'empty';
        }
    return str.replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, '')
    	      .replace(/ /g, "-")
            .replace(/[ä|à|á|æ|ã]/gi, "a")
            .replace(/[ó|ö|ô|ò|œ]/gi, "o")
            .replace(/[ü|ú|ű|û|ù]/gi, "u")
            .replace(/[í|î|ï|ī]/gi, "i" )
            .toLowerCase()
            .trim();   	
  };
  1. In all filters, replace all umlauts and accents to the “Latin” characters accordingly (examples you can see in the code snippet above :point_up:) and add dashes instead of spaces.

51%20PM

  1. Remove values from the “all” option, it doesn’t work properly with word all in the latest MixitUp API

Hi @sabanna ! So many thanks for Your help Anna, without You my project would worth nothing. :see_no_evil:
Now everything works fine, I can continue my work. :raised_hands:

Thanks again! You are an angel! :innocent:

1 Like

I have installed mix it up on my site and everything works well with one exception. When I click on the navigational buttons the images start to reconfigure and then abruptly jump up.

For example if you’re in “ALL PORTRAITS” and then you click on the “MEN“ button, once the first row populates, the lower rows snap up. It also happens when you go to “WOMEN” from “ALL PORTRAITS”. However, if you go to “CHILDREN” from “MEN” it transitions smoothly, like I would expect them all to work.

Is there anyway to make the transition smoother universally?

Here’s my share link:

https://preview.webflow.com/preview/fineartportrait?utm_medium=preview_link&utm_source=designer&utm_content=fineartportrait&preview=73defcdab4e75aaeaf2263ebd095829e&pageId=5d64026b68fbe9973e344227&mode=preview

This is driving me crazy. Thanks for any advice or assistance you can provide.

Hi, @paint.you1830!

I would try to make a duration shorter and maybe remove the scale animation. Also, did you try to use flexbox instead of grid for the container?

Hi Sabanna,

I tried many variations with both grid and flexbox. All with that dreaded snap effect. It seems that no matter what I did I would get that snapping until I finally removed all effects in the code.

04%20PM

It’s pretty frustrating because I can’t control the speed of the transition, but at least it’s consistent, although too quick for my taste. That jumping came across as buggy, at least to me. I wish there was some way I could slow it down. I tried nudge but it froze in the middle. Any suggestions?

Thanks for looking.

Read only link:
https://preview.webflow.com/preview/fineartportrait?utm_medium=preview_link&utm_source=designer&utm_content=fineartportrait&preview=73defcdab4e75aaeaf2263ebd095829e&pageId=5d7938eaf035e149601981fd&mode=preview

Hello Anna! @sabanna :wave:

I wanted to achieve the search function with multidimensional filtering. :hugs:
But somehow the searching isn’t working, only the filtering. Probably is missing something or I made a mistake somewhere. :sweat:

Would You be so kind please check the code if You will have time for a quick look? :pray:

live preview:
https://housingbudapest-283350254f6d2590fd0cd95.webflow.io/

read only link:
https://preview.webflow.com/preview/housingbudapest-283350254f6d2590fd0cd95?utm_medium=preview_link&utm_source=dashboard&utm_content=housingbudapest-283350254f6d2590fd0cd95&preview=0863370848079eac937a6a70594ff357&mode=preview

I appreciate and fully respect your time. :clap:

Gabriel

The author of the MixitUp made the search on the multi-filter only working similar to the a filter control, it search only by category and one category at a time.

Also, it require a bit different implementation and applying separate parameter to each mix-item. :woman_shrugging:

1 Like

Hi, @paint.you1830

  1. Animation by default doesn’t have a SPEED. It has a duration, you are setting up how milliseconds it will take to change certain property on the element.

For example, this code:

"animation": {
        "duration": 674,
        "nudge": false,
        "reverseOut": false,
        "effects": "fade translateY(-17%)"
    }

It means that in 674 milliseconds all this will happes, elements will

  • fade = change its opacity from 0to 100% (or from 100% to 0) and
  • translateY = move 17% up
  1. Using a Grid for the container is not recommended by the author of the MixitUp. Or at least he mentions that he didn’t include the support for that type of layout in the library. From my experience, any layout that is forcing to “hold the space for the item” will give such glitch.

I would recommend using Flex, instead of Grid, and make sure to set align-content to flex-start It will fix the problem with the animation “snapping”
04%20PM