Sort and Filter content
on Webflow with MixitUp3

Filtering and Sorting CMS content

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

STEP 1.

Collection list
.container
Collection Item
.mix
Collection List Wrapper

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.

STEP 2.

.mix 
.
filter-2
Category ::
filter-2
.mix 
.
filter-3
Category ::
filter-3
.mix 
.
filter-1
Category ::
filter-1
.mix 
.
filter-2
Category ::
filter-2
.mix 
.
filter-4
Category ::
filter-4
.mix 
.
Category ::
.mix 
.
filter-4
Category ::
filter-4
.mix 
.
filter-5
Category ::
filter-5
.mix 
.
filter-1
Category ::
filter-1

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

For example:

  • element .categ is a direct child of an item .mix :
  • element .categ is nested in one more element inside of an item .mix, one more .parentElement parameter is required:
elem.parentElement.parentElement.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

STEP 3.

.mix 
.
filter-2
Designers Who Changed the Web
.mix 
.
filter-3
Web Design Blogs You Can't Miss
.mix 
.
filter-1
The History Of Web Design
.mix 
.
filter-2
Best Examples of Beautiful Blog Design
.mix 
.
filter-4
Quick Tips About Blogging
.mix 
.
Tools For Web Designers
.mix 
.
filter-4
Usability And Accessibility
.mix 
.
filter-5
7 Things About Web Design Your Boss Wants To Know
.mix 
.
filter-1
Principles Of Effective Web Design

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.

STEP 4.

.mix 
.
filter-2
Designers Who Changed the Web
.mix 
.
filter-3
Web Design Blogs You Can't Miss
.mix 
.
filter-1
The History Of Web Design
.mix 
.
filter-2
Best Examples of Beautiful Blog Design
.mix 
.
filter-4
Quick Tips About Blogging
.mix 
.
Tools For Web Designers
.mix 
.
filter-4
Usability And Accessibility
.mix 
.
filter-5
7 Things About Web Design Your Boss Wants To Know
.mix 
.
filter-1
Principles Of Effective Web Design

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.



STEP 5.

Open this example in a new tab

This example above is fully functional, feel free to try Filtering or Sorting.

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