UNLOCK NOW

OVERVIEW

INTRODUCTION

QUICK START

COMPONENTS

CHANGELOG

SUPPORT

COMPONENTS

CONCEPTS

INTEGRATING COMPONENTS

TRIGGER FUNCTIONALITY

PRESERVING SETTINGS

Documentation

Introduction to CMS+ Suite of Components

The CMS+ suite is a powerful collection of components designed to enhance your content management capabilities within Framer. These components offer advanced functionality for filtering, sorting, and displaying your CMS content, providing a more dynamic and interactive user experience.

*Note— While this suite does not require expert-level skills to use effectively, it is not designed for absolute beginners. Users should have experience working with components and nested components, as well as setting up variants and interactions for transitions between those variants. Familiarity with these concepts will ensure a smoother experience when implementing and customizing the CMS+ components.

QUICK START GUIDE

Jumpstart your project with CMS Plus by setting up Collection+ and creating a PlainText Filter+ toggle component. Provides a basic insight on core concepts and component usage.

COMPONENTS

The CMS+ suite provides the tools you need to create engaging, user-friendly interfaces for managing and presenting your collection list of any size.

We'll explore each component, providing examples and best practices to help you make the most of this powerful suite.

*Note— CMS+ components can be found in the Assets section within "CMS Plus Easy Access to Components" of this project upon purchase.

Collection+

Displays CMS items dynamically
Responds to filter and sort changes in real-time

Sort+

Toggles CMS sorting between ascending and descending order
Allows quick reorganization of displayed content

Search+

Enables custom input for real-time search functionality
Helps users quickly find specific content

Count+

Shows the current number of results
Provides instant feedback on filter effectiveness

Clear+

Offers a simple toggle to reset all filters and/or search text
Allows users to quickly start a new search or browsing session

Filters+

Offers all of Framer's native filter conditions plus enhanced selections
Provides on-demand toggles for each supported CMS Field Types

CHANGELOG

v1.0

Aug 19, 2024

Released!

v1.0.1

Aug 27, 2024

Quick start guide section and video added.

v1.0.2

Sept 03, 2024

Collection+ video updated with audio.

v1.1.2

Sept 11, 2024

Maintenance.
Compatibility updates.

v1.1.3

Sept 21, 2024

Updating documentation.

v1.2.3

Sept 27, 2024

Date Filter+ now supports setting the date value as text, enabling you to use Framer's native fetching with an API that returns a date. This unlocks the ability to filter by dynamic dates in real-time.
Added documentation to Date Filter+ for dynamic date setting.
For the Date Filter+ component, added link to documentation on its properties for setting the date value as a text.

v1.2.4

Oct 04, 2024

Fixed a bug that bypassed Search+ error handling, it crashed when inputting a CMS field name that does not exist in the collection.
Minor performance optimizations and code refactoring.

v1.2.5

Oct 21, 2024

Updating documentation for the new upcoming videos. Simplification of various sections.

v1.3.5

Oct 28, 2024

Bug Fix: Collection list was not rendering when references were being included.
Compatibility updates in preparation for new filter (Reference Filter+).

SUPPORT - GET IN TOUCH

Help is on the way! If you’re encountering an error or need assistance getting started, don’t hesitate to reach out.

We know filtering can get complex, and some unique cases might require a custom solution. Share your issue with us, and we’ll see if CMS+ can be tailored to fit your needs.

Be sure to look out for responses in spam or junk folder.

The Components of CmS+

Each component in the CMS+ suite is designed to manage a specific aspect of your collection, offering specialized functionality for enhanced content management:

COLLECTION+

The core component that manages your collection list. As filters are applied, sorting preferences are updated, and text searches are conducted, Collection+ will dynamically update the CMS items displayed.

Setting Up Collection+

Insert Collection+ onto your page and resize as needed. Link your collection list and a custom frame to display when no search results are found. Watch the video guide to cover responsive design with Collection+.

*Note— Ensure your collection list and custom frame are positioned outside of the page to enable linking.

SORT+

While Framer's native sorting is configured in the CMS section, Sort+ enhances this functionality by allowing real-time toggling of sort direction directly from your page. This dynamic feature gives users more control over how content is organized and displayed.

Integrating Sort+ Into Your Design

Start by selecting your preferred CMS field for sorting. The direction isn't crucial at this point, as it will be defined later with Sort+. For this example, we will be choosing to sort our collection by the "Price" CMS field.

Insert Sort+ into any existing design component. Sort+ can be placed within any layer and positioned absolutely to prevent any layout disruptions if needed.
Create at least two variants will be required, one for ascending, and the other for descending.
In the example below:
- We've created a basic toggle component with two variants and interactions for transitions between them. The toggle is previewed before adding Sort+ to confirm it’s behaving as designed.
- Select the layer where you want to place Sort+ and insert it.

*Note— It’s recommended to fully configure your toggle, button, switch, or other elements, including all variants and interactions, before inserting Sort+.

Configure Sort+ with your default preferences in the primary variant:

