Step 2 - Handling 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"}}$

Before you begin

Ensure you have set up your store code by following the guide Step 1 - Setting up your store code for Dynamic Content.

Instructions

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
_46import { _46 HeroSection, _46 getOverriddenSection, _46 useDynamicContent, _46} from "@faststore/core"; _46import { ServerDynamicContentQuery } from "@faststore/core/api"; _46 _46const OverridenHero = getOverriddenSection({ _46 Section: HeroSection, _46 components: { _46 HeroImage: { _46 Component: CustomHeroImage, _46 }, _46 }, _46}); _46 _46function CustomHeroImage() { _46 const context = useDynamicContent<ServerDynamicContentQuery>(); _46 _46 return ( _46 <img _46 src={ _46 context.data?.extraData?.customFieldFromRoot ?? _46 "https://via.placeholder.com/350" _46 } _46 width={400} _46 alt={context.data?.extraData?.customField ?? "Hero section image"} _46 /> _46 ); _46} _46 _46export default function ProductHero( _46 props: React.ComponentProps<typeof OverridenHero> _46) { _46 const context = useDynamicContent<ServerDynamicContentQuery>(); _46 return ( _46 <OverridenHero _46 {...props} _46 image={{ src: "noop", alt: "noop" }} _46 title={ _46 context.data?.extraData?.customField ?? _46 "Add the Hero section title here" _46 } _46 /> _46 ); _46}
- 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":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAMklEQVR4nAEnANj/AKO22Ke939be8P78/gAALIIAAGY0Ypno4tYAAE6YACJ9Qm+k0tTXr8gUS2DsdUMAAAAASUVORK5CYII=","img":{"src":"https://vtexhelp.vtexassets.com/assets/docs/src/dynamic-content-new-section___82b343ceeef6504de8bdf7233f30d199.png","width":940,"height":660,"type":"png"}}$