CMS Wrapper

A DOM-based product listing controller for Framer that adds pagination, price sorting, and variant filtering on top of any Framer CMS collection — with responsive layout support for desktop, tablet, and mobile.

---

​

What It Does

The CMS Wrapper wraps a Framer CMS collection component and takes control of which items are shown. It reads prices and product IDs directly from the rendered DOM, then handles pagination, sorting, and filtering entirely on the client side — no backend required. Key behaviors at a glance:

• Pagination — splits the full list of CMS items into pages and renders only the current page’s items. Previous/Next buttons navigate between pages. The page counter shows the current page and total pages, or “No items” when all items are filtered out.
• Price sorting — reads the priceSort key from sessionStorage and re-orders items by price (Low → High or High → Low) whenever it changes. Works with the Price Sort Controller component out of the box.
• Variant filtering — reads the variantFilterProductIds key from localStorage and hides any CMS items whose product ID is not in the list. Works with the Variant-Based Filter component out of the box.
• Responsive layouts — accepts separate CMS page components for desktop, tablet, and mobile. Switches between them based on configurable breakpoint widths.
• Scroll on page change — after navigating to a new page, the viewport automatically scrolls up to the top of the list with a configurable offset to account for sticky headers or navbars.
• Live updates — listens for storage events on window so the list reacts instantly whenever the sort order or variant filter changes without a page reload.
• DOM-based price extraction — reads prices from elements with the class .framerfyPrice and product IDs from the second class name on that element (e.g. framerfyPrice 8352533184673).

---

​

Property Controls

All controls are accessible in Framer’s right panel when the component is selected.

​

CMS Pages

​

Breakpoints

​

Pagination

​

Notes

• This component requires the Dynamic Product Price component to be inside each CMS card with the class framerfyPrice for price sorting and filtering to work. Without it, all items will have a price of 0.
• Product IDs are read from the second class name on the .framerfyPrice element (e.g. <span class="framerfyPrice 8352533184673">). The Dynamic Product Price component handles this automatically when Product ID is connected from CMS.
• Price sorting reacts to the priceSort key in sessionStorage. Connect a Price Sort Controller on the same page to drive this.
• Variant filtering reacts to the variantFilterProductIds key in localStorage. Connect a Variant-Based Filter on the same page to drive this.
• When no variant filter is active (the variantFilterProductIds array is empty), all items are shown.
• The breakpoint check runs once on mount using window.innerWidth — it does not dynamically swap layouts on browser resize.
• Price filtering via min/max inputs is implemented in the code but currently disabled in the Framer panel. It can be enabled by uncommenting the relevant property controls in the source.