La bonne façon de créer ses propres composants avec XM Cloud / Blogs / Perficient

Je vois parfois des gens créer des composants de manière incorrecte dans XM Cloud. J’ai donc décidé de créer et de partager ce guide avec vous.

Donc, fondamentalement, la création de votre propre composant comporte cinq étapes :

1. Créez un module SXA qui servira de conteneur enfichable pour tous les actifs nécessaires à vos composants, si ce n’est pas encore fait.
2. Le moyen le plus simple de créer un composant consiste à cloner un composant existant correspondant essentiellement. Si vous devez vous appuyer sur des éléments de source de données, clonez celui qui exploite déjà la source de données. Le script d’échafaudage SPE fera le reste du travail à votre place. Assurez-vous d’attribuer un composant nouvellement créé à un module à partir de l’étape 1 ci-dessus.
3. Désormais, ayant un module avec des composants, vous devez le rendre visible pour votre site Web, mais en ajoutant un module à un site choisi. Cela permet à votre site de voir une section correspondante dans la boîte à outils avec des composants nouvellement créés que vous pouvez utiliser immédiatement, à la fois pour Experience Editor et Pages.
4. Vous devez vous assurer du Component Name Le champ fait référence au nom des fichiers de base de code TSX correspondants comme /src/<jss_app>/src/components/<your component>.tsx ou un niveau supplémentaire vers le bas dans un dossier portant le même nom que le composant. Étant donné que le composant est entièrement cloné à partir du composant existant, vous pouvez également copier les fichiers TSX originaux sous un nouveau nom et cela fonctionnera immédiatement.
5. N’oubliez pas d’ajouter tous les nouveaux emplacements à la sérialisation et de l’archiver dans le contrôle de code source avec sa base de code. Voici les emplacements à retenir :
   • /sitecore/layout/Placeholder Settings/Feature/Tailwind Components
   • /sitecore/templates/Feature/Tailwind Components
   • /sitecore/layout/Layouts/Feature/Tailwind Components
   • /sitecore/layout/Renderings/Feature/Tailwind Components
   • /sitecore/media library/Feature/Tailwind Components
   • /sitecore/templates/Branches/Feature/Tailwind Components
   • /sitecore/system/Settings/Feature/Tailwind Components

Pour simplifier les choses, j’ai enregistré l’intégralité de cette procédure pas à pas (et en fait « talkthrough ») montrant l’ensemble du processus :

J’espère que cette vidéo vous sera utile !