Sort and Filter content
on Webflow with MixitUp3

Using Checkboxes for the controls
‍

Using checkboxes for controlling Filtering  of your Dynamic collection has its own benefits and allows you to create a "combined filtering" (it is not a multi-dimensional filtering). It can be setup with two different type of filtering logic. 

‍

  1. "OR" logic - show all items that belongs to one category OR another. For example, selecting both Filter 1 and Filter 2 checkboxes would all show items that have category "Filter 1" OR "Filter 2".
    ‍
    Important: With each next selected checkbox filter will show items that have at least one of selected categories.
    ‍
  1. "AND" logic - show only items that belongs to one category AND another category at the same time. For example, selecting checkboxes Small an Sunlight will only show items that has category "Small" AND "Sunlight" applied to it.

    Important: With each next selected checkbox filter will look for the items with all selected categories applied at the same time.
    ‍

Required structure of the Dynamic Item and process of applying classes were described in the Filtering CMS Content tutorial.

STEP 1.

Form Block
.filter_wrap 
.controls-form 
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
.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 using Checkbox elements

After container with Dynamic Items was created and all necessary classes (for filtering and sorting) were applied we can start building our Controls. For being able to use checkbox elements we have to put them inside the Form.
‍

Note: Process of creating controls for both types of logic (OR or AND) is similar.

‍

  • Add a Form to the page (has classname .controls-form in this example).
    ‍
  • Create .filter_wrap div inside the Form
    ‍
  • Add checkboxes with .filter_check class. Number of checkboxes should be equal numbers of filtering categories we have, plus one more for "All" option.


‍

  • All checkboxes will have a values that are equal to a classes created from a filtering category and applied to the mix-items. MixitUp will read values from the "checked" checkboxes and create a certain filter based on a type of selected logic.
    ‍
  • By default, Webflow doesn't have a "value" option for checkboxes. But we can apply a custom attribute data-value to each checkbox input element that represents a filtering category. Later we will "transform" them into a standard CSS attributes.
    ‍
    Important: Values of these custom attributes should look like a classname in CSS format (with "dot").

‍

  • For the checkbox with option "All", set the data-value custom attribute equal all (without "dot") and set the option "Start Checked" as active.

‍

STEP 2.

custom code and MIXITUP API FOR checkboxes

Custom code for this type of controls look most complicated, but if imaginary divide it into 4 parts it will be not so scary.

  • In 1st part we define our container for filtering, filter_wrap where all our checkboxes then specifying which exact elements (inputs) has values for filters.

    This little code is also creating standard CSS property value from custom attributes data-value:
‍
Important: if you created checkbox structure by by embedding HTML code to the page, you do not need this part.
‍
  • ‍2nd part, similar to the Example with using radiobuttons for controls, will bind a 'change' event to our checkboxes. It also handling check/uncheck functionality for the option "All": when any of categories is selected option "All" will be unchecked automatically, and if option "All" was selected then all other checkboxes will be unchecked.

‍

  • In 3rd part of the code we define the filtering logic that we want to usefor our checkboxes:

Coma for the "OR" logic

var selectorString = selectors.length > 0 ?
selectors.join(',') : 'all';

Empty string for the "AND logic

var selectorString = selectors.length > 0 ?
selectors.join('') : 'all';

‍

  • Last 4th part just calls .filter() API methon on a mixer container

‍

STEP 3.

You can open examples with the "OR" logic and "AND" logic in a new tabs

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

Connecting and Enabling MixitUp library

Now we will include link to the MixitUp3 library and all our code snippets inside the <script> </script>tags before the closing  tag into the page custom code area.

Full code for this example will look like this: