Storefront Preview

Sie können Storefront Preview verwenden, um zu sehen, wie Ihre Progressive Web App (PWA) Kit-Website basierend auf dem Kontext wie der angegebenen Werbeträgernummer, Kundengruppen oder einem bestimmten Datum oder einer bestimmten Uhrzeit aussehen wird. Wenn Sie beispielsweise eine Vorschau anzeigen möchten, wie Ihre Website während eines bevorstehenden Verkaufs angezeigt wird, können Sie diese Funktionalität verwenden.

Der Black Friday oder Cyber Monday steht bevor? Die Vorschau ist für Sonderaktionen jeder Art ideal. Sie können sich eine Vorschau Ihrer Website-Änderungen in einer Staging-Umgebung ansehen und dann vorab sicherstellen, dass Ihre Änderungen (z. B. bei Produkten, Preissetzung oder Marketingstrategeien) wie erwartet funktionieren, bevor die geänderte Website in die Production geht.

Darüber hinaus können Sie Storefront Preview in Content-Management-Systemen (CMS) von Drittanbietern integrieren. Nehmen wir zum Beispiel an, Sie haben ein Banner speziell für Aktionen in der Vorweihnachtszeit in Ihrem CMS. Sie können dann Ihr CMS den aktuellen Kontext erkennen lassen (z. B. das Datum und die Uhrzeit des Inkrafttretens), damit in der Website-Vorschau der richtige Content angezeigt wird, beispielsweise das Banner für den angegebenen Zeitraum.

StoreFront Preview ist in Runtime Admin verfügbar. Diese Anleitung erklärt, wie Sie Storefront Preview konfigurieren, verwenden und Probleme beheben.

Um Storefront Preview zu verwenden, müssen Sie zunächst folgende Schritte ausführen:

• Erstellen Sie Ihre Website mit PWA Kit Version 2.8.3 oder höher oder 3.2.x mit @salesforce/commerce-sdk-react@1.4.0 oder @salesforce/retail-react-app@2.4.0. Storefront Preview ist in PWA Kit-Versionen, die älter als 2.8.3 oder 3.2.x sind, nicht verfügbar. Aktualisieren Sie Ihr Projekt auf die Verwendung von PWA Kit 2.8.3 oder 3.2.x, abhängig von Ihrer aktuellen Hauptversion.
• Sie brauchen außerdem Zugriffsrechte für das Projekt in Runtime Admin, die über die schreibgeschützte Rolle hinausgehen. Wenn Sie keinen solchen Zugriff haben, bitten Sie einen Administrator für MRT (Managed Runtime) um Hilfe.
• Aktivieren Sie Shopper Context im Business Manager.
• Richten Sie Ihre Website mit der Funktionalität ein, die Sie in Storefront Preview überprüfen möchten. Beispiele:
  • Einrichtung von benutzerdefinierten Qualifikationsmerkmalen und Kundengruppen-IDs unter Verwendung von Kundengruppen in Business Manager, um Regeln für personalisierte Preissetzungen, Produkte oder Aktionen anzuwenden.
  • Um ein personalisiertes Einkaufserlebnis zu erhalten, richten Sie Werbeträgernummern ein, die die Shopper Context-Endpunkte aufruft. Dies ist erforderlich, da Storefront Preview Kontextinformationen für die Personalisierung verwendet.
  • Richten Sie die Preissetzung ein, die an einem bestimmten Datum gelten sollen Dadurch wird die angegebene Preissetzung angezeigt, wenn Sie dieses Datum in Storefront Preview auswählen.
• Führen Sie die Konfigurationsschritte aus, die im Abschnitt Konfigurieren von Storefront Preview beschrieben werden.
• Konfigurieren Sie Ihren Browser so, dass Cookies von Drittanbietern auf https://runtime.commercecloud.com zugelassen werden.

Optional können Sie eine Funktion schreiben, wenn Sie Storefront Preview in ein Drittanbieter-CMS integrieren möchten. Weitere Informationen finden Sie unter Hinzufügen der Storefront-Preview-Komponente zu Ihrer Storefront und Integration mit einem Drittanbieter-CMS.

Sie können Storefront Preview mit den neuesten Versionen von Chrome oder Safari verwenden. Ihr Browser muss den Zugriff auf Drittanbieter-Cookies zulassen https://runtime.commercecloud.com. Storefront Preview funktioniert nicht, wenn Sie Drittanbieter-Cookies nicht aktivieren.

