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.
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.
It will show option "All" as an active when page with the filtering content will be loaded.
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
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
This example above is fully functional, feel free to try Filtering or Sorting.
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