In this tutorial, we'll use template extensibility to create a custom component for a site. In this example, we'll create a custom footer. Because a footer is an existing component in the base template and we don’t want to change the page layout, we’ll override the footer at the component level.
For more guidance, see this documentation: Best Practices and Troubleshoot.
Before running the commands in this tutorial, replace any placeholders with actual values. Placeholders are formatted like this: $PLACEHOLDER.
tip: Use the headings on the right side of the page to move through this tutorial.
Prerequisite
To complete this tutorial, do either of these:
-
Use a project created with PWA Kit version 3.x.
or
-
If you don’t have a project, create a PWA Kit project by running:
npx @salesforce/pwa-kit-create-app@latest ——outputDir $PATH/TO/NEW/LOCAL/PROJECT
1. Create Files to Override the Defaults
<style> ul.no-bullets { list-style-type: "a. "; } </style> <ul type="a"> <li> Under <code>overrides/app</code>, create a folder called <code>components</code>.</li> <li> In the <code>components</code> folder, create a folder called <code>footer</code>.</li> <li> In the <code>footer</code> folder, create a file called <code>index.jsx.</code> </li> </ul>The new folders and file have this structure:
2. Create a Custom Footer
Add this code to overrides/components/footer/index.jsx:
import React from "react";
import {
Box,
Container,
Stack,
Text,
Link,
Icon,
Input,
Button,
useColorModeValue,
} from "@chakra-ui/react";
import {
SocialFacebookIcon,
SocialTwitterIcon,
SocialInstagramIcon,
} from "@salesforce/retail-react-app/app/components/icons";
const Footer = () => {
return (
<Box
bg={useColorModeValue("gray.50", "gray.900")}
color={useColorModeValue("gray.700", "gray.200")}
>
<Container as={Stack} maxW={"6xl"} py={10}>
<Stack direction={{ base: "column", md: "row" }} spacing={4}>
<Link href="/about">About Us</Link>
<Link href="/contact">Contact</Link>
<Link href="/faq">FAQ</Link>
</Stack>
<Stack
direction={{ base: "column", md: "row" }}
justifyContent={"space-between"}
alignItems={"center"}
>
<Text>
© {new Date().getFullYear()} Your Company Name. All rights reserved
</Text>
<Stack direction={"row"} spacing={6}>
<Icon as={SocialFacebookIcon} />
<Icon as={SocialTwitterIcon} />
<Icon as={SocialInstagramIcon} />
</Stack>
</Stack>
<Stack
direction={{ base: "column", md: "row" }}
spacing={4}
mt={10}
alignItems={"center"}
>
<Text>Subscribe to our newsletter</Text>
<Input placeholder="Your email address" />
<Button>Subscribe</Button>
</Stack>
</Container>
</Box>
);
};
export default Footer;
3. Preview Your Homepage
<style> ul.no-bullets { list-style-type: "a. "; } </style> <ul type="a"> <li> Run <code>npm start</code>.</li> <li> Go to <a href=http://localhost:3000/my-new-route> http://localhost:3000</a>.</li> </ul> On the homepage, the footer looks similar to the one shown below. For example, the background color and wording are customized.