Documentation
Feedback
Guides
Storefront Development

Storefront Development
FastStoreCustomizing pages with Dynamic Content
Step 2 - Handling Dynamic Content in custom sections
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.
  1. Open your Faststore project, and Inside src, create the folder components.
  2. Inside components, create a subfolder named sections.
  3. Inside sections create a file called ProductHero.tsx, and paste the following code:
    src/components/sections/ProductHero.tsx

    _46
    import {
    _46
    HeroSection,
    _46
    getOverriddenSection,
    _46
    useDynamicContent,
    _46
    } from "@faststore/core";
    _46
    import { ServerDynamicContentQuery } from "@faststore/core/api";
    _46
    _46
    const OverridenHero = getOverriddenSection({
    _46
    Section: HeroSection,
    _46
    components: {
    _46
    HeroImage: {
    _46
    Component: CustomHeroImage,
    _46
    },
    _46
    },
    _46
    });
    _46
    _46
    function 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
    _46
    export 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.
  4. Create an index.tsx file inside the components folder and paste the following code:

    _10
    import ProductHero from “./sections/ProductHero”
    _10
    _10
    export 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:
  1. Create the folders cms/faststore inside your project directory.
  2. Inside faststore, create the sections.json file.
  3. 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
    ]

  4. Run yarn cms-sync to synchronize the changes.
  5. Go to the VTEX Admin, and access Storefront > Headless CMS.
  6. Click Create document and choose Landing Page to create a new landing page.
  7. Add the new section.
  8. 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.
  9. Click Save.
  10. Open your terminal and run yarn dev.
    Make sure you are logged in to your store account. If not run vtex login {accountname}.
  11. Open the localhost indicated in the terminal and add the /my-landing-page to the slug, e.g., https://localhots:3000/my-landing-page.
  12. 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"}}
Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
1
Photo of the contributor
+ 1 contributors
On this page