• Die in Storefront Preview angezeigten Daten und Erlebnisse spiegeln nicht unbedingt das Einkaufserlebnis wider. Die Personalisierung von Käufern erfordert die Verwendung der Shopper Context API in Ihrem PWA Kit-Projekt. Erfahren Sie mehr über den Käuferkontext.
• In Storefront Preview werden Storefront-Seiten so angezeigt, wie sie ein Gastbenutzer Ihrer Website sehen würde. Das können z. B. Produkt- oder Marketinginhalte, Preissetzung, Werbeaktionen, Produktlisten oder Produktseiten sein. Sie sehen keine Inhalte, die für angemeldete Benutzer angezeigt werden sollen (z. B. Kontoinformationen oder der Warenkorb).
• Storefront Preview funktioniert auf PWA Kit-Seiten, aber nicht auf Storefront Reference Architecture (SFRA)-Seiten. Für die Vorschau von SFRA-Seiten können Sie das Storefront Toolkit Site Preview Tool in B2C Commerce verwenden.

Führen Sie die folgenden einmaligen Konfigurationsschritte aus, die für jede Website mit Storefront Preview notwendig sind:

• 1. Erstellen eines privaten SLAS Client für Ihre B2C-Commerce-Instanzen
• 2. Erstellen von MRT-Umgebungsvariablen mit den Details des privaten SLAS Client und dem Commerce API-Kurzcode
• 3. Bestätigen des Zugriffs für Account Manager-Benutzer auf die B2C Commerce-Instanz
• 4. Hinzufügen der Storefront Preview-Komponente zu Ihrer Storefront
• 5. Aktualisieren der Header für die Storefront-Content-Sicherheitsrichtlinie

Sie müssen einen privaten SLAS Client (Shopper Login and API Access Service) mit den Bereichen sfcc.shopper-context.rw und sfcc.ts_ext_on_behalf_of für die B2C-Commerce-Instanzen erstellen, die von Ihrer Storefront verwendet werden. Storefront Preview nutzt den privaten SLAS Client, um den Kontext in der Storefront festzulegen. Der private SLAS Client kann einfach über die SLAS Admin UI erstellt werden.

Führen Sie die Schritte in der Anleitung zur Autorisierung für Shopper APIs aus, um einen privaten SLAS Client für jede B2C Commerce-Instanz zu erstellen, in der Sie Storefront Preview verwenden möchten:

• Wählen Sie im Feld Which App Type will be used? (Welcher App-Typ wird verwendet?) den App-Typ BFF oder Web App aus, um einen privaten Client zu erstellen.
• Geben Sie im Feld Enter the shopper scopes (Käuferbereiche eingeben) die Bereiche an, die durch ein Leerzeichen getrennt werden sollen: sfcc.shopper-context.rw sfcc.ts_ext_on_behalf_of

Kopieren Sie den automatisch generierten geheimen Client-Schlüssel, der oben auf der Ergebnisseite angezeigt wird, und die Client-ID für den nächsten Schritt.

Um die MRT-Umgebungsvariablen zu erstellen, rufen Sie den MRT-API-Endpunkt projects_target_env_var_partial_update auf. Ersetzen Sie $SLAS_PRIVATE_CLIENT_ID und $SLAS_PRIVATE_CLIENT_SECRET durch die Werte, die Sie in Schritt 1 kopiert haben. Ersetzen Sie $CC_SHORT_CODE durch den Kurzcode-Konfigurationswert aus Business Manager. Sie können auch Runtime Admin verwenden, um Umgebungsvariablen zu verwalten. Siehe Umgebungsvariablen.

Um Storefront Preview mit einer Storefront zu verwenden, die mit Ihrer B2C Commerce-Instanz verbunden ist, müssen Sie über eine der folgenden Account Manager-Benutzerrollen verfügen: Business Manager-Administrator oder Business Manager-Benutzer. Um zu überprüfen, ob Sie über eine dieser Rollen verfügen, überprüfen Sie Ihre Rollen im Account Manager.

