Sort

Sort Items in a Collection List based on text content inside the Item
Scroll
Scroll
Scroll
Scroll
Scroll

Use cases

Set up custom sorts for users to control the data
Allow users to filter by Category, Service, Color, or any filter group you want.
Allow users to sort through items after they've applied filters
Allow users to find exactly what they want in a long list of Collection Items.

How to use it

Paste before </body> tag of the page you're working with.

<!-- F'in sweet CMS Library for Webflow -->
<script src="https://cdn.finsweet.com/files/cmslibrary-v1.6.js"></script>

<script>
// immediately/self invoked function. This function executes right away
(function() {
  // create a new Library instance and store it in a variable called "customBlogPosts"
  var customBlogPosts = new FsLibrary('.blog-posts-list')

  // run the sort Library component on your instance
  
customBlogPosts.sort({
    sortTrigger: '.sort-button', // class of the button........
    sortReverse: true, // if you want sort first click to be Z>A.......
    activeClass: 'active', // class that styles the active state
    animation: {
      duration: 0,

    }
  })
})();
</script>

Copy code

Code explanation

customBlogPosts

The variable we created to store our Library instance. The name of the variable can be set to whatever you want.

sortTrigger

The class of the button that will be used to filter items. Clicking this button triggers the sort on your list.

sortReverse

Option to make the initial sort click reversed.

true = sort Z > A on first click
false = sort A > Z on first click

If your list is already sorted from A > Z and sortReverse is false, nothing will happen on the first click.

activeClass

The class that will be added to buttons when they are in an active state.

animation

Option to add animations and transitions for items leaving and entering the filtered grid.

enable

~true~ turns on animation on, ~false~ turns animation off (default: ~true~).

duration

Time the animation happens in seconds. ~0.2~ would be 0.2 seconds, or 200 milliseconds (default: ~0.2~).

easing

Easing of the effect. Available options are ~ease~, ~ease-in~, ~ease-out~, and ~ease-in-out~ (default: ~ease~).

effects

Add ~fade~, ~translate~, ~rotate~, and ~scale~ effects (default: ~fade~).

sort-by

The data-attribute placed on the ui element to tell the Library what to sort by when that ui element is clicked.

This does not need to match the text of the button. It is not associated with any CSS style. Whatever you want to sort-by must be in the Collection Item and must match the value of sort-by.

Data-attributes

Apply a sort-by data attribute to each filter button

We need to tell the Library what button is triggering the sort and what it should sort by.

~Name~ is always ~sort-by~.

~Value~ is the class of the text that button will filter by.

If you are filtering by the year, give a class of ~.year-text~ to the text element.

Types of html elements we can use to sort

<div></div>
'sort-by' is applied directly to the <div></div>.
<a> (link)</a>
'sort-by' is applied directly to the <a></a>.