Sort and Filter content
on Webflow with MixitUp3

Using Radiobuttons for the controls

This example shows how to use radiobuttons for control Filtering and Sorting of your Dynamic collection

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

STEP 1.

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

RADIOBUTTON ELEMENTS for Filtering Controls


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 radiobutton elements we have to put them inside the Form.

  • Add a Form to the page (has classname .controls-form in this example).
  • Create .filter_wrap div inside the Form
  • Add radio-buttons with .filter_radio class. Number of radiobuttons should be equal numbers of filtering categories we have, plus one more for "All" option.
  • 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.

    For example, if you have a category "Best products", code snippet that we used in the Filtering CMS Content tutorial would convert it into a best-products string.
    It means that value for radiobutton that will filter items with this category should be equal .best-products (with "dot")

    Important!: Make sure to keep Group Name same for each radiobutton.
  • For the radiobutton with option "All" set the Value equal all (without "dot")
  • Inside that radiobutton block select the actual radiobutton input element and add the custom attribute in the settings panel:

It will show option "All" as an active when page with the filtering content will be loaded.

STEP 2.

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

Radiobutton elements for sorting controls

  • Inside the same Form create a div with class .sorting_wrap
  • Add two radiobuttons with classname .sort_radio, for Ascending and Descending orders.
  • Add values order:asc and order:desc to Ascending and Descending sorting radiobutton accordingly

STEP 3.

Making radiobutton labels clickable

Currently, Webflow is automatically applying id for each input element and attribute for to its label, generated from the value. This setup is required for making label "clickable" along with the input field.

The fact that our values were set as CSS classes might interrupt the HTML structure of our page during the filter request.

To avoid this issue we will need to add the code snippet that converts the text inside the label into id and for attributes for each radiobutton

STEP 4.

using MIXITUP API FOR RADIOBUTTONS

In first part, similar to the previous Tutorial, we have to declare the reference to the mix container (class .container) , div with filtering radiobuttons (class .filter_wrap) and div with sorting radiobuttons (class .sorting_wrap).

To make MixitUp react on radiobutton get clicked, we must bind a changeevent handler to our radiobuttons, and then interact with the mixervia.filter() and .sort()API methods

STEP 5.

Open this example in a new tab

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

Put all snippets together

Similar to the example with Basic filtering, we have to include the link to the MixitUp library and all required code snippets via <script> tags before the closing </body> tag into the page custom code area.

Full code for his example will look like this:

Now our dynamic content can be filtered and sorted by selecting radio-buttons
🎉🎉🎉🎉🎉🎉🎉🎉🎉