Advanced Element Sorting
Sort Collection List in unique situations.
Such as Embedded Collection Lists, which have no sort option.
- Sorting by string or date values ( defaults to string )
- Sorting ascending / descending ( defaults to ascending )
- Sorting randomly ( on every page refresh )
Place on any Collection List directly ( not the Collection List Wrapper ). No value needed.
If you want to change the direction, add this attribute with a value of;
randomfor random ( on every page refresh )
Defaults to ascending when unspecified or unrecognized.
If you want to specify the data type of the field being sorted, add this attribute with a value of;
stringfor values that should be sorted as strings
numberfor values that should be sorted as numbers
datefor values that should be sorted as dates
semverfor values that should be sorted as semantic versions **
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
Create an HTML Embed inside of your Collection List Item, with this code;
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 to specify
date in the above configuration if you’re wanting to sort by dates.
Any other field you choose will be sorted alphabetically.
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://email@example.com/dist/css/webflow-html.css">
Add this JS reference to the BODY of your site or page.
<script type="module" src="https://firstname.lastname@example.org/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.