Documentation
Feedback
Guides
Storefront Development

Storefront Development
FastStoreCustomizing sections and componentsSection override - Use cases
Adding more icon options to the Alert component
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:
{"base64":"  ","img":{"width":1116,"height":605,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":245719,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/hcms-icons.gif"}}
Alert default icon nameIcon
Bell
  • Bell

  • BellRinging
  • BellRinging

  • Checked
  • Checked

  • Info
  • Info

  • Truck
  • Truck

  • User
  • User

    • 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:
    1. In the src/components/sections folder, create the folder CustomIconsAlert folder.
    2. In the CustomIconsAlert folder, create the CustomIconsAlert.tsx file.
    3. Import the following to the CustomIconsAlert.tsx file:

      _10
      import { getOverriddenSection } from '@faststore/core'

    4. Define the CustomIconsAlert component:

      _10
      import { AlertSection, getOverriddenSection } from '@faststore/core'
      _10
      _10
      const CustomIconsAlert = getOverriddenSection({
      _10
      Section: AlertSection,
      _10
      })
      _10
      _10
      export 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":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAFklEQVR4nGOQl1M6fvzUnz//VyxfBQApnAeoVEyGRgAAAABJRU5ErkJggg==","img":{"src":"https://vtexhelp.vtexassets.com/assets/docs/src/alert-default___12bbbaf326628380e71339c779d20f22.png","width":1165,"height":173,"type":"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":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAFklEQVR4nGOQl1P69OHrpw9fz5+9CAAt3Ah7Cz51SwAAAABJRU5ErkJggg==","img":{"src":"https://vtexhelp.vtexassets.com/assets/docs/src/alert-custom-icon___8a316b6e33417b6fda47a37c44f6b953.png","width":1162,"height":173,"type":"png"}}
    Contributors
    2
    Photo of the contributor
    Photo of the contributor
    + 2 contributors
    Was this helpful?
    Yes
    No
    Suggest edits (Github)
    Contributors
    2
    Photo of the contributor
    Photo of the contributor
    + 2 contributors
    On this page