Integrieren Sie Page Designer in PWA Kit

Mit Page Designer können Sie wiederverwendbare Seitentypen und Komponententypen für Ihre PWA-Kit-Website (Progressive Web App) erstellen. Verwende den visuellen Editor ohne Code im Business Manager, um Seitendesigner-Seiten für deine Website zu entwerfen, zu planen und zu veröffentlichen. Bei der Integration in eine PWA Kit-Website ermöglicht Page Designer das Rendern dynamischer, reaktionsschneller Seiten mithilfe von React-Komponenten.

In diesem Leitfaden wird erläutert, wie Sie PWA Kit so konfigurieren, dass Ihre Website Seiten-Designer-Seiten anzeigen kann.

Ersetzen Sie vor dem Ausführen der Befehle in diesem Tutorial alle Platzhalter durch tatsächliche Werte. Platzhalter haben das folgende Format: $PLACEHOLDER.

So integrieren Sie Page Designer in eine PWA Kit-Site:

  • Da es sich bei PWA Kit um eine entkoppelte Web-App handelt, müssen Sie sowohl die Page Designer Internet Store Markup Language (ISML)-Komponenten als auch die entsprechenden PWA Kit React-Komponenten erstellen.
  • Wenn die ISML-Komponenten, die du auf deiner Website verwenden möchtest, in Page Designer nicht vorhanden sind, erstelle sie im Business Manager. Weitere Informationen finden Sie unter Implementieren der Seitendesigner-Komponente.
  • Es gibt einige PWA Kit React-Komponenten, die mit ihren ISML-Gegenstücken übereinstimmen. Weitere Informationen finden Sie unter Zuordnen von React- und ISML-Komponenten. Wenn es keine passende React-Komponente gibt, können Sie sie erstellen.
  • Die Vorschaufunktion im Business Manager rendert ISML-Komponenten der Storefront Reference Architecture (SFRA). Das tatsächliche Erscheinungsbild Ihrer React-Site kann also von der Vorschau abweichen. Um eine genauere Vorschau Ihrer PWA Kit-Website zu erhalten, verwenden Sie die Storefront-Vorschau.

  1. Erstellen Sie in Ihrem PWA Kit-Projekt eine Datei mit dem Namen app/pages/page-viewer/index.jsx, und fügen Sie diesen Code hinzu.

    Der Zweck der Datei besteht darin, einen Seitenbetrachter einzurichten, um Ihre Page Designer-Seiten mit Ihren Komponenten zu rendern. Dieser Code enthält Beispielkomponenten zu Demonstrationszwecken. Ersetzen Sie die Komponenten in Ihrem Code durch diejenigen, die für Ihre Website gelten. In dieser Beispielintegration wird @salesforce/commerce-sdk-react.

  1. Öffnen Sie app/routes.jsx in Ihrem PWA Kit-Projekt eine Route, um zu '' zu navigieren, und fügen Sie sie hinzu.

    Ersetze sie $PAGE_ID durch eine Seiten-ID, die du für deine Page Designer-Seiten im Business Manager definiert hast.

  1. Um Ihren Webserver lokal zu starten, führen Sie Folgendes aus:

    npm start

  2. Um Page Designer-Seiten zu sehen, die in React.js gerendert werden, gehen Sie zu

    `http:localhost:3000/page-viewer/$PAGE_ID und verwenden Sie die Seiten-ID, die Sie in Schritt 2 identifiziert haben.

    Wenn Ihre Seiten-ID beispielsweise 123 ist, gehen Sie zu: http://localhost:3000/page-viewer/123.

Dies ist eine Liste von React-Komponenten, die entsprechende ISML-Entsprechungen haben. Sie finden die React-Komponenten im Page Designer GitHub Repo für PWA Kit.

React-KomponentenISML-Komponenten
Karussellcommerce_layouts. karussell
mobileGrid1r1ccommerce_layouts. mobileGrid1r1c
mobileGrid2r1ccommerce_layouts. mobileGrid2r1c
mobileGrid2r2ccommerce_layouts. mobileGrid2r2c
mobileGrid2r3ccommerce_layouts. mobileGrid2r3c
mobileGrid3r1ccommerce_layouts. mobileGrid3r1c
mobileGrid3r2ccommerce_layouts. mobileGrid3r2c
image-tilecommerce_assets. photoTile
Bild-mit-Textcommerce_assets. imageAndText