DokumentationCommerceHandbuch zu Adobe Commerce Optimizer

[Nur SaaS]{class="badge positive" title="Gilt nur für Adobe Commerce as a Cloud Service und Adobe Commerce Optimizer Projekte (von Adobe verwaltete SaaS-Infrastruktur)."}

Einrichten der Storefront

Last update: Mon Oct 13 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Erstellt für:

  • Entwickler

Dieses Handbuch führt Sie durch die Einrichtung einer Storefront für Ihre Adobe Commerce Optimizer mithilfe von Adobe Edge Delivery Services. Ihre Storefront umfasst Textbaustein-Code, Beispielinhalte und Unterstützung für Produktdetailseiten und die Produkterkennung (Suche und Filterung).

Geschätzte Dauer: 30-45 Minuten

Voraussetzungen

  • GitHub-Konto das Repositorys erstellen kann und für die lokale Entwicklung konfiguriert ist (github.com)
  • Adobe Commerce Optimizer-Instanz mit Beispieldaten und konfigurierten Katalogansichten und Richtlinien

Erforderliche Instanzdaten

Bevor Sie beginnen, erfassen Sie die folgenden Informationen aus Ihrer Adobe Commerce Optimizer:

  • Mandanten-ID (auch als Instanz-ID bezeichnet)
  • GraphQL-Endpunkt für Ihre Instanz
  • Katalogansicht-ID für die globale Katalogansicht
  • Source-Gebietsschema für Ihre Katalogansicht
    • Die Standardeinstellung für Beispieldaten ist en_US
NOTE
Kunden mit Testzugriff können den GraphQL-Endpunkt in der Begrüßungs-E-Mail finden, die bei der Erstellung Ihrer Instanz empfangen wurde. Testinstanzen enthalten vorkonfigurierte Beispieldaten, Katalogansichten und Richtlinien.

Schritte einrichten

  1. Storefront-Projekt erstellen-Verwenden Sie das Site Creator-Tool, um ein neues Storefront-Projekt mit Textbaustein-Code, Beispielinhalten und einer Konfigurationsdatei zu erstellen.

  2. Konfiguration der Storefront anpassen-Aktualisieren Sie die config.json-Datei in Ihrem Repository, um eine Verbindung zu Ihrer Adobe Commerce Optimizer-Instanz herzustellen.

  3. Setup überprüfen (10 Min.)

    • Vorschau der Storefront-Site
    • Testen von Produktdetailseiten und Suchfunktionen

Erstellen Ihres Storefront-Projekts

Das Tool Site Creator erstellt ein vollständiges Storefront-Projekt mit den folgenden Komponenten:

  • Site: Landingpage für Storefront mit Textbausteininhalten
  • Code: Repository mit Textbaustein-Quelldateien
  • Inhalt: Dokumentautorenumgebung mit Site-Inhaltsdateien
  • Commerce Config: config.json Datei für die instanzspezifische Konfiguration

Schritt 1: Generieren des Projekts

  1. Öffnen Sie das Tool Site Creator

    Site Creator tool {width="700" modal="regular"}

  2. Wählen Neue Site erstellen (Code und Inhalt) aus.

  3. Abschließen der Site-Konfiguration:

    • GitHub-Organisation/: Geben Sie Ihren GitHub-Benutzernamen oder -Organisationsnamen ein
    • Site-: Wählen Sie einen beschreibenden Namen für Ihre Storefront
    • Commerce GraphQL-Endpunkt (optional): Geben Sie den GraphQL-Endpunkt für Ihre Adobe Commerce Optimizer ein

  4. Klicken Sie Site erstellen, um das GitHub-Repository mit dem Textbausteincode für die Storefront zu erstellen.

    Wenn das Repository erstellt wird, werden Sie vom Site Creator aktualisiert und aufgefordert, die Code Sync -App zu installieren.

Schritt 2: Installieren der Code Sync App

  1. Klicken Sie auf Install AEM Code Sync App , um das Installationsprogramm für die Code-Synchronisierung in einer neuen Registerkarte zu öffnen.

  2. Konfigurieren Sie die Code-Synchronisierungs-App:

    • Wählen Sie Ihre GitHub-Organisation aus und klicken Sie dann auf Configure.
    • Klicken Sie in der Code-Synchronisierungsschnittstelle auf Only select repositories.
    • Klicken Sie auf das Menü Select repositories und wählen Sie dann das von Ihnen erstellte Code-Repository für die Storefront aus.
    • Klicken Sie auf Save , um Ihr Repository zu registrieren.

  3. Kehren Sie zum Browser-Fenster zurück, in dem der Site-Ersteller geöffnet ist, und klicken Sie auf Site erstellen.

    Der Site Creator kopiert den Textbausteininhalt der Storefront in die Dokumentautorenumgebung. Dieser Vorgang dauert 1-2 Minuten.

  1. Überprüfen Sie im Abschnitt Site-Details die Links für Ihr Storefront-Projekt:

    Storefront setup complete {width="700" modal="regular"}

    Verwenden Sie diese Links, um Code, Inhalt und Konfiguration Ihrer Storefront zu verwalten.

  2. Kopieren Sie diese Links und speichern Sie sie dann zur späteren Verwendung: Klicken Sie auf **Copy.

