Overriding a native component
Now that you know how to override a component's prop, learn how to override a native component to use a custom component.
For example, you may want to replace the current
BuyButton component from the ProductDetails section to meet your business needs. Currently, when the BuyButton is clicked, it opens the CartSideBar as its default behavior:
For this guide we will create a custom Buy Button that once you click on it, it displays an
alert for the customer.Using overrides does not significantly impact performance. FastStore's handling of props and design tokens is designed for good performance.
Before you begin
Make sure your
@faststore/core package has the 3.0.0 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. -
Open the
ProductDetailsWithCustomButton.tsxfile and update it with the following code:
Step 2 - Overriding the component
-
Choose a component to override from the list of overridable components of each native section. In this example, we are overriding the
BuyButtoncomponent in theProductDetailssection. -
In the
componentsfolder, if you don't have already theindex.tsxfile, create the file and add the following:
Step 3 - Adding the component to the Headless 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, namedCustomBuyButton, to thesections.jsonfile:
This schema Adds the new
Custom Buy 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 (
+) and add the new section and complete values from the sections fields. -
Click
Save.
Step 4 - Visualizing the component on the page locally
To see your changes locally, set the Headless CMS preview to the development mode.
Refer to the How to preview Headless CMS changes in development mode guide for more information.
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.