Optimizely Configured Commerce – Learn CMS Spire 5.X Part-5

In this blog, we will learn below points:

• Modify existing Spire widget styles: CSS rules.
• Implementing Custom widget extensions

In this blog post, we will explore the process of modifying existing Spire widget styles in Spire, a popular content management system. We will provide examples and step-by-step instructions for custom widget extensions, along with details on implementing these changes on a local machine.

Modify existing Spire widget styles: CSS rules

Choosing a Global Software Development Partner to Accelerate Your Digital Strategy

To be successful and outpace the competition, you need a software development partner that excels in exactly the type of digital projects you are now faced with accelerating, and in the most cost effective and optimized way possible.

Get the Guide

This example demonstrates how to change the Product Price component’s styling. This component is utilized across the website.

• This will involve the use of style extension objects in Spire.
• This will involve the use of styled components to specify CSS rules.
• This solution is ideal if you need to customize the style of a widget and:
  • The Mobius component does not provide a prop to modify that style or
  • The CSS rules are complex.

Explore how to transform the styling of the Product Price component, a web-wide staple. Achieving this transformation calls for the application of Spire’s style extension objects and the utilization of styled components for precise CSS rule definition. This solution becomes indispensable when you’re seeking to personalize a widget’s style, particularly in cases where the Mobius component lacks a style-modifying property or when dealing with intricate CSS rules.

Implementing Custom widget extensions

Please follow below steps:

• Create the WidgetExtensions directory in your custom blueprint directory (such as ~/FrontEnd/modules/blueprints/myCustomBlueprint/src/WidgetExtensions).
• In the WidgetExtensions directory, create a new file named CommonComponentsExtensions.ts. The name does not matter. This file will be used for components that are used across the Storefront.
• Add the below code to the CommonComponentsExtensions.ts file.

import {productPriceStyles} from "@insite/content-library/Components/ProductPrice";

import {css} from "styled-components";

import mergeToNew from "@insite/client-framework/Common/mergeToNew";

/* Note: Modifying the styles this way will affect all instances of the widget across the Storefront.

Each component and widget in Spire exports a base style exensions object.

You can import this object and modify the properties on it. This will affect

all instances of the component or widget across the Storefront. In this example,

the style extensions object is named "productPriceStyles".

The `mergeToNew` function uses lodash's `_.merge()` behind the scenes

to make deep merging two objects easier. You can also do this manually

using the JavaScript spread (...) operator.

*/

productPriceStyles.wrapper=mergeToNew(productPriceStyles.wrapper,{

/* This is using the `css` utility function provided by styled-components.
You should extend the base widget or component CSS rules when you add new CSS rules.

Note: You should NOT use CSS selectors to apply CSS rules.

Each of the Mobius components used by widgets in Spire makes use of

the style extension objects. This allows you to target a specific element within a widget

to apply styles.

*/

css: css`

text-align: right;`,});

• To enable the inclusion of Custom widget extensions in the produced JS code, update the start.tsx file that was created during blueprint building. The following code is commented out by default.  Uncomment the code as follows:

// Load all the extensions to the base widgets. This includes style extensions.

const widgetExtensions = require.context("./WidgetExtensions", true);

widgetExtensions.keys().forEach(key => widgetExtensions(key));

• Run Spire using your custom blueprint. Below is an example of starting Spire from the terminal. npm run start myCustomBlueprint 3000
• Visit the Storefront by navigating to the following URL: http://localhost:3000.
• Access both the Product Detail page and the Product List page for a comprehensive experience.

Conclusion:

In summary, this blog post introduced the transformation of Optimizely Configured Commerce and provided valuable insights into customizing Spire-powered websites. We explored the modification of widget styles and the implementation of custom widget extensions, equipping you with the tools to create a unique and tailored online presence. With these techniques, you can align your website with your brand’s identity and enhance the user experience for your visitors. Your journey to website customization and personalization starts here.