Konfigurieren der Storefront

Aktualisieren Sie Ihre Storefront-Konfiguration, um eine Verbindung zu Ihrer Adobe Commerce Optimizer-Instanz herzustellen.

  1. Öffnen Sie den Konfigurations-Manager über den Link, den Sie zuvor gespeichert haben:

    https://da.live/sheet#/<username or org>/<repo name>/config.json

  2. Suchen Sie den Abschnitt cs (Catalog Service) in der -Konfiguration.

  3. Ersetzen Sie die Platzhalterwerte durch die Werte für Ihre Instanz. Siehe Voraussetzungen.

    code language-json 
    "cs": {
   "AC-View-ID": "{catalogViewId}",
   "AC-Environment-ID": "{tenantId}",
   "AC-Source-Locale": "en_US"
}

  4. Speichern Sie die Konfigurationsdatei.

NOTE
Es kann einige Minuten dauern, bis die Konfigurationsänderungen übernommen werden. Wenn die Daten nicht sofort angezeigt werden, warten Sie 2-3 Minuten, bevor Sie die Fehlerbehebung vornehmen.

Überprüfen des Setups

Testen Sie Ihre Storefront, um sicherzustellen, dass sie ordnungsgemäß mit Ihrer Adobe Commerce Optimizer-Instanz verbunden ist.

Schritt 1: Startseite der Storefront anzeigen

  1. Navigieren Sie zu Ihrer Live-Vorschau-URL:

    https://main--{SITE}--{ORG}.aem.live

    Ersetzen Sie {ORG} und {SITE} durch Ihre GitHub-Organisation und Ihren Site-Namen.

  2. Erfolgskriterien: Sie sollten die Startseite der Storefront mit Textbausteininhalten sehen.

    ACO storefront site with boilerplate {width="700" modal="regular"}

Schritt 2: Produktdetailseiten testen

Sehen Sie sich die Standardproduktdetailseite an, um zu überprüfen, ob die Produktdaten korrekt geladen werden.

  1. Navigieren Sie zu einer Beispielproduktseite:
    https://main--{SITE}--{ORG}.aem.live/products/placeholder/{sku}

    Verwenden Sie eine beliebige SKU aus Ihren Beispieldaten, z. B.:
    https://main--{SITE}--{ORG}.aem.live/products/placeholder/aur-flu-tir-std-2017

    Für die Standard-Storefront können Sie den placeholder in der Route verwenden, um das Produkt anzuzeigen. Wenn Sie mit der Anpassung Ihrer Storefront beginnen, können Sie den Code der Storefront anpassen, um den Pfad zur Produktdetailseite basierend auf den in Ihrem Katalog definierten Produktrouten festzulegen.

    note tip
    TIP
    Zeigen Sie verfügbare SKUs auf der Seite Datensynchronisierung in Ihrer Adobe Commerce Optimizer an.

  2. Erfolgskriterien: Die Seite sollte Folgendes anzeigen:

    • Produktname, Beschreibung und Preise
    • Produktbilder
    • Funktion zum Hinzufügen zum Warenkorb
    • Aus der Adobe Commerce Optimizer abgerufene Daten

    Default product detail page showing a product from the sample data {width="700" modal="regular"}

Schritt 3: Testen der Standardsuchfunktion

Testen Sie die standardmäßigen Produktfunktionen, einschließlich Suche und Filterung.

  1. Klicken Sie auf der Startseite der Storefront auf das Lupensymbol in der Kopfzeile.

  2. Geben Sie die tires Suchzeichenfolge ein und drücken Sie Eingabetaste.

  3. Erfolgskriterien: Sie sollten Folgendes sehen:

    • Suchergebnisseite mit Reifenprodukten
    • Filteroptionen in der Seitenleiste
    • Produktlisten mit Bildern und Preisen

    View search results page {width="675" modal="regular"}

  4. Klicken Sie auf ein Reifenprodukt, um dessen Detailseite anzuzeigen.

    View product details page {width="675" modal="regular"}

Fehlerbehebung

