Adding more icon options to the Alert component

FastStore Customizing sections and components Section override - Use cases

This guide illustrates a common use case for getOverriddenSection in FastStore. It focuses on customizing the Headless CMS schema for a section to provide more icon options.

For detailed instructions on overriding components, refer to Overriding native component’s props and Overriding a native component.

Context

The native Alert section provides the following icon options by default:

Alert default icon name	Icon
`Bell`	${"base64":" ","img":{"width":32,"height":29,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1335,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/bell-icon___78c462f54a529a5b68f696ebb9256e47.png"}}$
`BellRinging`	${"base64":" ","img":{"width":32,"height":30,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1502,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/bell-ringing-icon___ebaea6a1dfef58f1c76b14070703704b.png"}}$
`Checked`	${"base64":" ","img":{"width":32,"height":24,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":830,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/checked-icon___c4dc5aa336fca566ec361125a9eb846e.png"}}$
`Info`	${"base64":" ","img":{"width":26,"height":26,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":479,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/info-icon___f8c0cd591967892ec72328f277efa9d1.png"}}$
`Truck`	${"base64":" ","img":{"width":32,"height":25,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1270,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/truck-icon___ec3a7f0fcf2c02580d49444b71e8fc36.png"}}$
`User`	${"base64":" ","img":{"width":32,"height":29,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1278,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/user-icon___999dffa96120d0e51ead18263423ddad.png"}}$

You want to allow Headless CMS editors to select in the Alert section from a wider range of icons supported by the @faststore/ui iconography library.

Implementation

Overriding the Alert section

By leveraging getOverriddenSection, you can customize the Alert section's Headless CMS schema to offer additional icon options. Follow the steps below:

In the src/components/sections folder, create the folder CustomIconsAlert folder.
In the CustomIconsAlert folder, create the CustomIconsAlert.tsx file.
Import the following to the CustomIconsAlert.tsx file:

_10import { getOverriddenSection } from '@faststore/core'
Define the CustomIconsAlert component:

_10import { AlertSection, getOverriddenSection } from '@faststore/core' _10 _10const CustomIconsAlert = getOverriddenSection({ _10Section: AlertSection, _10}) _10 _10export default CustomIconsAlert
- This is an Alert component override with custom icon options in the Headless CMS. The component is defined using getOverriddenSection.
- This code changes only the schema to include more options for native Icons supported by @faststore/ui.
- The override options specify the Section to be overridden (Alert).
For further details on code implementation, see the CustomIconsAlert folder available in the playground.store repository.

Synchronizing the changes with the Headless CMS

Add the section to the Headless CMS by following the instructions available in syncing components to the Headless CMS.

The following schema was used as an example in cms/faststore/sections.json:


_45[
_45  {
_45    "name": "CustomIconsAlert",
_45    "schema": {
_45      "title": "Alert with more Icon options",
_45      "description": "Add an alert that has more Icon options",
_45      "type": "object",
_45      "required": ["icon", "content", "dismissible"],
_45      "properties": {
_45        "icon": {
_45          "type": "string",
_45          "title": "Icon",
_45          "enumNames": [
_45            "Bell",
_45            "BellRinging",
_45            "Checked",
_45            "Info",
_45            "Truck",
_45            "User",
_45            "Plus",
_45            "PlusCircle",
_45            "Ruler",
_45            "Star",
_45            "Storefront",
_45            "Twitter"
_45          ],
_45          "enum": [
_45            "Bell",
_45            "BellRinging",
_45            "Checked",
_45            "Info",
_45            "Truck",
_45            "User",
_45            "Plus",
_45            "PlusCircle",
_45            "Ruler",
_45            "Star",
_45            "Storefront",
_45            "Twitter"
_45          ]
_45        }
_45      }
_45    }
_45  }
_45]

For further details on code implementation, see the sections.json file available in the playground.store repository.

Results

Once you have set your development mode to see the changes locally, you can see the new Alert icon. Below, you can check an example storefront before and after the instructions in this guide:

Before

The native Alert displays one of the default icons, BellRinging, alongside the text Get 15% off today: NEW15! Buy now.

${"base64":" ","img":{"width":1165,"height":173,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":21794,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/alert-default___12bbbaf326628380e71339c779d20f22.png"}}$
After

The native Alert was replaced with the custom one, which brings a new icon, Star, from the @faststore/ui iconography library, alongside the text Rate your favorite item.

${"base64":" ","img":{"width":1162,"height":173,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":19244,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/alert-custom-icon___8a316b6e33417b6fda47a37c44f6b953.png"}}$