このチュートリアルでは、拡張テンプレートを使用して、サイトのカスタムコンポーネントを作成します。この例では、カスタムフッターを作成します。フッターはベーステンプレートの既存のコンポーネントであり、ページレイアウトの変更を避ける必要があるため、コンポーネントレベルでフッターを上書きします。
詳細については、ベストプラクティスおよびトラブルシューティングのドキュメントを参照してください。
このチュートリアルのコマンドを実行する前に、プレースホルダーを実際の値に置き換えてください。プレースホルダーは $PLACEHOLDER の形式になっています。
このページの右側にある見出しを使用して、このチュートリアル内を移動します。
Tip
このチュートリアルを完了するには、次のいずれかの操作を行います。
PWA Kit バージョン 3.x で作成されたプロジェクトを使用します。
または
プロジェクトがない場合は、次のコマンドを実行して PWA Kit プロジェクトを作成します。
npx @salesforce/pwa-kit-create-app@latest ——outputDir $PATH/TO/NEW/LOCAL/PROJECT
overrides/app の下に components というフォルダーを作成します。components フォルダーに、footer というフォルダーを作成します。footer フォルダーに、index.jsx というファイルを作成します。新しいフォルダーとファイルの構造は次のとおりです。
次のコードを overrides/components/footer/index.jsx に追加します。
1import React from "react";
2
3import {
4 Box,
5 Container,
6 Stack,
7 Text,
8 Link,
9 Icon,
10 Input,
11 Button,
12 useColorModeValue,
13} from "@chakra-ui/react";
14import {
15 SocialFacebookIcon,
16 SocialTwitterIcon,
17 SocialInstagramIcon,
18} from "@salesforce/retail-react-app/app/components/icons";
19
20const Footer = () => {
21 return (
22 <Box
23 bg={useColorModeValue("gray.50", "gray.900")}
24 color={useColorModeValue("gray.700", "gray.200")}
25 >
26 <Container as={Stack} maxW={"6xl"} py={10}>
27 <Stack direction={{ base: "column", md: "row" }} spacing={4}>
28 <Link href="/about">About Us</Link>
29 <Link href="/contact">Contact</Link>
30 <Link href="/faq">FAQ</Link>
31 </Stack>
32 <Stack
33 direction={{ base: "column", md: "row" }}
34 justifyContent={"space-between"}
35 alignItems={"center"}
36 >
37 <Text>
38 © {new Date().getFullYear()} Your Company Name. All rights reserved
39 </Text>
40 <Stack direction={"row"} spacing={6}>
41 <Icon as={SocialFacebookIcon} />
42 <Icon as={SocialTwitterIcon} />
43 <Icon as={SocialInstagramIcon} />
44 </Stack>
45 </Stack>
46 <Stack
47 direction={{ base: "column", md: "row" }}
48 spacing={4}
49 mt={10}
50 alignItems={"center"}
51 >
52 <Text>Subscribe to our newsletter</Text>
53 <Input placeholder="Your email address" />
54 <Button>Subscribe</Button>
55 </Stack>
56 </Container>
57 </Box>
58 );
59};
60
61export default Footer;npm start を実行します。
j