Wenn während des Setups Probleme auftreten, verwenden Sie die Web-Seiten-Inspektor-Konsole, um nach Fehlern zu suchen. Löschen Sie außerdem Ihren Browser-Cache oder verwenden Sie einen anderen Browser.

Verwenden Sie die folgende Anleitung, um häufige Probleme zu überprüfen:

Häufige Probleme

Problem
Symptome
Lösung
Die Installation der Codesynchronisierung schlägt fehl
Einrichtung der Codesynchronisierung kann nicht abgeschlossen werden
  • Stellen Sie sicher, dass Sie Administratorzugriff auf Ihre GitHub-Organisation haben.
  • Versuchen Sie, ein persönliches Repository anstelle einer Organisation zu verwenden.
  • Überprüfen Sie die GitHub-Berechtigungen und versuchen Sie es erneut.
Site wird nicht geladen
404- oder Verbindungsfehler
  • URL-Format der Site überprüfen: https://main--{SITE}--{ORG}.aem.live
  • Überprüfen Sie, ob die Code Sync App ordnungsgemäß installiert ist.
  • Stellen Sie sicher, dass das Repository öffentlich ist oder ordnungsgemäß konfiguriert ist.
Keine Produktdaten angezeigt
Produktseiten enthalten Platzhalter oder Fehler
  • Überprüfen Sie Ihre Konfigurationswerte in config.json
  • Überprüfen Sie in der Adobe Commerce Optimizer-Instanz die Seite Datensynchronisierung , um sicherzustellen, dass Beispielprodukte geladen werden. Wenn keine Produkte verfügbar sind, laden Sie die Beispieldaten neu oder fügen Sie ein Produkt mithilfe der Datenaufnahme-API“ ​. Warten Sie einige Minuten, bis die Konfigurationsänderungen weitergegeben werden.
  • Versuchen Sie, die Produktdetails mithilfe der Merchandising-Service-Produktabfrage abzurufen, indem Sie dieselben Kopfzeilen verwenden, die in der config.json-Datei konfiguriert sind. Wenn Sie die Daten abrufen können, ist dies wahrscheinlich ein Problem mit der Konfiguration der Katalogansicht oder ein Indexfehler.
Suche gibt keine Ergebnisse zurück
Leere Suchergebnisseite
  • Stellen Sie sicher, dass Sie die Produktsuchergebnisse mithilfe der Merchandising-Services productSearch-Abfrage mit denselben Kopfzeilen abrufen können, die in der config.json-Datei konfiguriert sind. Wenn Sie die Daten abrufen können, ist dies wahrscheinlich ein Problem mit der Konfiguration der Katalogansicht oder ein Indexfehler.
  • Vergewissern Sie sich, dass die Katalogansichts-ID in der config.json mit der Katalogansichts-ID in Adobe Commerce Optimizer übereinstimmt.
  • Überprüfen Sie in Adobe Commerce Optimizer die Konfiguration der Richtlinien, des Gebietsschemas und der Preisverzeichnisse, die Sie in der Konfiguration der Storefront-Kopfzeilen verwendet haben.
  • Stellen Sie sicher​ dass für die Suche die ​Attribut-Metadateneinstellungen) korrekt eingestellt sind.

Validierungs-Checkliste

Bevor Sie mit den nächsten Schritten fortfahren, stellen Sie sicher, dass Ihre Storefront ordnungsgemäß funktioniert, indem Sie Folgendes überprüfen:

Checkliste Konfigurationswerte stimmen mit Ihren Instanzeinstellungen überein

Checkliste Die Startseite der Storefront wird fehlerfrei geladen

Checkliste Auf mindestens einer Produktdetailseite werden vollständige Informationen angezeigt

Checkliste Die Suchfunktion gibt relevante Ergebnisse zurück

Checkliste Produktbilder werden korrekt geladen

Checkliste Konfigurationswerte stimmen mit Ihren Instanzeinstellungen überein

Hilfe erhalten

Wenn die Probleme bestehen bleiben:

Nächste Schritte

Nachdem Sie Ihre Storefront eingerichtet und überprüft haben, können Sie:

  1. Sidekick installieren - Browser-Erweiterung zum Bearbeiten, Anzeigen einer Vorschau und Veröffentlichen von Inhalten direkt von Ihrer Website aus

  2. Einrichten einer lokalen Entwicklungsumgebung - Erstellen einer lokalen Umgebung zum Anpassen des Codes und Inhalts Ihrer Storefront

Erfahren und erkunden

Related Articles
Weitere Informationen zum Aktualisieren von Website-Inhalten und ​ Integration mit Commerce-Frontend-Komponenten und Backend-Daten finden Sie in der Dokumentation zur ​Adobe Commerce Storefront .
recommendation-more-help
b77d1aa5-1083-47a4-8953-23cef9c69772