Preserve Sort: save this sort direction across site page navigation
Collection Name: input the name of the collection you want to sort, must match exactly
Sort By: ascending or descending
onAscending (Interaction): assign the variant to display when sorting in ascending order
onDescending (Interaction): assign the variant to display when sorting in descending order

*Note— When selecting to preserve sorting, the interaction events, onAscending & onDescending, are required to be set. This ensures the proper variant is displayed when the user returns to the collection list page.

In the appropriate variant, set the 'Sort By' override to ensure Sort+ toggles the order when that variant is active.

SEARCH+

Design a sleek and functional search bar by integrating Search+ into your design. Search+ enables real-time search across your text-based CMS fields.

Getting Started with Search+

The Search+ component can be used on its own. With minimal setup, simply insert Search+ into any frame, resize it, and configure its variables.

In the example provided, we'll be placing Search+ inside a frame that serves as a simple container with padding and background color. From here, we set its variables:

Delay: the time (in milliseconds) between when typing stops and the search begins. The shortest delay (175ms) offers near-instant search, while the longest (1500ms) provides a smoother experience
Placeholder: optional text displayed when the input field is empty. You can also replace [count] in this text with the actual number of search results
Collection Name: ensure this matches the name of the collection being used
Fields: a list of CMS fields to be searched. Only Plain Text and Slug fields are supported
Font: customize font style
Font Color: set the input text color
Placeholder Color: define the placeholder text color (if applicable)

COUNT+

Easily insert it anywhere to display the current item count based on active filters or search text.

Start Using Count+

The Count+ component can be used on its own. With minimal setup, simply insert Count+ into any frame and configure its variables.

This video demonstrates how easy it is to use Count+ by placing the component in an existing frame that serves as a container. The next step is to configure Count+ with its variables:

Collection Name: ensure this matches the name of the collection being used
Font: customize font style
Color: set the font color

CLEAR+

Clear+ is intended to be used within a custom component's "Pressed" variant.

Integrate Clear+ Into Your Design

In this example, we will create a straightforward component called 'Clear All Button', featuring an icon for visuals and Clear+ for functionality.

Begin by creating a new component.
Design your button.
Insert Clear+. If it disrupts your layout, use absolute positioning.
Add a "Pressed" Variant.
In the "Pressed" Variant, set overrides to clear filters and/or search when this button is pressed.

FILTERS+

Each filter component is developed to effortlessly integrate on-demand filtering capabilities into your Framer CMS collection list from the page. It allows users to easily sift through CMS items, applying filters with just a click. You might encounter a slight learning curve when working with these components, but to help smooth the process, key concepts have been included.

CMS+ filters include all native Framer filter conditions, plus extra options available for specific CMS+ filters:

Integrating Any Filter+ Into Your Design

Start by creating a new component.
Design you component, or insert a predesigned component.
Create at least two variants, one variant to represent an inactive filter, and the other to represent an active filter.

*Note— It’s recommended to fully configure your toggle, button, switch, or other elements, including all variants and interactions, before inserting any of the Filter+ components.

In this video example, we have created a simple button component. Its primary variant 'Not Active' transitions to variant 'Active' on click and vise versa. We preview the component to ensure it's behaving as designed.

Insert any of the Filter+ components into your design. Filter+ can be placed within any layer and positioned absolutely to prevent any layout disruptions if needed.
Configure the Filter+ component for the collection and CMS field you will be filtering.

In this example, we’ll be working with our Cars collection, specifically applying a filter to the 'Make' field, which is a Plain Text CMS field. To do this, we’ll be integrating the Plain Text Filter+ component and setting its variable in the primary variant.

Once the Filter+ component is set up in the primary variant, we’ll move on to the variant that applies the filter. Here, we’ll override the toggle so the filter get applied.

*Note— If this filter is to be preserved, two interaction events are required. It helps the Filter+ component identify which variant to display when the user returns to the page.

Set onApplyFilter event to the variant that displays when the filter is active.
Set onRemoveFilter event to the variant that displays when the filter is inactive.

All set! You can now place this component anywhere on your site to toggle the configured filter on your collection list. Just like any other component, you can define variables to make it reusable and versatile.

DATE FILTER+

Compatible with Framer CMS Date field types.

Supported Conditions from Framer

Equals
Doesn't Equals
Is Before
Is Before or Equal
Is After
Is After or Equal
Is Between Dates
- Is Before
- Is After

Enhancements from CMS+

Is Between Dates
- Is Before or Equal
- Is After or Equal

Dates can be entered as text. This allows Framer to fetch for dynamic dates.

Using a Dynamic Date

Currently, Framer’s native fetching only supports text fields. Learn how to enable fetching for your project. Fetching is necessary to use dynamic dates, which requires an API that provides the time in ISO 8601 format.

With fetching, you can pass the current date in local time or specify a timezone. This functionality can be applied to both single date filters and date ranges. When selecting an API, it's important to carefully review its documentation for usage guidelines, pricing, and any limitations.

For the following example, I will be using TimeAPI.

Enable Framer's native fetching by switching the value type from Date to Text.

Choose 'Add Fetch' for the Text Value property. Since the value will be dynamic, you can set it directly to the Date Filter+ component.

