Personnaliser un composant à l’aide de l’extensibilité des modèles

Dans ce tutoriel, nous allons utiliser l’extensibilité des modèles pour créer un composant personnalisé pour un site. Dans cet exemple, nous allons créer un pied de page personnalisé. Étant donné qu’un pied de page est un composant existant dans le modèle de base et que nous ne voulons pas modifier la mise en page, nous allons remplacer le pied de page au niveau du composant.

Pour plus d’informations, consultez cette documentation : Meilleures pratiques et Dépannage.

Avant d’exécuter les commandes de ce tutoriel, remplacez les espaces réservés par des valeurs réelles. Les espaces réservés sont formatés ainsi : $PLACEHOLDER.

Utilisez les en-têtes sur le côté droit de la page pour parcourir ce tutoriel.

Tip

Prérequis

Pour suivre ce tutoriel, effectuez l’une des opérations suivantes :

Utilisez un projet créé avec PWA Kit version 3.x.

ou
Si vous n’avez pas de projet, créez un projet PWA Kit en exécutant :

npx @salesforce/pwa-kit-create-app@latest ——outputDir $PATH/TO/NEW/LOCAL/PROJECT

1. Créer des fichiers pour remplacer les valeurs par défaut

Sous overrides/app, créez un dossier appelé components.
Dans le dossier components, créez un dossier appelé footer.
Dans le dossier du pied de page, créez un fichier appelé index.jsx.

Les nouveaux dossiers et fichiers ont la structure suivante :

Capture d’écran associée

2. Créer un pied de page personnalisé

Ajoutez ce code à 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>© {new Date().getFullYear()} Your Company Name. All rights reserved</Text>
38          <Stack direction={'row'} spacing={6}>
39            <Icon as={SocialFacebookIcon} />
40            <Icon as={SocialTwitterIcon} />
41            <Icon as={SocialInstagramIcon} />
42          </Stack>
43        </Stack>
44        <Stack direction={{base: 'column', md: 'row'}} spacing={4} mt={10} alignItems={'center'}>
45          <Text>Subscribe to our newsletter</Text>
46          <Input placeholder="Your email address" />
47          <Button>Subscribe</Button>
48        </Stack>
49      </Container>
50    </Box>
51  )
52}
53
54export default Footer

3. Prévisualiser votre page d’accueil

Exécutez npm start.
Accédez à http://localhost:3000.

Sur la page d’accueil, le pied de page ressemble à celui illustré ci-dessous. Par exemple, la couleur d’arrière-plan et le libellé sont personnalisés.

Capture d’écran associée

4. Déployer votre paquet

Assurez-vous que votre projet inclut les fichiers de projet requis dans le dossier overrides.


  Déployez votre paquet.


Voir aussi 

Extensibilité des modèles
Retail React App