Advanced Element Sorting ❺
Sort Webflow's collection list items any way you like
Overview
Webflow's collection lists offer a native sort functionality, however it has a number of limitations;
The inability to sort on Ref fields
The inability to sort on Option fields
The inability to sort nested collection list items
The inability to sort content in fields within an item
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
Sort elements dynamically using a script
Additional demos
Usage Notes
Sorting is configured on two sets of elements- the parent element, which contains the list of things you are sorting, and the item elements, which are the elements being sorted.
In the case of a Collection List, the parent is the Collection List element ( not the Collection List Wrapper ), and the item is the Collection List Item element. These are the bottom two purple elements you see in a collection list element hierarchy.
If you are not sorting a collection list, any parent-item set can be configured for sorting.
wfu-sort
attribute
wfu-sort
attributePlace this attribute on the parent element, to indicate it will be sorted. No value is needed.
wfu-sort-dir
attribute
wfu-sort-dir
attributeSort direction defaults to ascending. If you want to specify the direction, add this attribute with a value of;
asc
for ascendingdesc
for descendingrandom
for random ( on every page refresh )
Place this attribute on the parent element.
wfu-sort-type
attribute
wfu-sort-type
attributeSort type always defaults to string-based sorting ( an alphanumeric sort ). If you want to specify the data type of the field being sorted, add this attribute with a value of;
string
to sort as stringsnumber
to parse sort as numbersdate
to parse and sort as datessemver
to parse and sort as semantic versions **
Defaults to string
when unspecified or unrecognized.
Place this attribute on the parent element.
Note that this library does not currently have any localization configurations, so sorting in non-English locales may not work as expected.
semver
sorting is a simplified numeric-only implementation of the sort rules. It is not designed to handle alphanumerics, such as pre-release identifiers.
wfu-sort-key
attribute
wfu-sort-key
attributeThe value to sort by is known as the sort key, and is specified as the value of the wfu-sort-key
attribute. This gives you complete control over the field that is being used for sorting, and you can use dynamic or static content.
Place this attribute on the item element.
The most common way to set the value of this field is to pull the content directly from your associated CMS item. To do that, use Webflow's custom attribute CMS binding feature to insert whatever field you want to use as the sort key for that item.
Future
Future features we're considering...
Secondary and tertiary sorting, where additional sorting rules are applied when two items are considered sort-equivalent.
Script-defined sorting, where the rules override what the attributes define.
Custom sorting rules, handled by a callback.
Script-triggered re-sorting, triggerable by script.
Used for e.g. a dropdown of multiple sort configs.
Memory of past sort settings
Option to re-init IX2
Getting Started ( NOCODE )
STEP 1 - Add the Library
First, add the library as detailed in Quick Start.
STEP 2 - Apply wfu-sort
and configuration attributes to the elements you want to filter
wfu-sort
and configuration attributes to the elements you want to filterSee 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.
wfu-sort-dir
and wfu-sort-type
attributes.See above for details.
STEP 4 - Use the wfu-sort-key
to define your item sort key
wfu-sort-key
to define your item sort keySee above for details.
Last updated