Overriding native component's props
Overriding props allows you to customize a component's behavior while preserving its native integration. This approach is useful when you want to customize specific aspects of a native component, for example, an icon or a button label.
For this guide, we'll use the Buy Button component to make the customization.
Here's how the initial component looks with the
size prop set as regular in the Product Details Page (PDP):
Before you begin
Make sure your
@faststore/core package has the 3.x version or above. If you need to update
it, refer to this release note.Step by step
Step 1 - Setting up the component file
-
After choosing a native section to be customized from the list of available native sections, open your FastStore project in any code editor of your preference.
-
Go to the
srcfolder, create thecomponentsfolder, and inside it, create thesectionsfolder. You can run the following command to create them:The naming of thesectionsfolder is arbitrary, as overrides can be created in any file since the import is made in thesrc/components/index.tsxfile.macOS and LinuxWindowsbash copy mkdir src/components src/components/sections -
In the
sectionsfolder, create a new file for your customized section. For example, create a new file namedProductDetailsWithCustomButton.tsxunder thesrc/components/sectionsdirectory.macOS and LinuxWindowsbash copy touch src/components/sections/ProductDetailsWithCustomButton.tsx -
Copy and paste the following code snippet into the file:Change the value of the
Sectionvariable to the section you wish to override. In the given example, we set theSectionvariable to the componentProductDetailsSectionto override this specific section. -
Save your changes.
Step 2 - Setting up the override
-
Open the
ProductDetailsWithCustomButton.tsxfile created in the Step 1 - Setting up the component file and add the following code: -
In the
componentsfolder, create theindex.tsxfile and add the following:
This code overrides the
BuyButton props size and iconPosition. You'll see a smaller button than the initial one, and the cart icon positioned on the right side.Step 3 - Adding the component to the CMS
To integrate the section into the Headless CMS, follow the steps below:
-
Create a folder named
cmsin the FastStore root directory. -
Inside
cms, create thefaststorefolder. -
Within the
cms/faststorefolder, create thesections.jsonfile. -
Add the schema of the new section to the
sections.jsonfile, namedProductDetailsWithCustomButton, to thesections.jsonfile:
This schema Adds the new
Product Details with custom button section to the Headless CMS.-
Open a new terminal window and log in to your vtex account by running
vtex login {accountName}. -
run the following command to sync your changes with the Headless CMS:_10yarn cms-sync
-
Access the VTEX Admin and proceed to Storefront > Headless CMS.
-
Click on the page you desire to add the new section.
-
Click the add button (
+), add the new section, and complete values from the section fields. -
Click
Save.Remember: props changed via Headless CMS overlap the changes made through overrides. For example, if you change a prop through override and also change it using Headless CMS, the final prop's value will be the one added using CMS.
Step 4 - Visualizing the component on the page locally
To see your changes locally, you must set the Headless CMS preview to the development mode. For more information, refer to the Previewing Headless CMS changes in development mode guide.
Once you have set the preview for development mode, you should see your new Buy Button in a Product Details Page (PDP):
Step 5 - Publishing your changes
If your changes are working in the development mode and you want to publish them, follow the steps below:
- Go to the Headless CMS in the VTEX Admin.
- Click on a PDP page.
- Click
Publishto make the new button available on the production store.