In Beta - 0.5.1

Docs

An overview of how it works

Essentially, Sift implements a dynamic filtering, sorting, and loading system for Collection items. It uses "tags" (text elements with specific attributes) within Collection items to identify and filter/sort matching items based on user input. The code evaluates whether these tags match the input in the filters. It then displays matching results and hides the unmatching ones in real-time.

We can filter by searching, selecting an option, and checking a checkbox. The sort functionality works by selecting an option. You can use one or all of these.


Getting Started

The UI setup

Webflow

1 - If you are on Webflow, you can copy the component on the website below:

SiftCMS UI Starter

2 - Then add a Collection List on your page like you normally would.

3- Finally, copy and paste the script before </body> tag of your page:

<script src="https://siftcms.b-cdn.net/script-v0.5.1.js"></script>

Webstudio

1 - In Webstudio, you can clone the whole website, which include the filter all set up:

SiftCMS UI Starter

2 - Copy and paste the same script into an HTML Embed. Make sure it is the last element of your page and toggle "Client On" on the Embed settings.

<script src="https://siftcms.b-cdn.net/script-v0.5.1.js"></script>

Linking UI with Attributes

1 - On your Collection List element, copy and paste these custom attributes:

*If the value field is empty, the default value will be active.

sift-cms-items
=
true
sift-items-to-show
sift-scroll-threshold

sift-cms-items

Tells the code to identify the Collection List in which the items can be filtered or sorted.


sift-items-to-show

Tells the code the number X of Collection Items that will load initially. After X, the rest of the items will load in chunks of X as the user scrolls down.

Ex: If X is equal 6, it will show 6 items. When user scrolls to the bottom of the page, it will show 6 items at a time. If it hits the bottom again, it will keep showing 6 more, etc.

Default value: "6"


sift-scroll-threshold

Tells the code the distance from the bottom that the user needs to scroll so it shows the next items. It can be any value in pixels.

Ex: sift-scroll-threshold="300"

Default value: "100"

2 - Let's first review the filter attributes on the elements in the copied component from the UI Starter, and link them with their respective tags that will be on the Collection Items.

Component
sift-search
=
any-string-1
The search input field.

To pair with the tag, it must have matching values. If there are multiple search fields in the filter, then each search attribute must have a unique value, and the tag you want to pair with must have this same value.
sift-select
=
true
The select field for filtering.

Inside it, it will have multiple <option> elements. Each <option> must have an attribute value=”name-of-the-attribute”.

To pair with the tag, it must have matching values. If there are multiple select fields in the filter, then each select attribute must have a unique value, and the tag you want to pair with must have this same value.
sift-checkboxes
=
true
The parent of the checkboxes for filtering.

Each checkbox must have a label with a for attribute. It will be this for value text content that will match the data-checkbox-tag.

Also, make sure each checkbox element has an id and name that has the same value as the for you gave to its respective label.

To pair with the tag, it must have matching values. If there are multiple checkboxes fields in the filter, then each select attribute must have a unique value, and the tag you want to pair with must have this same value.
Collection Item
sift-search-tag
=
any-string-1
When a user types a text in the search field, the code will look at the content and compare it to the text that has this attribute, then filter the matching results.
sift-select-tag
=
any-string-1
When a user selects an option on the select field, the code will look at the tag text content and compare it to the option value selected, then filter the matching results.

To be a successful filter result, the name-of-the-attribute must be an exact matching result of the sift-select-tag text content.

sift-checkbox-tag
=
any-string-1
When a user checks a checkbox, the code will look at the label for value and compare it to the tag text content, then filter the exact matching results.

3 - Now let´s review the elements and attributes responsible for the sorting:

Component
sift-sort-select
=
true
The select field for sorting.

Collection Item
sift-sort-alphabetical-tag
sift-sort-date-tag
When it comes to sorting, things are a little different.

We can sort by alphabetical order or by date. You can give the alphabetical tag to the Collection Item you want to order by letters (ex. Blog Post title), and the date tag to any date-related text (ex. Last Updated)

3.1 - Now let´s take a look at the <option> elements and attributes inside the [sift-sort-select=”true”] <select>:

<option> inside [sift-sort-select=”true”] <select>
sift-ascending-sort
=
true
By selecting the <option> with this attribute, the Collection Items will be sorted by ascending order. So it will be numbers first, then A to Z.
sift-descending-sort
=
true
By selecting the <option> with this attribute, the Collection Items will be sorted by descending order. So it will be Z to A first, then numbers.
sift-newest-sort
=
true
By selecting the <option> with this attribute, the Collection Items will be sorted by the newest to oldest.
sift-oldest-sort
=
true

