Sort and Filter content
on Webflow with MixitUp3

Multidimensional filtering

General

For build multidimensional filtering with MixitUp3 library you will have to purchase a MixitUp MultiFilter extension at the official site. It is not publicly available via GitHub or NPM and can only be downloaded from your account after purchase.

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

MixitUp MultiFilter extends the MixitUp ability to query and index groups of filter controls, known as "filter groups" and can be used with different types of controls.

Select and Radiobuttons controls allow one active control at a time. It means that user will be able to select only one option in each category. For example: show only Shirts, only for Men and only Blue color.

Checkboxes allow multiple active controls simultaneously. It means that you can setup filter to be able select several options in one category. For example: show Shirts and Hoody, for Men, available in Blue and Black colors.

MultiFilter with Select fields

STEP 1.

.controls-form 
.filter-group  (embed code component) 
.filter-group 
.filter-group 
.filter-group 
.filter-group 
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Form Block

Controls layout

Structure of the Mixer container stays the same. Required structure of the Dynamic Item and process of applying classes were described in the Filtering CMS Content tutorial.

While process of creating controls stays the same and described in a previous tutorials, layout for the controls needs additional attention.

Each group of filters (type of filter-dimension) needs to be wrapped into a div with a specific attribute data-filter-group that will be applied later.


In my example I have a collection of clothes that has 4 categories applied:

  1. Type: Simple T-shirt, Polo shirt, Hoody, Classic.
  2. Gender: Men, Women.
  3. Sleeve length:  Long, Short
  4. Color: White, Grey, Black, Blue, Light blue, Teal.

So inside the .controls-form I created 4 divs with class .filter-group and put my controls (elements with class .select_filter) in those divs.
Custom attributes data-filter-group will be applied later by additional code snippet.


One more option we need for our filter is a button for reset all filters. For this purposes we will use Embed Code component which we will give class .filter-group as well. Inside this component add an HTML code for the button:

<button class="w-button filter_reset" type="reset">Clear filters</button>
Tip: Class .filter_reset you can style on any standard Webflow button

STEP 2.

Custom code structure:

Connecting and enabling Multifilter

This process will require adding 3 new code snippet into already known structure described on the page Using Select element for controls:

  1. Once you downloaded your MultiFilter extension file, you can upload it to your Dropbox, CitHub account or other cloud service and include it in your project via a script tag, right after the main MixitUp library script.
<script src="...link-to-your-source/mixitup-multifilter.min.js"></script>

  1. Additional code snippet for applying custom attribute data-filter-group to each filter-group:
  var filterGroups = document.querySelectorAll('.filter-group');
  filterGroups.forEach( function(group) {
        group.setAttribute('data-filter-group','');
  });

  1. By default, MultiFilter functionality is disabled so that you can use MixItUp as normal, even with the extension installed. To enable MultiFilter for a mixer, you simply need set the multifilter.enable configuration option to true.
var mixer = mixitup(containerEl, {
    multifilter: {
         enable: true                 
    }
});

Important: In my MultiFilter example I didn't use sorting, but if you have, for the Sorting functionality you don't need to change anything.

That's it! Your filter should be ready.
🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉

MultiFilter with radiobuttons

STEP 1.

.controls-form 
.filter-group  (embed code component) 
.filter-group 
.filter-group 
.filter-group 
.filter-group 
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Form Block

CONTROLS LAYOUT

Radiobuttons controls will be structured the same way we did for the Select elements:

Add values to each radiobutton accordingly to classes that has been created from filtering categories, applied to mix-items. Value should contain a classname in CSS format.

Important!: Make sure to keep Group Name same for each filter-group's radiobutton.

STEP 2.

Custom code structure:

Connecting and enabling Multifilter

Similar to previous example, we will add 3 code snippets into already known structure described on the page Using Radiobuttons for controls:

  1. Once you downloaded your MultiFilter extension file, you can upload it to your Dropbox, CitHub account or other cloud service and include it in your project via a script tag, right after the main MixitUp library script.
<script src="...link-to-your-source/mixitup-multifilter.min.js"></script>

  1. Additional code snippet for applying custom attribute data-filter-group to each filter-group:
  var filterGroups = document.querySelectorAll('.filter-group');
  filterGroups.forEach( function(group) {
        group.setAttribute('data-filter-group','');
  });

  1. By default, MultiFilter functionality is disabled so that you can use MixItUp as normal, even with the extension installed. To enable MultiFilter for a mixer, you simply need set the multifilter.enable configuration option to true.
var mixer = mixitup(containerEl, {
   multifilter: {
        enable: true
   }
});

Important: In my MultiFilter example I didn't use sorting, but if you have, for the Sorting functionality you don't need to change anything.

That's it! Your filter should be ready.
🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉

MultiFilter with checkboxes

STEP 1.

.controls-form 
.filter-group  (embed code component) 
.filter-group 
.filter-group 
.filter-group 
.filter-group 
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Form Block

Controls layout

And again, Checkbox controls layout will be structured the same way we did it for the Select elementsand Radiobuttons :

For enabling multiple active selections in one category we will apply a custom attribute data-logic to the .filter-group div and make it equal "or". This way we are changing filtering logic inside one category while logic between categories remains "and".

This attribute can be applied to any numbers of "filter-groups", depends on your filter requirements.

STEP 2.

Custom code struture:

CONNECTING AND ENABLING MULTIFILTER

On the final step we will add some code snippets for activate MultiFilter (similar to previous examples) and also simplify already known code structure described on the page Using Checkboxes for controls (since we are not using "All" option and don't need the code for that)

  1. Once you downloaded your MultiFilter extension file, you can upload it to your Dropbox, CitHub account or other cloud service and include it in your project via a script tag, right after the main MixitUp library script.
<script src="...link-to-your-source/mixitup-multifilter.min.js"></script>

  1. Additional code snippet for applying custom attribute data-filter-group to each filter-group:
  var filterGroups = document.querySelectorAll('.filter-group');
  filterGroups.forEach( function(group) {
        group.setAttribute('data-filter-group','');
  });

  1. Simplifying code snippet for the checkboxes and enabling MultiFilter:

That's it! Your filter should be ready.
🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