Wenn Sie nicht über eine der erforderlichen Rollen verfügen, befolgen Sie diese Granting Permissions Instructions (Anleitungen zum Erteilen von Zugriffsrechten), um Instanzen zu Ihrem Account Manager-Benutzer hinzuzufügen.

Damit die Kommunikation zwischen Runtime Admin und Ihrer Storefront funktioniert, richten Sie einen Kommunikationskanal ein. Dies umfasst zwei Schritte:

• Um die Kommunikation zu ermöglichen, rendern Sie die StorefrontPreview-Komponente aus dem PWA Kit React SDK in Ihrer Storefront. Die StorefrontPreview-Komponente fügt ein Skript ein, um die Kommunikation mit dem Runtime Admin herzustellen. Dieses Skript wirkt sich nicht auf die Leistung Ihrer Storefront aus, da es nur beim Ausführen Ihrer Storefront in Storefront Preview geladen wird.
• Unabhängig davon, wo das Rendering von StorefrontPreview erfolgt, müssen Sie die Eigenschaft getToken definieren, die das Zugriffstoken des aktuellen Käufers zurückgeben muss.

Wenn Sie Storefront Preview in ein Drittanbieter-CMS integrieren möchten, können Sie die Eigenschaft onContextChange optional zur StorefrontPreview-Komponente hinzufügen. Weitere Informationen finden Sie unter Integration mit einem Drittanbieter-CMS. In den folgenden Beispielen fügen wir die Eigenschaft onContextChange hinzu und übergeben an sie eine asynchrone Funktion namens handleContextChange. Sie können die Anweisung console.log in der Funktion handleContextChange durch eine eigene Logik ersetzen, um auf Kontextänderungen zu reagieren. Passen Sie die Funktion handleContextChange an Ihre speziellen Anforderungen an. Der Parameter newContext der Funktion enthält die aktualisierten Kontextinformationen.

Für PWA Kit Version 2.8.x verwenden Sie zum Einrichten eines Kommunikationskanals in Ihrer Storefront den folgenden Code. Fügen Sie die StorefrontPreview-Komponente so zur Datei _app/index.jsx hinzu, dass sie die IntlProvider-Komponente umschließt.

Für PWA Kit Version 3.2.x verwenden Sie zum Einrichten eines Kommunikationskanals in Ihrer Storefront den folgenden Code. Fügen Sie die StorefrontPreview-Komponente so zur Datei _app/index.jsx hinzu, dass sie die IntlProvider-Komponente umschließt.

Um den Kommunikationskanal zu aktivieren, muss Ihre Storefront Folgendes zulassen:

• Einbetten der Storefront in einen iframe durch Runtime Admin (runtime.commercecloud.com)
• Laden und Ausführen des in Schritt 4 erwähnten Skripts

Aktivieren Sie den Kommunikationskanal, indem Sie https://runtime.commercecloud.com zu Ihren Anweisungen frame-ancestors, connect-src und script-src für die Content Security Policy (CSP) hinzufügen. Um dies automatisch für Sie zu erledigen, importieren und verwenden Sie die Middleware defaultPwaKitSecurityHeaders, die im Paket pwa-kit-runtime enthalten ist.

Wenn Sie die StorefrontPreview-Komponente bereits zu Ihrer Storefront hinzugefügt haben und nun eine Integration in ein CMS eines Drittanbieters durchführen möchten, fügen Sie die Eigenschaft onContextChange zur StorefrontPreview-Komponente hinzu. Weitere Informationen finden Sie unter Integration mit einem Drittanbieter-CMS.

In den folgenden Beispielen fügen wir die Eigenschaft onContextChange und eine asynchrone Funktion namens handleContextChange hinzu. Sie können die Anweisung console.log in der Funktion handleContextChange durch eine eigene Logik ersetzen, um auf Kontextänderungen zu reagieren. Passen Sie die Funktion handleContextChange an Ihre speziellen Anforderungen an. Der Parameter newContext der Funktion enthält die aktualisierten Kontextinformationen.

Wenn Sie die PWA Kit Version 2.8.x haben, verwenden Sie den folgenden Code zum Hinzufügen der onContextChange-Eigenschaft in der Datei _app/index.jsx.

Wenn Sie die PWA Kit Version 3.2.x haben, verwenden Sie den folgenden Code zum Hinzufügen der onContextChange-Eigenschaft in der Datei _app/index.jsx.