Enter your API's URL and select the path that returns the date in ISO 8601 format. In this example, I’m using a custom API that provides date information for a specific timezone. Since my site operates in Pacific Time, I included custom parameters in the URL, as outlined in the API's documentation.

*Note— If any errors arise, consult your API's documentation for troubleshooting. CMS Plus cannot assist with Framer fetching errors.

The final step is optional but recommended: go to Advanced settings and set the Cache to 1 Day. Since the date updates every 24 hours, caching will reduce the frequency of fetch requests.
That’s it!
Stay tuned for the upcoming video guide!

FILE FILTER+

Compatible with Framer CMS File field types.

Supported Conditions from Framer

Is Set
Isn't Set

FORMATTED TEXT FILTER+

Compatible with Framer CMS Formatted Text field types.

Supported Conditions from Framer

Is Set
Isn't Set

LINK FILTER+

Compatible with Framer CMS Link field types.

Supported Conditions from Framer

Is Set
Isn't Set

IMAGE FILTER+

Compatible with Framer CMS Image field types.

Supported Conditions from Framer

Is Set
Isn't Set

NUMBER FILTER+

Compatible with Framer CMS Number field types.

Supported Conditions from Framer

Equals
Doesn't Equals
Greater Than
Greater Than or Equal
Less Than
Less Than or Equal

Enhancements from CMS+

Is Between Numbers
- Greater Than
- Greater Than or Equal
- Less Than
- Less Than or Equal

OPTION FILTER+

Compatible with Framer CMS Option field types.

Supported Conditions from Framer

Equals
Doesn't Equal

PLAIN TEXT FILTER+

Compatible with Framer CMS Plain Text field types.

Supported Conditions from Framer

Is Set
Isn't Set
Equals
Doesn't Equal
Starts With
Doesn't Starts With
Ends With
Doesn't End with
Contains
Doesn't Contain

SLUG FILTER+

Compatible with Framer CMS Slug field.

Enhancements from CMS+

Equals
Doesn't Equal
Starts With
Doesn't Starts With
Ends With
Doesn't End with
Contains
Doesn't Contain

TOGGLE FILTER+

Compatible with Framer CMS Toggle field types.

Supported Conditions from Framer

Concepts

Due to CMS+ components' integration, it allows the designer to create creative filters.

For example, on the demo page, you might have noticed the ability to filter by decades and traverse through all the options without having to individually toggle each decade on or off. Also, filtering by the starting letter for model in bulk like A through H.

These designs are considered advanced because CMS+ wasn’t initially intended for these specific applications. However, thanks to its functionality and flexibility, it works. By grasping the basic concepts of how CMS+ manages filters and preserves settings, you can create custom filters for unique use cases.

INTEGRATING COMPONENTS

Clear+, Sort+, and all Filter+ components are developed to be add-ons. You insert these components into an existing button, or create a new component and wrap them with the design you'll be reusing.

This image is an example when the button is being created from scratch.

In this image, PlainText Filter+ and an existing button design are wrapped together.

TRIGGER FUNCTIONALITY

Components like Collection+, Search+, and Count+ are standalone, allowing them to be used in any environment without the need for special setups.

However, Sort+, Clear+, and all Filter+ components require at least two variants to be configured. The primary variant is used to set default values, while the second variant is used to toggle and activate the functionality.

Lets take a look at some examples:

*Note— It’s recommended to fully configure your toggle, button, switch, or other elements, including all variants and interactions, before inserting any of the Filter+ components.

PlaintText Filter+
When this component is used on the page, its primary variant "Inactive" is displayed where PlainText Filter+ is setup, the user can click on this component to transition to the "Active" variant. In the "Active" variant, the PlainText Filter+ variable Filter is toggled to "Yes".

Sort+
The primary variant called "Asc" has Sort+ setup to order by ascending order. The component can be clicked to transition to "Desc" variant where Sort+ is now toggled to "Z —> A" for Sort By.

Clear+
This integration is slightly different from the rest. In out "Default" primary variant, we have Clear+ setup. Now we create a "Pressed" variant for our component where we toggle Clear Filters & Clear Search to "Yes". A pressed variant is used instead because we only need to trigger the clear toggles momentarily, then our button can return to its default variant.

PRESERVING SETTINGS WITH INTERACTION EVENTS

Interaction events for all Filter+ components use onApplyFilter and onRemoveFilter, while Sort+ relies on onAscending and onDescending. These events control which variant is displayed, ensuring consistency when users navigate to another page and return, or when Clear+ is used to reset all active filters.

A Filter+ component is out of sync when its "Filter" variable is set to "No", but its assigned filter is active on the collection list, this is where onApplyFilter is triggered and automatically transitions to the linked variant to keep the component in sync. Same situation occurs when your component is currently on its "active" variant, then Clear+ removes all filters, this is when onRemoveFilter is triggered automatically to keep the component in sync.
onAscending and onDescending works the same. It ensures the proper variant is being displayed depending the current order of the collection list, and trigged only when the component appears on the page.

This PlainText Filter+ has both events linked: