Intégrer Page Designer à PWA Kit

Avec Page Designer, vous pouvez créer des types de pages et des types de composants réutilisables pour votre site Progressive Web App (PWA) Kit. Utilisez l’éditeur visuel sans code de Business Manager pour concevoir, planifier et publier des pages Page Designer pour votre site. Lorsqu’il est intégré à un site PWA Kit, Page Designer permet le rendu de pages dynamiques et réactives à l’aide de composants React.

Ce guide explique comment configurer PWA Kit afin que votre site puisse afficher des pages Page Designer.

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

Pour intégrer Page Designer à un site PWA Kit :

• Créez votre site avec l’une des implémentations suivantes :

  • Boutique en ligne composable (PWA Kit version 2.7.0 ou ultérieure) pour l’ensemble de votre site avec l’utilisation du modèle d’application Retail React
  • Un déploiement headless par phases (Storefront Reference Architecture - SFRA et PWA Kit version 2.7.0 ou ultérieure avec utilisation du modèle d’application Retail React)

• Créez ou mettez à jour un client public ou privé SLAS. Suivez les étapes décrites dans Créer un client SLAS ou utilisez le point de terminaison de l’API registerClient.

  • Dans le champ Étendues, incluez cette étendue : sfcc.shopper-experience.

    Un client privé SLAS offre plusieurs avantages par rapport à un client public. Voir Utiliser un client privé SLAS.

• Obtenez un jeton d’administrateur SLAS.

• Créez vos pages Page Designer dans Business Manager. Créer une page à l’aide de l’éditeur visuel Page Designer

• Étant donné que PWA Kit est une application Web découplée, vous devez créer à la fois les composants ISML (Internet Store Markup Language) de Page Designer et les composants React correspondants du PWA Kit.
• Si les composants ISML que vous souhaitez utiliser sur votre site n’existent pas dans Page Designer, créez-les dans Business Manager. Reportez-vous à la section Comment implémenter le composant Page Designers.
• Certains composants PWA Kit React correspondent à leurs homologues ISML. Voir Mise en correspondance des composants React et ISML. S’il n’y a pas de composant React correspondant, vous pouvez le construire.
• La fonction d’aperçu de Business Manager affiche les composants ISML Storefront Reference Architecture (SFRA). Ainsi, l’apparence réelle de votre site React peut être différente de l’aperçu. Pour obtenir un aperçu plus précis de votre site PWA Kit, utilisez l’aperçu de la boutique en ligne.

1. Dans votre projet PWA Kit, créez un fichier appelé app/pages/page-viewer/index.jsx, et ajoutez ce code.

   Le but du fichier est de configurer une visionneuse de pages pour afficher vos pages Page Designer à l’aide de vos composants. Ce code inclut des exemples de composants à des fins de démonstration. Remplacez les composants de votre code par ceux qui s’appliquent à votre site. Cet exemple d’intégration utilise @salesforce/commerce-sdk-react.

2. Dans votre projet PWA Kit, ouvrez app/routes.jsx et ajoutez un itinéraire pour naviguer jusqu’à ''.

   Remplacez-le $PAGE_ID par un identifiant de page que vous avez défini pour vos pages Page Designer dans Business Manager.

3. Pour démarrer votre serveur web localement, exécutez :

   npm start

4. Pour afficher Page Designer pages rendues dans React.js, accédez à

   `http :3000/page-viewer/$PAGE_ID et utilisez l’identifiant de page que vous avez identifié à l’étape 2.

   Par exemple, si l’identifiant de votre page est 123, accédez à : http://localhost:3000/page-viewer/123.

Il s’agit d’une liste de composants React qui ont des équivalents ISML correspondants. Vous pouvez trouver les composants React dans le référentiel GitHub de Page Designer pour PWA Kit.

• GitHub: Référentiel Page Designer pour PWA Kit
• Aide Salesforce : Pages Page Designer