[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)."}

Anwendungsszenarien

Die folgenden Anwendungsfälle zeigen die Kernfunktionen und Geschäftsszenarien, die von Adobe Commerce as a Cloud Service unterstützt werden. Sie ermöglichen es Ihnen, die Entwicklung zu beschleunigen und wirkungsvolle Erlebnisse zu starten.

Wenn Probleme auftreten, finden Sie im Abschnitt Fehlerbehebung Anleitungen.

Voraussetzungen

Bevor Sie einen dieser Anwendungsfälle ausführen, müssen Sie die folgenden Voraussetzungen erfüllen:

  1. Erstellen Sie Ihre Cloud ServiceInstanz mithilfe der folgenden Optionen:

    1. Wählen Sie Sandbox in der Dropdown Umgebung aus.
    2. Wählen Sie Adobe Store in der Dropdown-Liste Testdaten aus.
  2. Beim Konto Adobe Experience Cloud anmelden

  3. Richten Sie Ihre Cloud Service-Storefront ​, indem Sie die folgenden Optionen verwenden:

    1. Wählen Sie adobe-commerce/adobe-demo-store für die Vorlage aus.
    2. Wählen Sie Verfügbare Instanz auswählen (Mesh -> SaaS) für die Verbindungsmethode aus.

Checkout-Workflow

Dieser Workflow zeigt den Checkout-Prozess für einen Kunden, der ein Produkt in Ihrer Storefront kauft, und wie Sie als Administrator die Bestellung bestätigen können.

Zahlungsdienste aktivieren

  1. Navigieren Sie in Commerce Admin zu Stores > Settings > Configuration > Zahlungsmethoden.

  2. Geben im Abschnitt „Allgemeine" Ihre Payment Services Sandbox ID und Payment Services Sandbox Key ein. Sie können diese IDs abrufen, indem Sie die unter "-Onboarding“ beschriebenen Schritte ​

  3. Legen Sie das Aktivieren-Dropdown auf Ja fest.

  4. Klicken Sie Konfiguration speichern.

Produkt kaufen

  1. Wechseln Sie zur Storefront die Sie in den Voraussetzungen erstellt haben.

  2. Produkt suchen und auswählen. Treffen Sie alle erforderlichen Anpassungsauswahlen. Klicken Sie dann auf Zum Warenkorb hinzufügen.

    Storefront-Benutzeroberfläche für Produktsuche und -auswahl {width="600" modal="regular"}

  3. Wählen Sie das Warenkorbsymbol aus, um Ihren Warenkorb anzuzeigen.

    Warenkorb mit hinzugefügten Produkten und Checkout-Optionen {width="600" modal="regular"}

  4. Klicken Sie Checkout.

    Checkout-Schaltfläche auf der Warenkorbseite {width="600" modal="regular"}

  5. Geben Sie die erforderlichen Kontaktdaten und Versandinformationen ein. Sie können fiktive Informationen für diese Bestellung verwenden.

  6. Um zu checken, wählen Sie Scheck / Zahlungsanweisung. Wenn Sie eine Kreditkarte verwenden möchten, verwenden Sie eine der Testkarten von Paypal. Sie können diese mit einem beliebigen zukünftigen Ablaufdatum und einem beliebigen CVC verwenden.

    Checkout-Formular mit Feldern für Kontakt- und Versandinformationen {width="600" modal="regular"} Kreditkartenzahlungsformular an der Kasse {width="600" modal="regular"}

  7. Klicken Sie Bestellung aufgeben.

Bestellung bestätigen

  1. Öffnen Sie die Commerce Admin-<your store URL>/admin.

  2. Melden Sie sich mit Ihrer Adobe ID an.

  3. Navigieren Sie Verkauf > Bestellungen.

    Auftragsraster in Commerce Admin mit den letzten Bestellungen {width="600" modal="regular"}

  4. Suchen Sie nach der von Ihnen aufgegebenen Bestellung und bestätigen Sie die Details.

    Seite mit Bestelldetails mit Kunden- und Produktinformationen {width="600" modal="regular"}