Führen Sie die folgenden Schritte aus, um Storefront Preview zu verwenden:

1. Öffnen Sie Runtime Admin in Ihrem Browser und melden Sie sich mit den Account Manager-Anmeldedaten an.

2. Navigieren Sie zur Seite "Umgebungen" des Projekts und klicken Sie neben der Umgebung, in der Sie eine Vorschau der Website anzeigen möchten, auf Preview Site (Website-Vorschau).

   Eine neue Registerkarte mit der Storefront und dem Formular für die Storefront Preview in der linken Seitenleiste wird geöffnet.

3. (Optional) Wählen Sie das Datum und die Uhrzeit aus, ab wann der Kontext in der Vorschau angezeigt werden soll. Das angezeigte Datum und die angezeigte Uhrzeit basieren auf der Zeitzone Ihres Computers und werden in UTC umgewandelt, bevor die Anfrage zum Festlegen des Kontexts gesendet wird. Wenn Sie kein Datum und keine Uhrzeit angeben, wird in der Vorschau das aktuelle Datum und die aktuelle Uhrzeit angezeigt.

4. (Optional) Geben Sie die Werbeträgernummer ein, die die Werbeaktion (Kampagnenzuweisung) und die (der Werbeträgernummerngruppe zugewiesenen) Preisbücher für den Kontext auslöst, den Sie in der Vorschau anzeigen möchten.

5. (Optional) Geben Sie die Kundengruppen-IDs ein, die in Business Manager eingerichtet sind. Trennen Sie die einzelnen IDs durch ein Komma.

6. (Optional) Geben Sie die benutzerdefinierten Qualifikationsmerkmale ein, die für die personalisierten Preise, Produkte oder Werbeaktionen gelten, die im Business Manager eingerichtet wurden. Die benutzerdefinierten Qualifikationsmerkmale müssen eindeutig sein. Sie können bis zu 20 benutzerdefinierte Qualifikationsmerkmale vorgeben.

7. Klicken Sie auf Vorschau.

   Sie können jetzt in der Storefront navigieren und dabei den Kontext nutzen, den Sie in der Vorschau anzeigen möchten.

   Um die Freigabe zu vereinfachen, wird die URL auf der Browser-Registerkarte aktualisiert, um die Kontextwerte einzuschließen.

Bei Problemen mit Storefront Preview können Sie die Storefront Preview Logs in Ihrer MRT-Umgebung aktivieren. Dadurch werden zusätzliche Logs gedruckt, wenn Sie zum Debugging auf die Schaltfläche Vorschau klicken.

Um Logs für die Storefront Preview zu aktivieren, fügen Sie die MRT-Umgebungsvariable STOREFRONT_PREVIEW_DEBUG=1 zu Ihrer MRT-Umgebung hinzu.

Sie können MRT Tail Logs verwenden, um die StoreFront Preview logs zu lesen.

In diesem Abschnitt werden Lösungsvorschläge für häufige Fehler vorgestellt, die bei der Verwendung von Storefront Preview auftreten können.

Je nach Browser kann es zu unterschiedlichem Verhalten kommen, wenn Cookies von Drittanbietern nicht aktiviert sind.

• Chrome: Es wird ein modales Fenster mit der Meldung "Preview is not enabled on this storefront" (Vorschau ist in dieser Storefront nicht aktiviert) angezeigt und die Storefront meldet einen SecurityError.
• Safari: Es wird ein modal Fenster mit der Meldung "Failed to initialize Storefront Preview"(Fehler beim Initialisieren der Storefront Preview) angezeigt und die Storefront ist nicht sichtbar.

Ursache: Ihr Browser lässt keine Drittanbieter-Cookies auf https://runtime.commercecloud.com zu.

Vorgeschlagene Lösung: Aktualisieren Sie Ihre Browser-Einstellungen sowie alle verwendeten Erweiterungen, um Cookies von Drittanbietern auf https://runtime.commercecloud.com zuzulassen.

Fehlermeldung beim Laden von Storefront Preview: "Preview is not enabled on this storefront!"

Ursache: In der Storefront fehlt die Skript-Datei, die die Kommunikation mit Runtime Admin ermöglicht.

Vorgeschlagene Lösung: Befolgen Sie die Anweisungen im Fehlermeldungsfenster oder beenden Sie die Konfigurationen in Schritt 4.

