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.Instructions
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
src
folder, create thecomponents
folder, and inside it, create thesections
folder. You can run the following command to create them:The naming of thesections
folder is arbitrary, as overrides can be created in any file since the import is made in thesrc/components/index.tsx
file.macOS and LinuxWindowsbash copy mkdir src/components src/components/sections
-
In the
sections
folder, create a new file for your customized section. For example, create a new file namedProductDetailsWithCustomButton.tsx
under thesrc/components/sections
directory.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
Section
variable to the section you wish to override. In the given example, we set theSection
variable to the componentProductDetailsSection
to override this specific section. -
Save your changes.
Step 2 - Setting up the override
-
Open the
ProductDetailsWithCustomButton.tsx
file created in the Step 1 - Setting up the component file and add the following code: -
In the
components
folder, create theindex.tsx
file 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
cms
in the FastStore root directory. -
Inside
cms
, create thefaststore
folder. -
Within the
cms/faststore
folder, create thesections.json
file. -
Add the schema of the new section to the
sections.json
file, namedProductDetailsWithCustomButton
, to thesections.json
file:
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
Publish
to make the new button available on the production store.