Sort and Filter content
on Webflow with MixitUp3

Preparing Item structure for future filtering

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:

• either Reference field (if your categories are dynamic too)

‍

• or Option field (if categories are static).

‍

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.

Turning "categories" in to combo-classes

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  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 closest ancestor element with class mix.

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.
‍

elem.closest(".mix").classList.add(className); 

In my tutorial example I used categories: filter-1... filter-5 and created classes accordingly.

TIP: If in your design/structure a category element should not be visible on the item, simply set it to display:none

‍

Turning titles in to Sorting attributes

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.

Building Controls

Controls for this example will be build similar to Basic Filtering and Sorting tutorial:

• create buttons with .filter_button class for filters and .sort_button classe for sort
• apply custom data-filter attribute to each filter button
          data-filter=".filter-1"
          ....
          data-filter=".filter-5"
          data-filter="all"
  
• apply custom data-sort attributes to the sort buttons.
  Since we used data-order attribute for the our items, will need to use values order:asc and order:descending accordingly.
  

‍

Connecting and Enabling MixitUp library

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> </script>tags before the closing  tag into the page custom code area.

Full code will look like this: