Integre Page Designer com PWA Kit

Com Page Designer, você pode criar tipos de páginas e tipos de componentes reutilizáveis para o site do Kit Progressive Web App (PWA). Use o editor visual sem código no Business Manager para criar, programar e publicar páginas de Page Designer para seu site. Quando integrado a um site PWA Kit, o Page Designer permite a renderização de páginas dinâmicas e responsivas usando componentes do React.

Este guia explica como configurar PWA Kit para que seu site possa exibir páginas Page Designer.

Antes de executar os comandos neste tutorial, substitua os espaços reservados por valores reais. Os espaços reservados são formatados da seguinte maneira: $PLACEHOLDER.

Para integrar Page Designer a um site PWA Kit:

• Crie seu site com uma destas implementações:

  • Storefront componível (PWA Kit versão 2.7.0 ou posterior) para todo o seu site com o uso do modelo de aplicativo Retail React
  • Uma distribuição sem cabeça em fases (Storefront Reference Architecture - SFRA e PWA Kit versão 2.7.0 ou posterior com o uso do modelo de aplicativo Retail React)

• Crie ou atualize um cliente SLAS público ou privado. Siga as etapas em Criar um cliente SLAS ou use o endpoint da API registerClient.

  • No campo Escopos, inclua este escopo: sfcc.shopper-experience.

    Um cliente privado SLAS oferece várias vantagens sobre um cliente público. Consulte Usar um um cliente privado SLAS.

• Obtenha um token de administrador SLAS.

• Crie suas páginas Page Designer no Business Manager. Criar uma página usando o editor visual do Page Designer

• Como PWA Kit é um aplicativo Web desacoplado, você precisa criar os componentes Page Designer Internet Store Markup Language (ISML) e seus componentes correspondentes do PWA Kit React.
• Se os componentes do ISML que você deseja usar em seu site não existirem no Page Designer, crie-os no Business Manager. Veja como implementar o componente Page Designers.
• Existem alguns componentes do PWA Kit React que correspondem às suas contrapartes ISML. Consulte Componentes React e ISML correspondentes. Se não houver um componente React correspondente, você poderá criá-lo.
• O recurso de visualização no Business Manager renderiza Storefront Reference Architecture (SFRA) ISML componentes. Portanto, a aparência real do seu site React pode ser diferente da visualização. Para obter uma visualização mais precisa do seu site PWA Kit, use o Storefront Preview.

1. Em seu projeto PWA Kit, crie um arquivo chamado app/pages/page-viewer/index.jsx e adicione esse código.

   O objetivo do arquivo é configurar um visualizador de páginas para renderizar suas páginas Page Designer usando seus componentes. Este código inclui componentes de exemplo para fins de demonstração. Substitua os componentes em seu código pelos que se aplicam ao seu site. Este exemplo de integração usa @salesforce/commerce-sdk-reacto .

2. Em seu projeto PWA Kit, abra app/routes.jsx e adicione uma rota para navegar até ''.

   Substitua $PAGE_ID por um ID de página que você definiu para suas páginas Page Designer no Business Manager.

3. Para iniciar o servidor Web localmente, execute:

   npm start

4. Para ver Page Designer páginas renderizadas em React.js, vá para

   `http:localhost:3000/page-viewer/$PAGE_ID e use o ID da página que você identificou na etapa 2.

   Por exemplo, se o ID da página for 123, vá para: http://localhost:3000/page-viewer/123.

Esta é uma lista de componentes do React que têm equivalentes ISML correspondentes. Você pode encontrar os componentes do React no Page Designer GitHub Repo for PWA Kit.

• GitHub: Page Designer Repo para PWA Kit
• Ajuda do Salesforce: Páginas do Page Designer