Integración de Page Designer con PWA Kit

Con Page Designer, puede crear tipos de página y tipos de componente reutilizables para su sitio del kit de Progressive Web App (PWA). Utilice el editor visual sin código en Business Manager para diseñar, programar y publicar páginas de Page Designer para su sitio. Cuando se integra con un sitio de PWA Kit, Page Designer permite la representación de páginas dinámicas y receptivas utilizando componentes de React.

En esta guía se explica cómo configurar PWA Kit para que tu sitio pueda mostrar páginas de Page Designer.

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 integrar Page Designer con un sitio de PWA Kit:

• Construya su sitio con cualquiera de estas implementaciones:

  • Storefront componible (PWA Kit versión 2.7.0 o posterior) para todo tu sitio con el uso de la plantilla de la app Retail React
  • Una implementación desatendida por fases (Storefront Reference Architecture - SFRA y PWA Kit versión 2.7.0 o posterior con el uso de la plantilla de aplicación Retail React)

• Cree o actualice un cliente público o privado de SLAS. Siga los pasos descritos en Creación de un cliente SLAS o use el punto de conexión de la API registerClient.

  • En el campo Ámbitos, incluya este ámbito: sfcc.shopper-experience.

    Un cliente privado SLAS ofrece varias ventajas sobre un cliente público. Consulte Utilizar un cliente privado de SLAS.

• Obtenga un token de administrador de SLAS.

• Cree sus páginas de Page Designer en Business Manager. Creación de una página con el editor visual del Page Designer

• Dado que PWA Kit es una aplicación web desacoplada, debe crear los componentes de Page Designer Internet Store Markup Language (ISML) y sus correspondientes componentes de PWA Kit React.
• Si los componentes ISML que desea utilizar en su sitio no existen en Page Designer, créelos en Business Manager. Consulte Cómo implementar el componente Page Designers.
• Hay algunos componentes de PWA Kit React que coinciden con sus homólogos de ISML. Consulte Coincidencia de componentes de React e ISML. Si no hay un componente de React que coincida, puedes construirlo.
• La característica de vista previa en Business Manager renderiza componentes ISML de Storefront Reference Architecture (SFRA). Por lo tanto, la apariencia real de su sitio React puede ser diferente de la vista previa. Para obtener una vista previa más precisa de su sitio de PWA Kit, use Vista previa del storefront.

1. En tu proyecto de PWA Kit, crea un archivo llamado app/pages/page-viewer/index.jsx, y agrega este código.

   El propósito del archivo es configurar un visor de páginas para representar las páginas de Page Designer utilizando sus componentes. Este código incluye componentes de ejemplo con fines de demostración. Reemplace los componentes de su código por los que se aplican a su sitio. En este ejemplo de integración se utiliza @salesforce/commerce-sdk-react.

2. En su proyecto de PWA Kit, abra app/routes.jsx y agregue una ruta para navegar a ''.

   Reemplácelo $PAGE_ID con una identificación de página que haya definido para sus páginas de Page Designer en Business Manager.

3. Para iniciar su servidor web localmente, ejecute:

   npm start

4. Para ver Page Designer páginas renderizadas en React.js, vaya a

   `http:localhost:3000/page-viewer/$PAGE_ID y use el ID de página que identificó en el paso 2.

   Por ejemplo, si el ID de tu página es 123, ve a: http://localhost:3000/page-viewer/123.

Esta es una lista de componentes de React que tienen contrapartes ISML coincidentes. Puedes encontrar los componentes de React en el repositorio de GitHub de Page Designer para PWA Kit.

• GitHub: Repositorio de Page Designer para PWA Kit
• Ayuda de Salesforce: Páginas del Page Designer