Storefront-Inhalt aktualisieren

Inhalte direkt in der Storefront erstellen, bearbeiten und veröffentlichen.

  1. Öffnen Sie die Storefront die Sie in den Voraussetzungen erstellt haben.

  2. Öffnen Sie Storefront Builder. Navigieren Sie zu https://da.live/#/<GitHub User Name>/<Repository Name>/main/da/index.md.

  3. Öffnen Sie die Seite Index.

  4. Geben Sie unter dem Karussellblock einen neuen Titel ein, indem Sie die Zeile „Willkommen bei der Adobe Store-Demo“ bearbeiten.

  5. Klicken Sie auf das Symbol Senden und dann auf Vorschau.

  6. Überprüfen Sie die Vorschauseite und klicken Sie auf "".

  7. Aktualisieren Sie die Seite „Storefront“ und bestätigen Sie, dass Ihre Änderungen jetzt live sind.

Kontextuelles Experiment

Mit der Funktion für kontextuelle Experimente von Adobe Commerce können Sie Experimente in Ihrer Storefront erstellen und verwalten, um verschiedene Inhalte und Konfigurationen zu testen.

Voraussetzungen

  1. Wählen Sie in Storefront Builder Ihre Indexseite aus und klicken Sie auf Kopieren.

  2. Erstellen Sie Ordner Experimente“ unter dem Hauptordner, indem Sie auf die Schaltfläche Neu klicken und Ordner auswählen.

  3. Erstellen Sie einen Ordner mit dem Namen 1234 im Ordner Experimente.

  4. Fügen Sie die beiden Kopien der Indexseite in den Ordner 1234“.

  5. Öffnen Sie jede Seite und benennen Sie sie in „homev1“ und „homev2“ um. Das sind eure Herausforderer.

  6. Ändern Sie jede Seite so, dass sie unterschiedliche Inhalte enthält. Ändern Sie beispielsweise das Hero-Bild oder den Text . Sie müssen in der Lage sein, die Unterschiede zwischen den einzelnen Seiten zu identifizieren.

  7. Veröffentlichen Sie jede Ihrer Challenger-Seiten.

  8. Öffnen Sie die Steuerelementseite, also die ursprüngliche Indexseite.

  9. Fügen Sie einen neuen Block mit dem Titel "".

  10. Fügen Sie die folgenden Informationen zu den Zeilen des Metadatenblocks hinzu

    • Titel - Adobe Commerce

    • Beschreibung - Ein Webstore

    • Experiment - 1234

    • Experimentvarianten

      • https://<your-site>.aem.live/experiments/1234/indexv1
      • https://<your-site>.aem.live/experiments/1234/indexv2

    Konfiguration von Metadatenblöcken für kontextuelle Experimente {width="600" modal="regular"}

  11. Öffnen Sie ein Inkognito- oder privates Browser-Fenster und navigieren Sie zur Hauptseite.

  12. Schließen Sie das private Browser-Fenster und wiederholen Sie den vorherigen Schritt. Jedes Mal, wenn Sie die Seite öffnen, sehen Sie eine von Ihnen erstellte zufällige Variante.

Inhalt der Storefront verbessern

Mit AEM Assets, Adobe Express und Firefly können Sie mit einem einfachen, selbstgesteuerten Workflow schnell Änderungen an Bildern vornehmen, die in Ihrer Storefront angezeigt werden.

Voraussetzungen

  • Erfordert Zugriff auf AEM Assets, Adobe Express und Adobe Firefly.

Anpassen des Hintergrunds eines Bildes

