Integrazione di Page Designer con PWA Kit

Con Page Designer è possibile creare tipi di pagina e di componente riutilizzabili per il sito del kit Progressive Web App (PWA). Utilizzare l'editor visuale senza codice di Business Manager per progettare, programmare e pubblicare pagine di Page Designer per il sito. Se integrato con un sito PWA Kit, Page Designer consente il rendering di pagine dinamiche e reattive utilizzando i componenti React.

Questa guida spiega come configurare PWA Kit in modo che il sito possa visualizzare le pagine di Page Designer.

Prima di eseguire i comandi di questo tutorial, sostituire tutti i segnaposto con valori effettivi. I segnaposto sono formattati nel seguente modo: $PLACEHOLDER.

Per integrare Page Designer in un sito PWA Kit:

• Creare il sito con una delle seguenti implementazioni:

  • Storefront componibile (PWA Kit versione 2.7.0 o successiva) per l'intero sito con l'utilizzo del modello di app Retail React
  • Un'implementazione headless graduale (Storefront Reference Architecture - SFRA e PWA Kit versione 2.7.0 o successiva con utilizzo del modello di app Retail React)

• Creare o aggiornare un client pubblico o privato SLAS. Seguire la procedura descritta in Creare un client SLAS o utilizzare l'endpoint API registerClient.

  • Nel campo Ambiti, includere il seguente ambito: sfcc.shopper-experience.

    Un client privato SLAS offre diversi vantaggi rispetto a un client pubblico. Vedere Use a SLAS Private Client (Uso di un client privato SLAS).

• Ottenere un token di amministrazione SLAS.

• Creare le pagine di Page Designer in Business Manager. Creazione di una pagina con l'editor visuale Page Designer

• Poiché PWA Kit è un'app web disaccoppiata, è necessario creare sia i componenti Page Designer Internet Store Markup Language (ISML) che i corrispondenti componenti PWA Kit React.
• Se i componenti ISML che si desidera utilizzare sul sito non esistono in Page Designer, crearli in Business Manager. Vedere Come implementare il componente Page Designer.
• Esistono alcuni componenti di PWA Kit React che corrispondono alle loro controparti ISML. Vedere Corrispondenza dei componenti React e ISML. Se non c'è un componente React corrispondente, puoi crearlo.
• La funzione di anteprima in Business Manager esegue il rendering dei componenti ISML Storefront Reference Architecture (SFRA). Quindi l'aspetto effettivo del tuo sito React può essere diverso dall'anteprima. Per ottenere un'anteprima più accurata del sito PWA Kit, utilizzare Anteprima storefront.

1. Nel progetto PWA Kit creare un file denominato app/pages/page-viewer/index.jsx e aggiungere questo codice.

   Lo scopo del file è quello di impostare un visualizzatore di pagine per il rendering delle pagine di Page Designer utilizzando i componenti. Questo codice include componenti di esempio a scopo dimostrativo. Sostituire i componenti del codice con quelli applicabili al sito. In questo esempio di integrazione vengono utilizzati @salesforce/commerce-sdk-reactfile .

2. Nel tuo progetto PWA Kit, apri app/routes.jsx e aggiungi un percorso per navigare verso ''.

   Sostituirlo $PAGE_ID con un ID di pagina definito per le pagine di Page Designer in Business Manager.

3. Per avviare il server Web in locale, eseguire:

   npm start

4. Per visualizzare Page Designer pagine renderizzate in React.js, passare a

   `http:localhost:3000/page-viewer/$PAGE_ID e utilizzare l'ID pagina identificato nel passaggio 2.

   Ad esempio, se l'ID pagina è 123, vai a: http://localhost:3000/page-viewer/123.

Questo è un elenco di componenti React che hanno controparti ISML corrispondenti. Puoi trovare i componenti React nel repository GitHub di Page Designer per PWA Kit.

• GitHub: Repo di Page Designer per PWA Kit
• Guida di Salesforce: Pagine di Page Designer