Sygnal Attributes | Designed for Webflow
Community ForumMicro-Consulting
Search
⌃K
Links

Advanced Element Sorting

Sort Webflow's collection list items any way you like

Overview

Webflow's collection lists have a few limitations on the native sort functionality;
  • The inability to sort on Ref fields
  • The inability to sort on Option fields
  • The inability to sort nested collection list items
  • Random sorting works well, but only changes the order every 12 hours
This attribute allows to do all of these;
  • Sort by ref & option field types
  • Sort by text, date, numbers, or even semvers
  • Sort ascending, descending or randomly ( on every page refresh )

Demonstrations

Usage Notes

wfu-sort attribute

Place on any Collection List directly ( not the Collection List Wrapper ). No value is needed.

wfu-sort-dir attribute

Sort direction defaults to ascending. If you want to specify the direction, add this attribute with a value of;
  • asc for ascending
  • desc for descending
  • random for random ( on every page refresh )

wfu-sort-type attribute

The field type always defaults to sorting as a string. If you want to specify the data type of the field being sorted, add this attribute with a value of;
  • string to sort as strings
  • number to parse sort as numbers
  • date to parse and sort as dates
  • semver to parse and sort as semantic versions **
Defaults to string when unspecified or unrecognized.
** Note that semver sorting is a numeric-only implementation of the sort rules. It is not designed to handle alphanumerics in pre-release identifiers.

Creating your Sort Key

The sort field is controlled by specifying a Sort Key. This gives you complete control over the field that is being used for sorting.
Create an HTML Embed inside of your Collection List Item, with this code;
<data wfu-sort-key=""></data>
As the attribute value for wfu-sort-key, insert the field that you want to sort by, using Webflow’s ‘+ Add Field at the top-right of the HTML Embed Code Editor window.
Remember, Sygnal Attributes will always treat your value as a string for sort purposes, unless you specify otherwise. If you want sorting to occur as a number, date, or semver, make sure to specify that attribute.

Getting Started ( NOCODE )

STEP 1 - Add the Library

There are currently no configuration options for this library, so we’ll use a no-code integration approach.
Add this CSS script to the HEAD of your site or page.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/dist/css/webflow-html.css">
Add this JS reference to the BODY of your site or page.
<script type="module" src="https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/src/nocode/webflow-html.js"></script>

STEP 2 - Apply wfu-sort and configuration attributes to the elements you want to filter

See above for details.

STEP 3 - [ OPTIONAL ] Change the default sort type ( string ) and order ( ascending ), using the wfu-sort-dir and wfu-sort-type attributes.

See above for details.

STEP 4 - Define your sort key

See above for details.

Resources

WEBFLOW-HTML - Previous
Nested Lists
Next - WEBFLOW-HTML
Advanced Element Filtering
Last modified 4mo ago