Get started with Spire CMS

  • Updated

Optimizely Configured Commerce Spire CMS is both a CMS and a reference site. Optimizely created Spire with the following goals:

  • Improved upgradability for the frontend.
  • More composable commerce pages.
  • Simple CMS data structure.
  • Improved page editing experience.
  • SEO/Server-side rendering.
  • Lighter JavaScript payloads.
  • More control over site development without developer intervention.
  • Lower implementation costs compared to other platforms.

While Classic is built on Angular.js, Spire is build on React/Redux. However, they both use widgets to construct pages and APIs to retrieve data with the CMS/JavaScript framework. See the Feature Comparison table below.

Benefits of Spire

Spire has several benefits that help you create and maintain your Configured Commerce site:

  • An updated column design with flexibility for page layout and the ability to insert and organize widgets on all pages.
  • Configurable widgets to support common uses for each widget type.
    • For example, table widgets have a multi-select option available for data elements in tables.
  • An organized gallery of widgets you can select and search from using the Widget Selection Interface. This includes more out-of-the-box granular widgets for low-code/no code flexibility.
  • An option to create Layouts for templates on frequently used page types such as News/Articles.
  • More publishing options:
    • Page-specific content for languages and context.
    • Page Restoration that can compare and restore previous versions of a page.
  • Tags to make finding pages easier. Tags allow you to group and locate pages within the Page filter with greater flexibility. Pages can also have multiple tags that you can add and remove as desired.
  • Device preview (mobile, tablet, and desktop) through quick links, giving you a quicker understanding of what the page will look like without having to resize the browser.
  • The Style Guide, which allows you to make site-wide styling changes through configurations and revert to the blueprint's default when needed. This feature is protected by permissions and can be provided to users by the website administrator.
  • Shared content in a centralized place to use widgets across pages and websites. You can apply filterable tags to help locate shared content. This feature replaces Website Hierarchy from Classic.
  • A Compact Header to create a condensed version of your site’s header using configurations and the Style Guide that displays as users scroll down the page.
  • A React-based framework for backwards compatibility, large JavaScript library for developers, a lower learning curve, and higher performance.
  • Improved SEO – Crawlers from Google and other Search Providers will see the same content as users without requiring you to maintain multiple versions of the same page by following our Server-Side rendering guidelines
  • Core Web Vital improvements to significantly increase the scores assigned by Google for pages and components out of the box.
  • Accessibility improvements during development to make certification easier.
    • Optimizely uses WCAG 2.0 AA as a guide to develop Spire storefront pages and components. If you stay close to the base page design, you should obtain accessibility certification more easily.
    • Accessibility certification is project-specific because much of the certification relies on project-specific factors such as data population (image alt text), the design of the site (colors), extensions that are added on top of the platform, and so on. You must complete your own certification process to guarantee compliancy when needed.

Support for Classic

Because all customers can now use the Spire CMS, Optimizely has announced the end of life for Classic CMS.

This announcement only impacts customers using the Classic CMS. It does not affect those using the Spire CMS.

Configured Commerce customers can implement Spire-based sites on the same instance as their existing Classic-based sites. With the v5.1 SDK release in January 2022, on-premises customers can also utilize Spire. Learn more about migrating your Configured Commerce site from Classic to Spire

For Cloud customers running Classic sites that want to start creating a Spire site, Optimizely first must migrate your instance from the Classic “Pod” infrastructure to the Spire “Container” infrastructure. Please contact your Customer Success Manager to schedule this migration.

Because moving from Classic to Spire requires effort, Optimizely wanted to provide as much notice and support for this transition as possible and continue to add value to your existing sites. The following timeline outlines the three-year end-of-life plan:

  • 2022 (Year One) – Continue to add new features to Classic, including new features and enhancements to existing features.
  • 2023 & 2024 (Years Two & Three) – Make bug and security fixes to Classic. While Optimizely will add new features to Spire, Classic will only receive fixes for base code bugs and critical security issues.
  • January 1, 2025 – End of life for Classic. There will be no more base code changes made to Classic after this date. 

Feature parity between Classic and Spire

The sites have some differences in the way features are implemented, but they support the same Configured Commerce feature sets. If you already have a highly customized site, new features introduced in Classic must be manually worked into the site.

Feature comparison: Classic and Spire

Feature/Capability Classic CMS Spire CMS

Technology

Angular.js, Foundation, TypeScript

React, Redux, TypeScript, Node

Front end upgrade model

Merge as desired

Automated

Styling approach

Cascading Style Sheets, base.css

Style Guide, user-configurable, styled-components

Structure by website

Themes

Content Library

Server/front-end load

Heavy front end, API-only on back end

Hybrid, some on front end mixed with some on back end

Widget construction

Custom created

Built on Mobius and then customized

Widget code

C#/TypeScript

TypeScript

Widget extensibility

New widgets

New widgets, property injection or handler chain

Widget sizing ? reference site

Larger widgets

Smaller, more granular widgets

SPA (single-page application)

Yes

Yes

Supports GTM, Chat, and other JavaScript-based extensions

Yes

Yes

Build process

Grunt

Webpack

Hot module replacement

No

Yes

SEO page for bots

Separate page

No longer needed

Accessibility

By extension

Reference site includes accessibility features

Responsive preview

By resizing screen

Toggle to change view