Filters

What is the Filters Plugin?

Filters Plugin is a powerful, client-side filtering and sorting system for Collection items, whether static or pulled from a CMS. It uses attribute-based tags to identify, filter, and sort content based on user interactions in real-time without page reloads. Powered by Sift, and Craft compatible.

Key Features:

• Real-time filtering with search, selects, and checkboxes
• Customizable sorting (alphabetical, date-based)
• Lazy loading for large collections
• Dynamic pagination
• Works seamlessly with Webstudio

[#getting-started]## Getting Started[#getting-started]

Step 1: Add the Plugin Script

Add this script inside an HTML Embed on your page:

[code-block]<script type="module" src="https://siftcms.b-cdn.net/sift-v0.7.0.js"></script>[/code-block]

Step 2: Configure Your Collection List

Add these attributes to your Collection List element to enable filtering:

[.flex-attr][code-block]sift-cms-items[/code-block]=[code-block]true[/code-block][.flex-attr] [.flex-attr][code-block]sift-items-to-show[/code-block]=[code-block]6[/code-block][.flex-attr] [.flex-attr][code-block]sift-scroll-threshold[/code-block]=[code-block]100[/code-block][.flex-attr]

[@dv-zoom-image="fade overlay-50"][@dv-zoom-image]

What these attributes do:

• sift-cms-items="true" - Activates filtering for this collection list
• sift-items-to-show="6" - Shows 6 items initially, loading more as users scroll
• sift-scroll-threshold="100" - Loads more items when user scrolls within 100px of bottom

[#adding-filters]## Adding Filters[#adding-filters]

You can add three types of filters to your collection: search, dropdown select, and checkboxes. Each filter type requires two parts:

1. A filter control (input, select, or checkbox group)
2. Tags inside each collection item that match to that filter

[#search-filter]### Search Filter[#search-filter]

The search filter allows users to find items by typing text that matches tagged content.

[@dv-zoom-image="fade overlay-50"][@dv-zoom-image]

1. On your search input:

Add a Text Input to your page and add this attribute with a unique identifier: [.flex-attr][code-block]sift-search[/code-block]=[code-block]name[/code-block][.flex-attr]

2. Inside each Collection Item:

Add this attribute to the element containing the text you want to search: [.flex-attr][code-block]sift-search-tag[/code-block]=[code-block]name[/code-block][.flex-attr]

Important: The values in sift-search and sift-search-tag must match exactly.

[#select-dropdown-filter]### Select Dropdown Filter[#select-dropdown-filter]

The select dropdown allows users to filter items by a single category or classification.

1. On your select dropdown:

Add a Select dropdown to your page with this attribute: [.flex-attr][code-block]sift-select[/code-block]=[code-block]category[/code-block][.flex-attr]

Create options with values that match your collection items exactly:

[@dv-zoom-image="fade overlay-50"][@dv-zoom-image]

Note: Include a first option with an empty value to allow users to see all items.

2. Inside each Collection Item:

Add this attribute to the element containing the category text: [.flex-attr][code-block]sift-select-tag[/code-block]=[code-block]category[/code-block][.flex-attr]

Important: Case matters! "Design" is different from "design" in the filtering.

[#checkbox-filter]### Checkbox Filters[#checkbox-filter]

Checkbox filters allow users to select multiple criteria simultaneously.

1. Create a Box container for your checkboxes:

Add a Box element and give it this attribute with a unique identifier: [.flex-attr][code-block]sift-checkboxes[/code-block]=[code-block]subcategory[/code-block][.flex-attr]

2. Add checkboxes with proper structure:

Each checkbox needs:

• A unique ID
• A name attribute (same as ID is recommended)
• A label with a for attribute matching the ID

[@dv-zoom-image="fade overlay-50"][@dv-zoom-image]

3. Inside each Collection Item:

Add this attribute to elements for each applicable feature: [.flex-attr][code-block]sift-checkbox-tag[/code-block]=[code-block]subcategory[/code-block][.flex-attr]

Note: Add a separate tagged element for each feature that applies to the item. The text must exactly match the label text.

[#adding-sorting]## Adding Sorting[#adding-sorting]

Sorting allows users to change the order of displayed items.

1. Create a select dropdown for sorting:

Add a Select element with this attribute: [.flex-attr][code-block]sift-sort-select[/code-block]=[code-block]true[/code-block][.flex-attr]

Add options with specific sorting attributes:

[@dv-zoom-image="fade overlay-50"][@dv-zoom-image]

Sorting option attributes:

Add these attributes to your <option> elements to enable the desired sort:

Alphabetical (A–Z): [.flex-attr][code-block]sift-ascending-sort[/code-block]=[code-block]true[/code-block][.flex-attr]

Alphabetical (Z–A): [.flex-attr][code-block]sift-descending-sort[/code-block]=[code-block]true[/code-block][.flex-attr]

Date (Newest first): [.flex-attr][code-block]sift-newest-sort[/code-block]=[code-block]true[/code-block][.flex-attr]

Date (Oldest first): [.flex-attr][code-block]sift-oldest-sort[/code-block]=[code-block]true[/code-block][.flex-attr]

Number (Lowest first): [.flex-attr][code-block]sift-ascending-number-sort[/code-block]=[code-block]true[/code-block][.flex-attr]

Number (Highest first): [.flex-attr][code-block]sift-descending-number-sort[/code-block]=[code-block]true[/code-block][.flex-attr]

2. Inside each Collection Item:

Add these tags to make your items sortable:

For alphabetical sorting (names, titles, etc.): [.flex-attr][code-block]sift-sort-alphabetical-tag[/code-block][.flex-attr]

For date-based sorting (creation dates, publication dates, etc.): [.flex-attr][code-block]sift-sort-date-tag[/code-block][.flex-attr]

For numerical-based sorting (any integer, decimal, or negative number): [.flex-attr][code-block]sift-sort-numerical-tag[/code-block][.flex-attr]

Important: Every collection item must have both of these tags for sorting to work properly.

Important 2: In numerical sorting, use .(dot) for decimal numbers.

Supported date formats:

• Standard: 'January 1, 2023', '1/1/2023', '2023-01-01'
• With time: 'January 1, 2023 10:30 AM', '1/1/2023 10:30'
• International: 'DD.MM.YYYY', 'MM.DD.YYYY'

[#additional-settings]## Additional Settings[#additional-settings]

Enhance your filtering experience with these optional features.

[#no-results]### No Results Message[#no-results]

Show an element when filters return no matching items:

Add this attribute to any element (Box, Text, etc.) that should display when no results are found: [.flex-attr][code-block]sift-no-results[/code-block][.flex-attr]

[#item-counter]### Item Counter[#item-counter]

Display how many items are currently showing:

[.flex-attr][code-block]sift-filtered-items[/code-block]=[code-block]true[/code-block][.flex-attr] [.flex-attr][code-block]sift-total-items[/code-block]=[code-block]true[/code-block][.flex-attr]

[#reset-button]### Reset Button[#reset-button]

Add a button that clears all active filters:

[.flex-attr][code-block]sift-reset[/code-block]=[code-block]true[/code-block][.flex-attr]

[#pagination]### Pagination[#pagination]

Use pagination instead of infinite scroll for your collection:

1. On your Collection List:

[.flex-attr][code-block]sift-cms-items[/code-block]=[code-block]true[/code-block][.flex-attr] [.flex-attr][code-block]sift-pagination[/code-block]=[code-block]true[/code-block][.flex-attr] [.flex-attr][code-block]sift-pagination-items[/code-block]=[code-block]9[/code-block][.flex-attr]

2. Add a container for pagination controls:

[.flex-attr][code-block]sift-pagination-ui[/code-block][.flex-attr]

(Optional) In this same element with sift-pagination-ui attribute, you can modify the text content of the Previous and Next buttons. It can be any text or HTML code symbol.

[#styling-your-filters]## Styling Your Filters[#styling-your-filters]

Pagination Controls

Style the pagination buttons with CSS:

[code-block lang="css"][sift-pagination-ui] { display: flex; gap: 8px; margin-top: 20px; justify-content: center; }

[sift-pagination-ui] button { padding: 8px 16px; background: #f0f0f0; border: none; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; }

[sift-pagination-ui] button:not(:disabled):hover { background: #e0e0e0; }

[sift-pagination-ui] button.active { background: #0066ff; color: white; }

[sift-pagination-ui] button:disabled { opacity: 0.5; cursor: not-allowed; }[/code-block]

Smooth Filter Animations

Add smooth transitions when items are filtered. Example below:

[code-block lang="css"]@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

[sift-cms-items] > * { animation: fadeIn 0.3s ease forwards; }[/code-block]

[#common-use-cases]## Common Use Cases[#common-use-cases]

Blog Post Filtering

• Filter by author, category, or tags
• Search by post content
• Sort by publish date or alphabetically

Marketplace Product Filtering

• Filter products by category, size, color
• Sort by price (low to high), newest arrivals
• Show count of available products

Event Listing Filtering

• Filter by date range, location, or event type
• Show upcoming events first
• Hide past events automatically

[#troubleshooting]## Troubleshooting[#troubleshooting]

Filter not working?

• Ensure attribute values match exactly between filters and tags
• Check for case sensitivity - "Shirts" is different from "shirts"
• Make sure text content in tags exactly matches option values
• Verify HTML structure - checkboxes need proper ID and for attributes

Sort not working correctly?

• Ensure every collection item has both sorting tags
• Verify date formats are supported
• Check that sort options have the correct attributes

Pagination issues?

• Make sure sift-pagination="true" is set on your Collection List
• Verify the sift-pagination-ui container exists in your layout
• Check that sift-pagination-items has a reasonable value