Antwortfehlermeldung beim Klicken auf die Schaltfläche Vorschau:

Vorgeschlagene Lösung: Schließen Sie die Konfigurationen in Schritt 1 und Schritt 2 ab.

Je nach Browser kann ein Fehler auftreten, wenn Sie nicht über die richtige Content Security Policy verfügen.

• Chrome: Es wird ein modales Fenster mit der Meldung "Preview is not enabled on this storefront" (Die Vorschau ist in dieser Storefront nicht aktiviert) angezeigt und die Storefront zeigt eine Fehlerseite mit dem Hinweis "refused to connect" (Verbindung verweigert).
• Safari: Es wird ein modales Fenster mit der Meldung "Preview is not enabled on this storefront" (Vorschau ist in dieser Storefront nicht aktiviert) angezeigt und die Storefront ist nicht sichtbar.

Ursache: Die Content Security Policy Ihrer Storefront lässt die Ausführung von Runtime Admin nicht zu.

Vorgeschlagene Lösung: Befolgen Sie die Anleitungen unter Schritt 5, um Ihre Content Security Policy korrekt zu konfigurieren.

Die erste Seite, die von Storefront Preview geladen wird, ist die Domain, die als externer Host-Name für die Umgebung konfiguriert ist.

Ursache: Der externe Host-Name ist in den Umgebungseinstellungen nicht korrekt konfiguriert.

Vorgeschlagene Lösung: Konfigurieren Sie den externen Host-Nameamen im Abschnitt Erweitert in Ihren Umgebungseinstellungen so, dass er auf die richtige Domain verweist.

Angezeigte Antwortfehlermeldung beim Klicken auf die Schaltfläche Vorschau:

Vorgeschlagene Lösung: Schließen Sie Schritt 3 ab.

Angezeigte Antwortfehlermeldung beim Klicken auf die Schaltfläche Vorschau:

Ursache: Falsche Werte in MRT-Umgebungsvariablen SLAS_PRIVATE_CLIENT_ID und SLAS_PRIVATE_CLIENT_SECRET oder falsche SLAS-Konfiguration für private Clients.

Vorgeschlagene Lösung: Schließen Sie Schritt 1 und Schritt 2 ab.

Nachdem Sie die Eigenschaft onContextChange zur Komponente StorefrontPreview hinzugefügt haben, erhalten Sie bei der Website-Vorschau eventuell Fehlermeldungen oder unerwartete Ergebnisse.

Ursache: Möglicherweise liegt ein Problem mit der Funktion vor, die von der Eigenschaft onContextChange aufgerufen wird.

Vorgeschlagene Lösung: Entfernen Sie die Eigenschaft onContextChange und die Funktion, die sie aus der Storefront Preview-Komponente aufruft. Zeigen Sie dann eine Vorschau Ihrer Website an und prüfen Sie, ob die gleichen Probleme auftreten. Wenn dies nicht der Fall ist, debuggen Sie Ihre Funktion, um Fehler zu beheben. Sie haben beispielsweise folgende Möglichkeiten:

• Fügen Sie die Eigenschaft onContextChange und die von ihr aufgerufene Funktion zur Storefront Preview-Komponente hinzu. Weitere Informationen finden Sie unter Integration mit einem Drittanbieter-CMS.
• Überprüfen Sie die Netzwerkaktivität, während Sie eine Vorschau Ihrer Website anzeigen, und prüfen Sie, ob die Abrufanforderung die erwarteten Daten sendet.

Wenn nach dem Entfernen der Eigenschaft onContextChange und der von ihr aufgerufenen Funktion weiterhin Probleme auftreten, wenden Sie sich bitte an den Support.

Bei der Vorschau Ihrer Website wird der Inhalt nicht wie erwartet angezeigt, aber es tritt keiner der oben genannten Fehler auf. Beispielsweise ändern sich die Preise nicht basierend auf den Werten, die Sie in Storefront Preview eingegeben haben.

Ursache: Möglicherweise haben Sie eine oder mehrere Voraussetzungen nicht abgeschlossen haben.

Vorgeschlagene Lösung: Vergewissern Sie sich, dass alle Voraussetzungen erfüllt sind. Wenn dies der Fall ist und weiterhin Probleme auftreten, wenden Sie sich bitte an den Support.