End-to-End-Anwendungsfall für Storefront- und Katalogadministrator

Adobe Commerce Optimizer-Benutzeroberfläche : Richten Sie Katalogansichten und Richtlinien ein, um die komplexe betriebliche Katalogeinrichtung für den Carvelo-Anwendungsfall zu verwalten.

Commerce-Storefront - Rendern Sie die Storefront mithilfe der Beispielkatalogdaten, die in Ihre Adobe Commerce Optimizer-Instanz geladen wurden, und der Konfigurationsdateien, fstab.yaml und config.json der Commerce-Storefront.

Erstellen Sie eine neue Richtlinie mit dem Namen Celport-Teilekategorien, damit Celport nur Brems- und Federungsteile verkaufen kann.

Erstellen Sie eine neue Katalogansicht für die Celport-Storefront.

Diese Katalogansicht verwendet Ihre neu erstellte Richtlinie Celport-Teilekategorien und die vorhandenen East Coast Inc Brands, um sicherzustellen, dass Celport nur die Marken Bolt und Cruz als Teil der Vereinbarung mit East Coast Inc. verkaufen kann. Die Celport-Katalogansicht verwendet das east_coast_inc Preisbuch, um Produktpreispläne zu unterstützen, die mit den Lizenzvereinbarungen für Marken übereinstimmen.

Aktualisieren Sie die Konfiguration der Commerce-Storefront, um Daten aus der von Ihnen erstellten Celport-Katalogansicht zu verwenden.

Erweitern Sie in der linken Leiste den Abschnitt Store-Einrichtung und klicken Sie auf Policies.

Klicken Sie auf Create Policy.

Es wird eine neue Seite angezeigt, auf der Sie die Richtliniendetails hinzufügen können.

Fügen Sie die erforderlichen Details hinzu:

name = Celport-Teilekategorien

Klicken Sie auf Add Filter.

Es wird ein Dialogfeld angezeigt, in dem Sie Filterdetails hinzufügen können.

Fügen Sie die Filterdetails hinzu:

• Attribut = part_category
• Operator = IN
• Wert Source = STATIC
• Wert = Bremsen
• Wert = Aussetzung

Weitere Informationen über den Unterschied zwischen einer STATIC- und einer TRIGGER-Wertquelle finden Sie unter Quelltypen von Werten.

Klicken Sie im Dialogfeld Filter details auf Save.

Um den soeben erstellten Filter zu aktivieren, klicken Sie auf die Aktionspunkte (…) und wählen Sie Aktivieren.

Klicken Sie auf Save.

Gehen Sie zurück zur Liste der Richtlinien, indem Sie auf den Rückwärtspfeil klicken.

Die neue Celport-" wird in der Liste angezeigt.

Erweitern Sie in der linken Leiste den Abschnitt Store-Einrichtung und klicken Sie auf Catalog views.

Beachten Sie die vorhandenen Katalogansichten: Arkbridge, Kingsbluff und Global.

Klicken Sie auf Add catalog view.

Füllen Sie die Details der Katalogansicht aus:

• name = Celport
• Catalog sources = en-US
• Richtlinien (Dropdown verwenden) = East Coast Inc Brands; Celport-Teilekategorien; Marke; Modell

Klicken Sie auf Add , um die Katalogansicht zu erstellen.

Die Seite mit den Katalogansichten wird aktualisiert, um die neue Katalogansicht anzuzeigen.

Rufen Sie die Celport-Katalogansichts-ID ab.

Klicken Sie auf das Informationssymbol für die Celport-Katalogansicht auf der Seite Katalogansichten.

Kopieren Sie die Katalogansichts-ID und speichern Sie sie. Sie benötigen diese ID, wenn Sie die Storefront-Konfiguration aktualisieren, um Daten an Ihren neuen Celport-Katalog zu senden.

So überprüfen Sie, ob dieser Schritt ordnungsgemäß abgeschlossen wurde:

• Name der Katalogansicht: „Celport“
• Katalogansicht zeigt 4 verknüpfte Richtlinien an
• Die Katalogansichts-ID wird angezeigt und kann kopiert werden
• Katalogquelle zeigt „en-US“

Öffnen Sie in Ihrer lokalen Entwicklungsumgebung den Ordner, in den Sie das GitHub-Repository geklont haben, mit Ihren Textbausteinkonfigurationsdateien für die Storefront.

Öffnen Sie im Stammverzeichnis des Ordners die config.json.

{
 "public": {
   "default": {
   "commerce-core-endpoint": "https://www.aemshop.net/graphql",
   "commerce-endpoint": "https://na1-sandbox.api.commerce.adobe.com/Fwus6kdpvYCmeEdcCX7PZg/graphql",
   "headers": {
      "cs": {
         "ac-view-id": "9ced53d7-35a6-40c5-830e-8288c00985ad",
         "ac-price-book-id": "west_coast_inc",
         "ac-source-locale": "en-US"
        }
      },
      "analytics": {
         "base-currency-code": "USD",
         "environment": "Production",
         "store-id": 1,
         "store-name": "ACO Demo",
         "store-url": "https://www.aemshop.net",
         "store-view-id": 1,
         "store-view-name": "Default Store View",
         "website-id": 1,
         "website-name": "Main Website"
       }
    }
   }
}