By selecting the options with this attribute, the Collection items will be sorted by the dates to be created.

Important: Make sure to select a supported date format when you are setting a date on your Collection item.

The date formats supported are:

  • 'MMMM D, YYYY'
  • 'MMMM D, YYYY hmm A'
  • 'MMMM D, YYYY Hmm'
  • 'M/D/YYYY'
  • 'M.D.YYYY'
  • 'D.M.YYYY'
  • 'M/D/YYYY hmm A'
  • 'M/D/YYYY Hmm'
  • 'M.D.YYYY hmm A'
  • 'M.D.YYYY Hmm'
  • 'D.M.YYYY hmm A'
  • 'D.M.YYYY Hmm'
  • 'M/D/YY'
  • 'M.D.YY'
  • 'D.M.YY'
  • 'M/D/YY hmm A'
  • 'M/D/YY Hmm'
  • 'M.D.YY hmm A'
  • 'M.D.YY Hmm'
  • 'D.M.YY hmm A'
  • 'D.M.YY Hmm'
  • 'YYYY-MM-DD'
  • 'YYYY-MM-DD hmm a'
  • 'YYYY-MM-DD Hmm'
  • 'MMM D, YYYY'
  • 'D MMM, YYYY'
  • 'MMMM YYYY'
  • 'MMM YYYY'
  • 'MM/YYYY'
  • 'D/M/YYYY Hmm'
  • 'D/M/YYYY hmm A'
  • 'D/M/YY hmm a'
  • 'D/M/YY Hmm'
  • 'MMMM D, YYYY Hmm'
  • 'MMMM D, YYYY hmm A'
  • 'MMM D, YYYY Hmm'
  • 'MMM D, YYYY hmm A'

Additional Features

We can also configure additional features:

No Results

sift-no-results

Attach this attribute to the element that you want to shown when there aren't any matching results when filtering.

Pagination

Apply these custom attributes in the [sift-cms-items] element:
sift-pagination
=
true
Set it to "true" if you want to activate pagination.
sift-pagination-items
Tells the code how many items you want to display per page. Ex: sift-pagination-items="9"
On an empty <div>, attach the attribute below:
sift-pagination-ui
The pagination UI will be render inside it. Leave the attribute value empty.
Here's all you can customize in pagination with CSS:
sift-pagination-ui
/* Pagination */
[sift-pagination-ui] {

}

/* All buttons in pagination */
[sift-pagination-ui] button {

}

/* Hover state for enabled buttons */
[sift-pagination-ui] button:not(:disabled):hover {

}

/* Active page button */
[sift-pagination-ui] button.active {

}

/* Disabled buttons (Previous/Next when at first/last page) */
[sift-pagination-ui] button:disabled {

}

/* Ellipsis styling */
[sift-pagination-ui] {

}

Show Filtered and Total numbers

sift-filtered-items
=
true
Replace the text content with the number of current items being filtered. Attach this attribute to any text or span.
sift-total-items
=
true
Replace the text content with the number of total items in the [data-cms-items]. Attach this attribute to any text or span.

Reset Filters

sift-reset
=
true

Attach this attribute to the button you want to be responsible for resetting all filters.


Animations

By default, SiftCMS will filter and sort instantly granting you the fastest filtering experience. However, you can easily add animations with the help of CSS @keyframes and animation properties for the items when they are filtering in or out. This approach lets you customize your filtering experience while maintaining the performance.

In the live demo, we defined the @keyframes below, and each item has the following animation properties:

css @keyframes code snippet

Limitations

  • Sift doesn't support Webflow's pagination. We have our own way of doing pagination.

Updates and Support

Stay tuned for updates on Sift Changelog page. On the Changelog page, you will be able to see each updated version and what features were added or bugs were fixed. You can change the <script> to whatever supported version you prefer. We decided to maintain this versioning format so you have control, keeping things nice and tight.

For support, you can fill this form and I will assist you with any questions or issues you may have.

Feedback

We're in beta, meaning we are just getting started! Your feedback would be super helpful so I can improve and continue to build a useful product for you.

If you have any suggestions or would like to leave a review, please fill out this super-quick form. Thank you in advance!