Consuming the Dynamic Content in custom sections

FastStore Customizing pages with Dynamic Content

After mapping pages and data-fetching functions and choosing one of the methods for creating Dynamic Content via API fetching, use the data to render it in a store section. In this step, we will create a new Hero section, placed on a landing page, to render the image from the data.

Before: Using Hero native section with an image uploaded from the Headless CMS.	After: Using a custom Hero section fetching the image content from an API.
${"base64":" ","img":{"width":940,"height":631,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":488422,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/without-dynamic-content___9e65e7a095029f020fe64599348b695a.png"}}$	${"base64":" ","img":{"width":940,"height":660,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":27256,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/dynamic-content-new-section___82b343ceeef6504de8bdf7233f30d199.png"}}$

1. Creating the section

Create and display a section for the Dynamic Content. For this tutorial, we’ll create a Hero.

Open your Faststore project, and Inside src, create the folder components.
Inside components, create a subfolder named sections.
Inside sections create a file called ProductHero.tsx, and paste the following code:

src/components/sections/ProductHero.tsx
_43import { _43 HeroSection, _43 getOverriddenSection, _43 useDynamicContent, _43} from "@faststore/core"; _43import { ServerDynamicContentQuery } from "@faststore/core/api"; _43 _43const OverridenHero = getOverriddenSection({ _43 Section: HeroSection, _43 components: { _43 HeroImage: { _43 Component: CustomHeroImage, _43 }, _43 }, _43}); _43 _43function CustomHeroImage() { _43 const context = useDynamicContent<ServerDynamicContentQuery>(); _43 _43 return ( _43 <img _43 src={ _43 context.data?.extraData?.customFieldFromRoot ?? _43 "https://via.placeholder.com/350" _43 } _43 width={400} _43 alt={context.data?.extraData?.customField ?? "Hero section image"} _43 /> _43 ); _43} _43 _43export default function ProductHero( _43 props: React.ComponentProps<typeof OverridenHero> _43) { _43 const context = useDynamicContent<ServerDynamicContentQuery>(); _43 return ( _43 <OverridenHero _43 {...props} _43 image={{ src: "noop", alt: "noop" }} _43 title={context.data?.extraData?.customField ?? "Add the Hero section title here"} _43 /> _43 ); _43}
- The useDynamicContent hook brings the data from the @faststore/core package.
- The ServerDynamicContentQuery specifies the type of data that we will get from the FastStore API package.
- Since we are working with Hero, we import the Hero component and its styles.
- The useDynamicContent hook holds the information in the data variable.
- In return, we validate the data and display the image in the Hero and the product's name using some HTML elements.
Create an index.tsx file inside the components folder and paste the following code:

_10import ProductHero from “./sections/ProductHero” _10 _10export default { ProductHero };

This file helps import and export our new component. Now that the component is ready, let’s create its section schema for the Headless CMS.

2. Synchronizing the component with Headless CMS

To define a schema for the ProductHero component within the Headless CMS, follow the steps below:

Create the folders cms/faststore inside your project directory.
Inside faststore, create the sections.json file.
Paste the following code:

_52[ _52 { _52 "name": "ProductHero", _52 "schema": { _52 "title": "Hero with a Fixed Image", _52 "description": "Add a quick promotion with an image/action pair", _52 "type": "object", _52 "required": ["title"], _52 "properties": { _52 "title": { _52 "title": "Title", _52 "type": "string" _52 }, _52 "subtitle": { _52 "title": "Subtitle", _52 "type": "string" _52 }, _52 "link": { _52 "title": "Call to Action", _52 "type": "object", _52 "properties": { _52 "text": { _52 "type": "string", _52 "title": "Text" _52 }, _52 "url": { _52 "type": "string", _52 "title": "URL" _52 }, _52 "linkTargetBlank": { _52 "type": "boolean", _52 "title": "Open link in new window?", _52 "default": false _52 } _52 } _52 }, _52 "colorVariant": { _52 "type": "string", _52 "title": "Color variant", _52 "enumNames": ["Main", "Light", "Accent"], _52 "enum": ["main", "light", "accent"] _52 }, _52 "variant": { _52 "type": "string", _52 "title": "Variant", _52 "enumNames": ["Primary", "Secondary"], _52 "enum": ["primary", "secondary"] _52 } _52 } _52 } _52 } _52]
Run yarn cms-sync to synchronize the changes.
Go to the VTEX Admin, and access Storefront > Headless CMS.
Click Create document and choose Landing Page to create a new landing page.
Add the new section.
Open the Settings tab, and in the SEO path, add the slug for the new landing page, for example, my-landing-page. This step is essential because this slug is being consumed in the index.tsx file from the dynamicContent folder and this slug identifies in the code which content we want to bring to the page.
Click Save.
Open your terminal and run yarn dev.

Make sure you are logged in to your store account. If not run vtex login {accountname}.
Open the localhost indicated in the terminal and add the /my-landing-page to the slug, e.g., https://localhots:3000/my-landing-page.
Go to the localhost available and refresh the page. You will have the section similar to the following:

${"base64":" ","img":{"width":940,"height":660,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":27256,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/dynamic-content-new-section___82b343ceeef6504de8bdf7233f30d199.png"}}$