Ersetzen Sie im commerce-endpoint die Mandanten-ID in der URL durch die URL für Ihre Adobe Commerce Optimizer.

Die Mandanten-ID finden Sie in der URL für die Commerce Optimizer-Benutzeroberfläche. Bei der folgenden URL ist die Mandanten-ID beispielsweise XDevkG9W6UbwgQmPn995r3.

https://experience.adobe.com/#/@commerceprojectbeacon/in:XDevkG9W6UbwgQmPn995r3/commerce-optimizer-studio/catalog

Ersetzen Sie den ac-view-id Wert durch die Celport-Katalogansichts-ID, die Sie zuvor kopiert haben.

Ersetzen Sie den ac-price-book-id durch "east_coast_inc".

Nachdem Sie diese Änderungen vorgenommen haben, sollte Ihre config.json-Datei etwa wie folgt aussehen, wobei die ACO-tenant-id und celport-catalog-view-id Platzhalter durch Ihre Werte ersetzt werden:

{
  "public": {
     "default": {
     "commerce-core-endpoint": "https://www.aemshop.net/graphql",
     "commerce-endpoint": "https://na1-sandbox.api.commerce.adobe.com/{{ACO-tenant-id}}/graphql",
     "headers": {
         "cs": {
             "ac-view-id": "{{celport-catalog-view-id}}",
             "ac-price-book-id": "east_coast_inc",
             "ac-source-locale": "en-US"
           }
         },
         "analytics": {
             "base-currency-code": "USD",
             "environment": "Production",
             "store-id": 1,
             "store-name": "ACO Demo",
             "store-url": "https://www.aemshop.net",
             "store-view-id": 1,
             "store-view-name": "Default Store View",
             "website-id": 1,
             "website-name": "Main Website"
          }
      }
  }
}

Speichern Sie die Datei.

Wenn Sie die Änderungen speichern, aktualisieren Sie die Katalogkonfiguration, um die Carvelo-Katalogansicht zu verwenden, die so konfiguriert wurde, dass nur Brems- und Federungsteile verkauft werden.

Starten Sie die Storefront, um das Celport-spezifische Katalogerlebnis anzuzeigen, das von Ihrer Storefront-Konfiguration erstellt wurde.

1. Starten Sie im Terminal-Fenster in Ihrer IDE die Vorschau Ihrer lokalen Storefront.

   code language-shell
   npm start

   Der Browser öffnet die Vorschau der lokalen Entwicklung unter http://localhost:3000.

   Wenn der Befehl fehlschlägt oder sich der Browser nicht öffnet, lesen Sie die Anweisungen für die lokale Entwicklung im Thema „Storefront-Setup“.

Suchen Sie im Browser nach brakes und drücken Sie die Eingabetaste.

Die Storefront wird aktualisiert, um die Produktlistenseite mit den Bremsteilen anzuzeigen.

Klicken Sie auf ein Bild eines Bremsteils, um die Produktdetails mit Preisinformationen anzuzeigen und die Produktpreisinformationen zu beachten.

Suchen Sie nach tires, was eine weitere Komponentenkategorie ist, die in den Anwendungsfalldaten auf Ihrer Adobe Commerce Optimizer-Instanz verfügbar ist.

Es werden keine Ergebnisse zurückgegeben. Dies liegt daran, dass die Celport-Katalogansicht so konfiguriert wurde, dass nur Brems- und Federungsteile verkauft werden.

Experimentieren Sie mit der Aktualisierung Ihrer Storefront-Konfigurationsdatei (config.json).

1. Ändern Sie die ac-view-id- und ac-price-book.

Sie können beispielsweise die Katalogansichts-ID in die Kingsbluff-Katalogansicht und die Preisbuch-ID in east_coast_inc ändern. Sie können die für Kingsbluff verfügbaren Teilekategorien sehen, indem Sie die Richtlinie Kingsbluff-) lesen.

1. Speichern Sie die Datei.

   Wenn Sie die Datei speichern, wird die Vorschau der lokalen Storefront automatisch aktualisiert.

2. Zeigen Sie eine Vorschau der Änderungen im Browser an, indem Sie die Suchfunktion verwenden, um Reifenteile zu finden.

   Beachten Sie die verschiedenen verfügbaren Teiletypen und die Preise, die der Kingsbluff-Katalogansicht zugeordnet sind.

Diese Experimente zeigen die Flexibilität von Adobe Commerce Optimizer. Sie können schnell zwischen verschiedenen Katalogansichten und Preisverzeichnissen wechseln, um benutzerdefinierte Einkaufserlebnisse für verschiedene Zielgruppen zu erstellen, ohne Ihre Katalogdaten zu duplizieren.