Stellen Sie sich ein Szenario vor, in dem Sie den Hintergrund eines Produktbilds schnell ändern möchten. Die Kombination aus Adobe Commerce, AEM Assets und Adobe Express ermöglicht es Ihnen, diese Änderung in wenigen einfachen Schritten abzuschließen.

  1. Öffnen Sie die Storefront die Sie in den Voraussetzungen erstellt haben, und navigieren Sie zu einem Element, das Sie ändern möchten. Beachten Sie die Artikel-SKU oder den Produkt-Code.

  2. Öffnen Sie AEM Assets, indem Sie es in der Adobe Experience Cloud ​.

    AEM Assets-Selektor, der die Adobe Experience Cloud anzeigt {width="600" modal="regular"}

  3. Auf Assets.

    Assets-Navigationsoption in AEM Assets Benutzeroberfläche {width="600" modal="regular"}

  4. Suchen Sie nach dem Artikel SKU oder Produkt-Code.

  5. Wählen Sie das zu bearbeitende Element aus und klicken Sie auf In Adobe Express öffnen.

    Option „In Adobe Express öffnen“ für die Asset-Bearbeitung {width="600" modal="regular"}

  6. Wählen Sie im Bild-Bedienfeld Objekt einfügen aus.

    Option „Objekt einfügen“ im Adobe Express-Bildbedienfeld {width="600" modal="regular"}

  7. Beschreiben Sie im Textfeld das Bild, das Sie hinzufügen möchten. Zum Beispiel „Schneekiefern“.

    Textfeld zur Beschreibung des mit KI zu generierenden Bildes {width="600" modal="regular"}

  8. Passen Sie die Brush size an und zeichnen Sie dort, wo Sie das generierte Bild hinzufügen möchten. Zeichnen Sie in diesem Beispiel um das vorhandene Objekt, um den Hintergrund auszuwählen.

  9. Klicken Sie Generieren, um die Ergebnisse anzuzeigen.

  10. Wählen Sie aus den verschiedenen Ergebnissen die gewünschte Option aus und klicken Sie auf Beibehalten.

  11. Klicken Sie Your Stuff, um zum Bildeditor zurückzukehren.

  12. Klicken Sie Speichern, um den Bildtyp anzugeben.

  13. Klicken erneut auf Speichern“, um die Änderungen zu speichern.

  14. Wählen Sie im Asset speichern den Commerce-Zielordner.

    Dialogfeld „Asset speichern“ mit ausgewähltem Commerce-Zielordner {width="600" modal="regular"}

  15. Klicken Sie Als neues Asset speichern, um das Bild zu speichern.

Hinzufügen des Bildes zu Commerce AEM Assets

  1. Wählen Sie Navigationsbereich von AEM as a Cloud Service die Option Assets > Dateien > Commerce und klicken Sie auf das Asset, das Sie im vorherigen Abschnitt erstellt haben.

    Commerce-Ordner in AEM Assets mit Produktbildern {width="600" modal="regular"}

  2. Klicken Sie Eigenschaften.

    Schaltfläche „Eigenschaften“ in AEM Assets Symbolleiste {width="600" modal="regular"}

  3. Wählen Sie die Registerkarte Commerce aus.

    Registerkarte Commerce im Bedienfeld „Asset-Eigenschaften“ {width="600" modal="regular"}

  4. Stellen Sie sicher, dass Ist sie in Adobe Commerce vorhanden? Feld ist auf "".

  5. Klicken Sie Hinzufügen und geben Sie die Produkt-SKU ein, der Sie das Asset hinzufügen möchten.

    SKU zum Verknüpfen des Assets mit dem Produkt hinzufügen {width="600" modal="regular"}

  6. Wählen Sie die Position für das Asset und den Asset-Typ aus.

  7. Wählen Sie die Registerkarte Allgemein und ändern Sie die Registerkarte Prüfungsstatus in Genehmigt.

    Dropdown-Liste „Überprüfungsstatus“ auf der Registerkarte „Allgemein“ auf Genehmigt gesetzt {width="600" modal="regular"}

  8. Klicken Sie Speichern und schließen.

