MixItUp3 is a dependency-free library for animated filtering and sorting. Great for managing any categorized or ordered content like portfolios, galleries and blogs. Can be used both with static and dynamic content. More information you can find on the official site.
This tutorial shows how to create a simple Filtering and Sorting of your Dynamic collection.
To filter our Dynamic content, each Item in the Collection need to have some sort of Category, that we can use for creating a specific combo-classes (selectors) in a further steps.
For this purposes you can use:
You can also create a several categories fields, if one Item in your item may belong to several categories.
Important!: Do not use Multireference field for this plugin purposes, it is not gonna work.
As I mentioned in a "Basic Filtering and Sorting" tutorial, MixItUp function will look for a div with the specified selector name and filter elements inside of it that matching the selector .mix, so give classnames to the Collection List and Collection Items accordingly.
TIP: More detailed layout structure was described in the "Basic Filtering and Sorting" tutorial.
For creating specific selectors from categories, first we have to add any typography element inside the .mix Item, give it class .categ (or any other classname that you need/want), and bind it to the Category field from the collection item.
After that, we will include a specific code snippet in to the custom code area before the closing </body> tag, in the page settings.
This snippet is checking each collection item for the child element with selector name .categ and converting text from that element into a class name (accordingly to a CSS rules). Then, newly created class getting applied as a combo-class back to the parent element.
Important: This code snippet also covering situations when category contain more than one word. For example, category "Greatest hits of 80's" will be converted to a greatest-hits-of-80-s.
If, in your structure, the category element in not a direct child of the .mix item , make sure to add one more .parentElement parameter for each "level of nesting", in the bottom line of the snippet.
In my tutorial example I used categories: filter-1... filter-5 and created classes accordingly.
For creating a specific data attribute for each collection item we can use the method that we used in the previous step. But this time we do not need all process of text's converting, and instead of class name we will apply the data-order attribute to the parent element.
Now we have all required parameters for filtering and sorting being applied to our CMS content.
Controls for this example will be build similar to Basic Filtering and Sorting tutorial:
This example above is fully functional, feel free to try Filtering or Sorting.
Similar to the example with Basic filtering, we have to include that link to the MixitUp library and few lines of code that are enabling MixitUp function on the container via <script> tags before the closing </body> tag into the page custom code area.
Full code will look like this:
Now our "mixer" with dynamic content is installed and ready to use. 🎉🎉🎉🎉🎉🎉🎉🎉🎉