Sort and Filter content
on Webflow with MixitUp3

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.

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

‍

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

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

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> </script>tags before the closing  tag into the page custom code area.

Full code for his example will look like this: