This example shows how to modify the styles of the ProductPrice component. This component is used across the site.
- 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.
Spire allows for CSS styles to be passed down to specific child widgets. This capability is the result of adding a React Context Provider and Hook to additionalStyles.tsx. The widgets with this ability include Banner, Button, Image, Link, LinkList, Logo, NavigationList, Quick Order, Rich Content, Slideshow, SocialLinks, Subscribe, SecondaryNavigation, HeaderLinkList, HeaderSearchInput, Header/MainNavigation, HeaderSignIn, HeaderShipToAddress, CurrencyMenu, and LanguageMenu.
- You have created a custom blueprint.
This example will use the VS Code IDE for modifying the widget A pre-configured content holder ISC_Content user roles may use to add content to website pages without having to develop page elements. styles.
- Open your IDE.
- In your IDE, open the ~/src/FrontEnd directory from the InsiteCommerce repository.
- Find 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 following code to the CommonComponentsExtensions.ts file.
- Save the file.
- Run Spire using your custom blueprint. Below is an example of starting Spire from the terminal. You may also do this from your IDE. Spire includes some default VS Code launch configurations.
1 npm run start myCustomBlueprint 3000
- Go to the Storefront. The Storefront URL is http://localhost:3000. Use the port number used to run Spire.
- Go to a Product Detail page and the Product List page.
An image of the resulting Product Detail page is below.
An image of the resulting Product List page is below.