Personalización de un componente con extensibilidad de plantilla

En este tutorial, usaremos la extensibilidad de plantillas para crear un componente personalizado para un sitio. En este ejemplo, crearemos un pie de página personalizado. Debido a que un pie de página es un componente existente en la plantilla base y no queremos cambiar el diseño de la página, anularemos el pie de página a nivel del componente.

Para obtener más orientación, consulte esta documentación: Mejores prácticas y solución deproblemas.

Antes de ejecutar los comandos de este tutorial, reemplace los marcadores de posición por valores reales. Los marcadores de posición tienen el siguiente formato: $PLACEHOLDER.

Para completar este tutorial, realice una de las siguientes acciones:

1. Usar un proyecto creado con la versión 3.x de PWA Kit.

   o

2. Si no tienes un proyecto, crea un proyecto de PWA Kit ejecutando:

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

• En overrides/app, cree una carpeta llamada components.
• En la carpeta components , cree una carpeta llamada footer.
• En la carpeta de pie de página, cree un archivo llamado index.jsx.

Las nuevas carpetas y archivos tienen esta estructura:

Añade este código a overrides/components/footer/index.jsx:

• Ejecute npm start.
• Vaya a http://localhost:3000.

• Asegúrese de que el proyecto incluya los archivos de proyecto necesarios en la carpeta de anulaciones.
• Implemente su paquete.

• Extensibilidad de la plantilla
• Retail React App