Advanced Element Sorting ❺

Sort Webflow's collection list items any way you like

Webflow's collection lists offer a native sort functionality, however it has a number of limitations;

• Alphabetic sorting is unicode-based and sorts uppercase and lowercase letters as separate ranges

  • Apple, Banana, aardvark...

• No ability to sort on Ref fields or Option fields

• No ability to sort nested collection list items

• No locale-aware sorting ability for Localized sites

• No ability to sort content in fields within an item in a de-normalized field structure

  • e.g. fields like "Faq 1", "Faq 1 description", "Faq 2", "Faq 2 description"

• Random sorting only changes the order every 12 hours

Goals

SA5 Sort allows you to naturally and flexibly sort any grouping of elements in your page, to support all of these scenarios.

1. Sort any elements, in any part of your page

2. Sort intelligently by data type - text, date, numbers, or even semver version numbers

3. Sort ascending, descending or randomly, on every page refresh

4. Sort automatically by page locale ( for localized sites ) or browser locale

Demonstrations

	Demo	Cloneable
Collection List Sorting	https://webflow-smart-elements.webflow.io/collection-lists	https://webflow.com/made-in-webflow/website/webflow-tabs-hacks
Sort by Option or Ref	https://sort-by-option-or-ref.webflow.io/	https://webflow.com/made-in-webflow/website/sort-by-option-or-ref
Locale-specific sorting	https://sa5-html.webflow.io/demo/sa5-advanced-sorting	https://webflow.com/made-in-webflow/website/sa5-html

Getting Started

1. First, add the library as detailed in Quick Start.

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

3. Optional. Change the default sort type ( string ) and order ( ascending ), using the wfu-sort-dir and wfu-sort-type attributes.

4. Optional. Use the wfu-sort-key to define your item sort key

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 = ( no value )

Required. No value is needed.

Place this attribute on the parent element, whose children will be sorted.

For a collection list, this should be on the Collection List ( middle ) element directly, not the Collection List Wrapper.

wfu-sort-dir = ( direction )

Optional. Sort direction defaults to ascending. If you want to specify the direction, add this attribute with a value of;

• asc for ascending ( default )

• desc for descending

• random for random ( on every page refresh )

Place this attribute on the element with wfu-sort.

wfu-sort-type = ( type )

Optional. Sort 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 strings ( default )

• number to parse sort as numbers

• date to parse and sort as dates

• semver to parse and sort as semantic versions ( e.g. 2.0.108.4 )

Place this attribute on the element with wfu-sort.

wfu-sort-startwith = ( item number )

Optional. When specified, starts sorting with the specified item. Numbering starts with 1. This is used for special situations.

Place this attribute on the element with wfu-sort.

wfu-sort-locale = ( setting )

Optional. Allows you to apply locale-specific sorting to a list.

EXPERIMENTAL Currently implemented on ascending string sorting only.

Setting is one of;

• none ( default ) - No locale-specific sorting applied

• auto - Locale is determined from the HTML lang attribute, which is automatically set in Webflow Localized sites

• ( language / locale code ) - You can specify a specific language code like en or locale code like en-US

Place this attribute on the element with wfu-sort.

wfu-sort-key = ( sort key value )

Required. The 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.

Place this attribute on the item element.

In a collection list, this would the Collection List Item, which is the 3rd, innermost part of Webflow's collection list 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.

At this time, Webflow's ECommerce collections do not support binding fields to custom attributes.

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

• Support for ECommerce, which does not support attribute bindings