Extend Spire CMS
Mobius design language
Mobius, Spire's internal design language, is a library of low-level React styled components that you can configure and extend. Mobius has several benefits for you and your customers Empowers business users Mobius empowers business users to globally customize basic UI styles, allowing for more complex customizations.
Spire templates
These pages are defined in Spire CMS for Optimizely Configured Commerce Header Compact Header Home About Us Contact Us Locations Dealer Details Brands Brand Details Cart Category Details Categories Checkout - Review & Submit Checkout - Shipping Checkout - Order Confirmation MyAccount Account Settings Addresses Budget Management Cart Reminder Unsubscribe Change Customer Change Password Create Account Expired Account Activation Link Expired Reset Password Link Invoice History Invoice Details My Lists My Lists Details Order Approval Order Approval Details Order History Order History Details Return Request (RMA) Requisitions Reset Password Job Quotes Job Quote Details My Quotes Quote Details Saved Orders Saved Order Details Saved Payments User Administration User Setup Page Not Found Order Status Order Upload Product Compare Product Details Product List Quick Order Requisition Confirmation Request a Quote Quote Confirmation Sign In Static List Unhandled Error Modal Unhandled Error News News Details Robots.
Replace an existing Spire page
Spire comes with pre-defined pages, like the Cart and Order History pages. In code, pages are generally used to load data that is used by one or more of the widgets on the page.
Add a page type
When adding a new page type to Spire CMS, in addition to the PageDefinition all pages require a PageTemplate. For any system pages a PageCreator is also required.
Page NavigationFilters
The NavigationFilter in Optimizely Configured Commerce lets you Redirect to sign in when a user tries to go to a page before they are signed in. Hide a page from a user if they do not have the correct roles.
Create a custom widget in Spire
In Spire, widgets are pre-configured content holders that allow certain user roles to add content to pages without having to develop page elements. Widgets can host contextual content, providing users with different views based on persona, language and/or device type.
Build sites with Spire and React Redux
Before Optimizely could start development, the journey to Spire began with researching and comparing several web frameworks, including Angular, Vue, and React. Optimizely ultimately chose React because it's a lightweight, presentation-based JavaScript framework.
Replace a widget in Spire
In Spire, widgets are pre-configured content holders that allow certain user roles to add content to pages without having to develop page elements. Widgets can host contextual content, providing users with different views based on persona, language and/or device type.
Create a custom reducer
This article provides an example custom reducer in FrontEnd\modules\blueprints\example\src\Store\Reducers. ts Create a custom state for the reducer.
Modify Spire CSS widget styles
This example shows how to modify the styles of the ProductPrice component, which is used throughout the site. This uses style extension objects in Spire.
Zones in React
You can use zones to establish where a user can add widgets when they are editing a page in Spire. A basic example of how a zone appears in a page or widget component This defines a single zone named "Content" that allows a Spire user to add widgets.
Install third-party npm packages
Configured Commerce lets partners and clients install third-party npm packages within Spire. Go to src/FrontEnd/modules/blueprints/{BlueprintThatNeedsCustomPackage} .
Customize the Invoice and Order PDF
You can customize the OrderDetails, ListDetails and InvoiceDetails PDFs by copying them from /src/InsiteCommerce. Web/ systemResources/Themes/Responsive/Views/Directives/PdfViews to /Extensions/Views/Pdfs .
Translate static content in blueprints
When you create a customization in a blueprint for Optimizely Configured Commerce, you may need to add static text that supports multiple languages. The following is an example of what this looks like in code Use the Import Blueprint Translations option in Spire CMS to find and add any customizations to the Translation Dictionary .
Admin Console read-only data pages
The Admin Console includes read-only data pages for inspecting Spire CMS data without database access. Use these pages to troubleshoot content issues, verify page configurations, or inspect URL routing.