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 displays an
alert
once the user clicks on it.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.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. -
Open the
ProductDetailsWithCustomButton.tsx
file 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
BuyButton
component in theProductDetails
section. -
In the
components
folder, if you don't have already theindex.tsx
file, 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
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, namedCustomBuyButton
, to thesections.json
file:
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 (
+
), add the new section, and complete values from the section 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 on 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.