Sort and Filter content
on Webflow with MixitUp3

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

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

...link-to-your-source/mixitup-multifilter.min.js">

‍

2. 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','');
  });

‍

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

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.

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

...link-to-your-source/mixitup-multifilter.min.js">

‍

2. 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','');
  });

‍

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

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.

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

...link-to-your-source/mixitup-multifilter.min.js">

‍

2. 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','');
  });

‍

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