An overview of how it works
Essentially, SiftCMS 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 if these tags match the input in the filters. It then displays matching results and hides the unmatching ones in real-time.
Currently, 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. It doesn’t require any code change since the code itself will check if that filter type is being used.
Getting Started
The UI setup
Webflow
1 - If you are on Webflow, you can copy the component on the website below:
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-free-v0.2.0.js"></script> Get the Pro Version <script> tag
here.
Webstudio
1 - In Webstudio, you can clone the whole website, which include the filter all set up:
Obs: Currently, SiftCMS supports filtering Collection (component from the navigator) items and Notion Database as CMS items. We plan to add more CMSs in the future
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-free-v0.2.0.js"></script> Get the Pro Version <script> tag
here.
Linking UI with Code
1 - On your Collection List element, copy and paste these custom attributes:
*If the value field is empty, the default value will be active.
data-cms-items
Tells the code to identify the Collection List in which the items can be filtered or sorted.
data-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"
data-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: data-scroll-threshold="300"
Default value: "100"
data-animation-duration
Tells the code what will be the filtering and sorting animation duration. It can be any time in seconds.
Ex: data-animation-duration="0.4s"
Default value: "0.3s"
data-animation-easing
Tells the code what will be the filtering and sorting easing. It can be any acceptable CSS value of the transition property.
Ex: data-animation-easing="ease-in-out"
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.
The select field for filtering.
Inside it, it will have multiple <option> elements. Each <option> must have an attribute value=”name-of-the-attribute”.
*Pro Version Only
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.
*Pro Version Only
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.
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 data-select-tag text content.
*Pro Version Only
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.
*Pro Version Only
3 - Now let´s review the elements and attributes responsible for the sorting: (Available in Pro version)
The select field for sorting.
data-sort-alphabetical-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 [data-sort-select=”true”] <select>:
<option> inside [data-sort-select=”true”] <select>
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.
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.
By selecting the <option> with this attribute, the Collection Items will be sorted by the newest to oldest.
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'
4 - We can also configure additional features:
No Results
Tells the code to identify what element will be shown when there aren't any matching results when filtering
Limitations
-
SiftCMS doesn't support Webflow's pagination.
We have plans to implement our way of doing pagination yet to be released.
-
SiftCMS wasn't made with Webflow's Form Elements in mind.
Right from the beginning, we leverage the use of Custom Elements for the ultimate flexibility, giving you full control of the HTML structure.
Updates and Support
Stay tuned for updates on SiftCMS Changelog page (we will also try to send updates via email or post on X at a later period).
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 reach out to this email (help.wcustom@gmail.com) and we will assist you with any questions or issues you may have.
Feedback
We're in early access, meaning we are just getting started! Your feedback would be super helpful so we can improve and continue to build a useful thing for you.
If you have any suggestions or would like to leave us a review, please fill out this super-quick form. Thank you in advance!