Preserve States & Syncing

A key feature of CMS Plus is its ability to preserve component states while ensuring their appearance stays in sync.
For instance, if a visitor activates/deactivates a filter, navigates to another page on your site and returns, CMS Plus will automatically transition your variant to match the filter’s state.

Note

This feature is optional; when disabled, your component will reset to its primary variant configuration each time the visitor leaves the current page containing the CMS Plus component.

Here's an in-depth look at how this feature works and how to implement it effectively.

How It Works

CMS Plus features a Preserve control that retains the states of Filters+, Search+, and Sort+ components as visitors navigate your site. When enabled, CMS Plus checks the latest state of Collection+ and updates each component to reflect its current status.

• Filters+
  CMS Plus checks if the filter is active/inactive, then automatically transitions the component to the appropriate variant, visually indicating the filter’s current state. Explore these components.
  
  

• Search+
  CMS Plus will update the input if any text has been entered for real-time search. Explore this component.
  
  

• Sort+
  CMS Plus checks the current order direction and automatically transitions the component to the appropriate variant, visually indicating the current order direction. Explore this component.

Unique Interactions for Syncing

In order to for CMS Plus to know which variant to sync to for Filters+ and Sort+, they provide unique interactions that need to be added and set in your component's primary variant.

Important

These interactions are required for syncing to work.

• Filters+

  1. Active Filter Interaction

  2. Inactive Filter Interaction

  In the example below ↓ for CMS+ Filter+ Number, we've added the interactions. When this filter is active, it should sync to our variant named "Checked", and when this filter is inactive, it will sync to the "Not Checked" variant.

  

  
  

• Sort+

  1. Ascending Sort Interaction

  2. Descending Sort Interaction

  In the example below ↓ for CMS+ Sort+, we've added the interactions. When the collection's order direction is ascending, it should sync to our variant named "Start with Least Expensive", and when the order direction is descending, it will sync to the "Start with Most Expensive" variant.

  

Why Use Preserving & Syncing?

This feature is particularly valuable for:

• E-commerce sites where users may want to maintain filters while browsing across categories.

• Content-heavy sites where search preferences enhance user navigation.

• On a portfolio or listing site where users can preserve the sorting direction.

The preserve feature adds a seamless layer of functionality to CMS Plus, ensuring components stay in sync as visitors explore your site. By maintaining consistent states, it enhances both usability and the overall browsing experience.