Bestätigen des Bildes in Commerce

  1. Navigieren Sie in Adobe Commerce Admin zu Katalog > Produkte.

  2. Wählen Sie das Produkt aus, dem Sie das Bild im vorherigen Abschnitt hinzugefügt haben.

  3. Erweitern Sie den Abschnitt Bilder und Videos .

    Abschnitt „Bilder und Videos“ wurde bei der Produktbearbeitung erweitert {width="600" modal="regular"}

  4. Vergewissern Sie sich, dass Ihr Bild jetzt in der Liste der Bilder verfügbar ist.

  5. Kehren Sie zu Ihrer Storefront zurück und navigieren Sie zur Seite für das geänderte Produkt.

  6. Bestätigen Sie, dass das neue Bild angezeigt wird.

    Produktseite in der Storefront mit dem neu generierten Bild {width="600" modal="regular"}

Varianten erzeugen

Adobe Commerces Varianten generieren nutzt generative KI, um die Erstellung hochwertiger Inhalte zu automatisieren, das Messaging anzupassen und Assets nahtlos in Ihrer Storefront zu veröffentlichen.

Text generieren

  1. Öffnen Sie Ihre Storefront-Site mit dem universellen Editor.

  2. Wählen Sie den Textblock aus, den Sie bearbeiten möchten.

  3. Klicken Sie Bedienfeld Eigenschaften“ auf Varianten erstellen.

  4. Klicken Sie auf die Generieren-Schaltfläche.

  5. Wählen Sie den generierten Text aus oder passen Sie ihn an.

  6. Klicken Sie Veröffentlichen, um Ihre Storefront zu aktualisieren.

Erstellen von Inhalten und Bildern

  1. Generate Variations öffnen

  2. Wählen Sie die Vorlage Hero Banner aus.

  3. Geben Sie im Textfeld Benutzerinteraktion erläutern Folgendes ein: „Erlebnis für Adobe-Mitarbeiter und -Partner beim Kauf von Geräten der Marke Adobe! ".

  4. Geben Sie in URL für Domain Wissen www.adobestore.com ein.

  5. Klicken Sie Generieren.

  6. Wählen Sie eine Inhaltsvariante aus und klicken Sie auf Bild erstellen.

  7. Wählen Sie im Dropdown Menü „Bildgröße die Option Breitbild (16:9).

  8. Wählen Sie in Dropdown- „Content-Typ“ Foto aus.

  9. Wählen Sie für Referenzbild Stil“ das vorhandene Adobe-Store-Banner aus.

  10. Wählen Sie das zu verwendende generierte Bild aus und klicken Sie auf Speichern.

  11. Wiederholen Sie diesen Vorgang mit anderen Referenzbildern, um weitere Varianten zu generieren.

Fehlerbehebung

Verwenden Sie die folgenden Vorschläge, um Probleme zu beheben, die beim Versuch dieser Tutorials auftreten.

  • Wenn Sie Anleitungen zu Befehlen oder Flags benötigen:

    1. Führen Sie aio --help aus, um alle verfügbaren Befehle und Flags anzuzeigen.

    2. Verwenden Sie für bestimmte Befehle das --help-Flag. Beispiel:

      • aio console --help
      • aio commerce --help
  • Wenn Sie auf ungültige Anmeldeprobleme stoßen:

    1. aio config clear ausführen.
    2. aio auth login --force ausführen.
    3. Melden Sie sich bei Ihrem Browser an.
    4. Wählen Sie Ihr Profil.
    5. Wechseln Sie zurück zum Terminal, um fortzufahren.
  • Wenn der init-Befehl fehlschlägt:

    1. aio api-mesh delete ausführen.
    2. Führen Sie aio commerce init erneut aus.
  • Wenn Sie die falsche Organisation, das falsche Projekt oder den falschen Arbeitsbereich ausgewählt haben, bevor Sie den init Befehl ausgeführt haben:

    1. aio console org select ausführen.
    2. aio console project select ausführen.
    3. aio console workspace select ausführen.
  • Wenn Sie eine ungültige Mandantenauswahl haben:

    1. Brechen Sie die aktuelle CLI-Ausführung mit der Taste Strg-C ab.
    2. aio commerce init ausführen.
  • Wenn eine ungültige API-Mesh-Installation auftritt:

    • aio api-mesh update mesh-config.json ausführen.
recommendation-more-help
fce0ca22-edd1-4bad-ab1e-3070c2bf0b91