1. Einleitung

Die Erwartungen von Kundinnen und Kunden an moderne E-Commerce-Shopsysteme werden immer vielfältiger: Neben der reinen Darstellung von Produktkatalogen müssen sie einzigartige und personalisierte Shopping-Erlebnisse vermitteln. Kundinnen und Kunden wollen dabei über alle von ihnen genutzten Kanäle und Endgeräte angesprochen werden. Die Anzahl eingesetzter Touchpoints ist daher beliebig groß.

Die FirstSpirit Connect (Headless) for SAP Commerce Cloud-Integration verknüpft die Digital Experience Platform FirstSpirit mit dem E-Commerce-Shopsystem SAP Commerce Cloud in Verbindung mit der Spartacus Storefront. Sie schafft dadurch ein leistungsstarkes Gesamtsystem, das die funktionalen Vorteile dieser Systeme kombiniert und die Bereitstellung moderner und personalisierter Inhalte ermöglicht.

Redakteurinnen und Redakteure erhalten vollständigen Zugriff auf den Produktkatalog der SAP Commerce Cloud und können diesen durch redaktionelle Inhalte, wie beispielsweise Shoppable-Videos, ergänzen. Die Pflege der Inhalte erfolgt dabei mithilfe einer intuitiv zu bedienenden WYSIWYG-Oberfläche, die FirstSpirit bereitstellt. Darüber hinaus erhalten sie die Möglichkeit, neue Inhalte zu erstellen. Die Inhalte können auf Seiten unterschiedlichsten Typs eingebunden werden - sowohl auf der Homepage als auch auf Landingpages sowie Produkt- und Kategorieseiten. Kenntnisse über das E-Commerce-Shopsystem sind dafür nicht erforderlich. Die WYSIWYG-Oberfläche stellt alle benötigen Funktionalitäten zur Verfügung.

Die Spartacus Storefront übernimmt weiterhin die Auslieferung der Inhalte. Diese bezieht sie jedoch nicht mehr ausschließlich aus der SAP Commerce Cloud, sondern zusätzlich aus dem FirstSpirit CaaS (Content as a Service). Der CaaS entspricht einem zentralen Content Repository und persistiert die in FirstSpirit gepflegten Inhalte.
Das Gesamtsystem aus FirstSpirit, Spartacus und der SAP Commerce Cloud besitzt damit eine Architektur, in der das redaktionelle Backend FirstSpirits klar von der Spartacus Storefront getrennt ist.

Wird im restlichen Dokument die Formulierung "Commerce Cloud" verwendet, ist damit immer ausschließlich die SAP Commerce Cloud gemeint.
Dies gilt auch für die Kurzform "FirstSpirit Connect", mit der innerhalb dieser Dokumentation grundsätzlich die FirstSpirit Connect (Headless) for SAP Commerce Cloud-Integration gemeint ist.

Des Weiteren ist die gesamte Dokumentation auf die Anbindung der Spartacus Storefront sowie des B2C Demo Shops ausgerichtet. Die Erwähnung der Storefront bezieht sich somit ausschließlich auf die Spartacus Storefront.

Ein Bestandteil der Auslieferung des FirstSpirit Connect (Headless) for SAP Commerce Cloud-Moduls ist das Referenzprojekt FirstSpirit Connect Reference Project. Die vorliegende Dokumentation orientiert sich durchgängig an diesem Referenzprojekt und erläutert die mit dem Modul bereitgestellten Funktionalitäten anhand gängiger Anwendungsfälle.

1.1. Funktionsumfang

FirstSpirit Connect stellt die folgenden Möglichkeiten zur Verfügung:

  • Zugriff auf Produkt- und Kategorieinformationen

  • Erzeugung neuer redaktioneller Inhalte

  • gleichzeitige Darstellung von Shopelementen und redaktionellen Inhalten in der FirstSpirit-Vorschau

  • Ausspielung von Inhalten an beliebige Touchpoints

Die dafür notwendigen Funktionalitäten werden mit der Installation und Konfiguration des Moduls innerhalb des WYSIWYG-Clients bereitgestellt.

Die Pflege der Inhalte findet über die gewohnten FirstSpirit-Mittel statt. Mit FirstSpirit vertraute Personen benötigen daher keine darüber hinausgehenden Kenntnisse - insbesondere keine über das E-Commerce-Shopsystem. Die Inhalte werden der Storefront mithilfe des CaaS verfügbar gemacht und in Kombination mit den Inhalten aus der Commerce Cloud von der Storefront ausgeliefert.

Innerhalb des neu geschaffenen Gesamtsystems ergibt sich somit keinerlei Unterschied für die Auslieferung redaktioneller Inhalte. Sie erfolgt weiterhin durch die Storefront. Auch eine Wartung FirstSpirits beeinflusst weder die Storefront noch die Commerce Cloud.

dataflow
Abbildung 1. Datenfluss

1.2. Architektur

Die SAP-Shop-Architektur setzt sich standardmäßig aus der Commerce Cloud und der Spartacus Storefront zusammen. Während die Commerce Cloud in diesem System sämtliche Shopfunktionalitäten bereitstellt und alle Shopinhalte persistiert, dient die Spartacus Storefront der Auslieferung dieser Inhalte.

Mit der FirstSpirit Connect (Headless) for SAP Commerce Cloud-Lösung integrieren sich FirstSpirit und der CaaS in diese Architektur und erweitern die Shopfunktionalitäten der Commerce Cloud. Die Integration schafft dadurch ein Gesamtsystem, das die funktionalen Stärken der einzelnen Systeme kombiniert. Innerhalb dieses Gesamtsystems repräsentieren FirstSpirit und die Commerce Cloud das Backend, während der CaaS die Middleware und die Storefront das Frontend bilden.

Die folgende Grafik zeigt die Highlevel-Architektur dieses Gesamtsystems:

sp architecture simple
Abbildung 2. Highlevel-Architektur

Innerhalb des neu geschaffenen Gesamtsystems übernimmt die Storefront weiterhin die Auslieferung der Inhalte, die sie standardmäßig aus der Commerce Cloud bezieht. Zusätzlich fragt sie jedoch die Inhalte der jeweiligen CaaS-Instanz ab und verknüpft sie mit denen der Commerce Cloud. Zu diesem Zweck wird sie durch die fs-spartacus-bridge-Bibliothek erweitert.

Im Gegensatz zur Auslieferung der Inhalte verlagert sich deren Erstellung und Pflege von der Commerce Cloud nach FirstSpirit. FirstSpirit stellt dafür mit dem ContentCreator einen intuitiv zu bedienenden WYSIWYG-Client zur Verfügung. In diesen ist der sogenannte Omnichannel Manager (OCM) eingebunden, der die Darstellung externer Inhalte im ContentCreator erlaubt (vgl. Abbildung Lowlevel-Architektur).

Durch die Einbettung der Storefront in den Omnichannel Manager wird eine kombinierte Vorschau der Inhalte bereitgestellt, die in diesem Fall aus dem Preview CaaS und der Commerce Cloud stammen. Die Redakteurinnen und Redakteure erhalten auf diesem Weg die Möglichkeit, bereits existierende Shopseiten im ContentCreator zu bearbeiten. Dafür stehen ihnen eine Vielzahl unterschiedlicher Komponenten, wie z.B. Shoppable-Videos, zur Verfügung.

Die Bereitstellung der Produkt- und Kategorieinformationen erfolgt über einen Report im ContentCreator. Dieser greift dafür über die CMS WebServices-Schnittstelle der Commerce Cloud auf den Product Catalog zu und ermittelt so die notwendigen Daten.

Die Übertragung der erstellten bzw. veränderten Inhalte in den Online CaaS erfolgt mit jeder Freigabe. Der CaaS persistiert die Inhalte im JSON-Format in Form von Inhaltsfragmenten und macht sie für die Storefront verfügbar, die sie zusammen mit den Commerce Cloud-Inhalten in den Shop integriert. Für die Darstellung der aus dem Referenzprojekt stammenden Inhalte muss die Storefront neben der Bridge die fs-spartacus-view-components-Bibliothek einbinden.

Das Gesamtsystem aus FirstSpirit, Spartacus und der Commerce Cloud besitzt damit eine Architektur, in der das redaktionelle Backend FirstSpirits klar von der Storefront getrennt ist. Eine Wartung FirstSpirits beeinflusst weder die Storefront noch die Commerce Cloud.

sp architecture
Abbildung 3. Lowlevel-Architektur

1.3. Konzept

Die FirstSpirit Connect-Integration bietet die Möglichkeit, redaktionelle Inhalte für die Storefront FirstSpirit-seitig zu pflegen und diese anschließend in den CaaS zu übertragen. Aus diesem werden sie von der Spartacus Storefront abgefragt und zusammen mit den Produktinformationen aus der Commerce Cloud ausgeliefert. Dafür muss die Verarbeitung von Inhalten in beiden Systemen aufeinander abgestimmt und zueinander kompatibel sein. Die nachfolgenden Unterkapitel beschreiben das zugrunde liegende Konzept, mit dem diese Kompatibilität erreicht wird.

1.3.1. Seiten

Ähnlich wie in FirstSpirit basieren Seiten in der Commerce Cloud auf einer Struktur unterschiedlicher Komponenten. Um redaktionelle Inhalte zwischen den beiden Systemen austauschen zu können, müssen diese Komponenten aufeinander abgestimmt sein.

Innerhalb des in der Auslieferung enthaltenen Referenzprojekts FirstSpirit Connect Reference Project werden die Slots durch die Inhaltsbereiche einer Seitenvorlage repräsentiert. Ihnen können Absätze hinzugefügt werden, die jeweils einer Komponente entsprechen (vgl. Abbildung Page Rendering).

Mit FirstSpirit lassen sich somit Komponenten generieren, die über Slots in einer Seite dargestellt werden.

concept
Abbildung 4. Page Rendering

1.3.2. Seitentypen

Wie im vorhergehenden Kapitel beschrieben, erfolgt die Pflege redaktioneller Inhalte sowohl in FirstSpirit als auch in der Commerce Cloud auf Basis einer Seite. Die Integration unterscheidet dabei zwischen Shop Driven Pages und den FirstSpirit Driven Pages.

Shop Driven Pages

Im Gegensatz zu den FirstSpirit Driven Pages besitzen die Shop Driven Pages sowohl eine Seite in FirstSpirit als auch in der Commerce Cloud. Sie entsprechen beispielsweise der Homepage oder den Produkt- und Kategorieseiten. Die FirstSpirit-seitig gepflegten Inhalte überschreiben oder ergänzen die bestehenden Inhalte in den vordefinierten Slots dieser Seiten.

FirstSpirit Driven Pages

FirstSpirit Driven Pages existieren ausschließlich in FirstSpirit und besitzen keine zugehörige Seite in der Commerce Cloud. Sie dienen der Erzeugung von Inhalts- oder Kampagnenseiten, die nicht zwingend im Standardumfang des Shops enthalten sind. FirstSpirit Driven Pages können entweder das Layout einer Shop Driven Page oder ein eigenes Layout verwenden, das in der Storefront definiert ist.

Die Speicherung der Inhalte ist für beide Seitentypen identisch: Sie werden an den CaaS übertragen und in diesem persistiert. Bei der Abfrage einer Seite prüft die Storefront, ob zu einer gegebenen ID sowohl im CaaS als auch in der Commerce Cloud eine Seite existiert. Ist dies der Fall, handelt es sich um eine Shop Driven Page. Enthält andernfalls nur der CaaS eine Seite für die entsprechende ID, handelt es sich um eine FirstSpirit Driven Page. Liefert keines der beiden Systeme eine Seite zurück, zeigt die Storefront eine Fehlerseite an.

1.3.3. Vorschau

Die mit dem FirstSpirit Connect-Modul realisierte Integration sieht FirstSpirit-seitig lediglich die Erzeugung und Pflege der redaktionellen Inhalte sowie ihre Publizierung in Form von JSON-Dokumenten vor. Die Storefront bestimmt jedoch weiterhin das Rahmenwerk einer Seite, deren Slots die generierten Komponenten einbinden.

Um eine Seite in der Vorschau darzustellen, ermittelt FirstSpirit ihre aktuelle Ansicht in der Spartacus Storefront. Diese fragt ihrerseits die redaktionellen Inhalte aus dem Preview CaaS ab und ersetzt die entsprechenden Komponenten. FirstSpirit stellt anschließend das Resultat mithilfe des Omnichannel Managers im ContentCreator dar.

2. Commerce Cloud - Installation und Konfiguration

FirstSpirit dient der Erstellung und Pflege redaktioneller Daten, die in den CaaS übertragen und von diesem persistiert werden. Um die Daten in den Shop zu integrieren, benötigt die Storefront eine Zugriffsmöglichkeit auf den CaaS. Diese wird durch verschiedene Bibliotheken bereitgestellt, die eine Spartacus-seitige Einbindung und Konfiguration erfordern.

Die nachfolgenden Kapitel beschreiben alle notwendigen Schritte für die Installation und die Konfiguration der Bibliotheken sowie für die erforderlichen Commerce Cloud-seitigen Anpassungen.

Die FirstSpirit Connect-Integration setzt die Verwendung der Commerce Cloud (in der Version 19.05 oder höher) und der Spartacus Storefront in der Version 3.x voraus.

2.1. OAuth-Konfiguration

Das FirstSpirit Connect-Modul benötigt für die Abfrage der Informationen aus der Commerce Cloud eine OAuth-Authentifizierung. Daher ist die Konfiguration eines OAuth-Clients innerhalb der Commerce Cloud erforderlich.

Für das Anlegen eines solchen OAuth-Clients stehen zwei Möglichkeiten zur Verfügung:

  • manuell im Backoffice unter System  OAuth  OAuth Clients

  • automatisch per Import des nachfolgenden ImpExes
    (in der Hybris Admin Console unter Console  ImpEx Import)

ImpEx
INSERT_UPDATE OAuthClientDetails;clientId[unique=true] ;resourceIds;scope ;authorizedGrantTypes ;authorities ;clientSecret;registeredRedirectUri
;firstspirit ;hybris ;extended,previewwebservices;authorization_code,refresh_token,password,client_credentials;ROLE_TRUSTED_CLIENT ;secret; ;

2.2. Einbindung und Konfiguration der Bibliotheken

In dem durch die FirstSpirit Connect-Integration realisierten System übernimmt die Storefront die Auslieferung der Inhalte. Diese bezieht sie sowohl aus der Commerce Cloud als auch aus der jeweiligen CaaS-Instanz und verknüpft sie miteinander. Zu diesem Zweck muss sie durch die fs-spartacus-bridge-Bibliothek erweitert werden. Für die Darstellung und Bearbeitung der aus dem Referenzprojekt stammenden Inhalte ist darüber hinaus die Einbindung der Bibliotheken fs-spartacus-view-components und fs-tpp-api erforderlich. Des Weiteren wird die fs-spartacus-common-Bibliothek benötigt. Sie enthält Klassen, die sowohl die Bridge als auch die Angular UI-Komponenten nutzen.

Die Bereitstellung der Bibliotheken erfolgt in Form von npm-Paketen, die sich über die folgenden Befehle installieren lassen:

Installationsbefehle
npm install fs-spartacus-bridge
npm install fs-spartacus-view-components
npm install fs-spartacus-common
npm install fs-tpp-api@cloud-sap-spartacus

Für die Darstellung der Editierfunktionalitäten im ContentCreator wird zusätzliches CSS benötigt. Dieses ist in der Bridge enthalten und muss im Anschluss an die Installation in die styles.scss-Datei der Storefront importiert werden.

Einbindung der CSS-Datei
@import '~fs-spartacus-bridge/styles/index';

Des Weiteren sind im letzten Schritt der Installation die Angular UI-Komponenten und die Bridge im imports-Array des @NgModules im Hauptmodul der Spartacus-Applikation (app.module.ts) einzubinden. Im Gegensatz zu den UI-Komponenten setzt die Bridge dabei unterschiedliche Informationen voraus. Neben einer optionalen Fallback-Sprache und verschiedenen CaaS-Angaben erwartet sie eine Definition der Shop und FirstSpirit Driven Pages, deren Bearbeitung im ContentCreator möglich sein soll.

Die Festlegung einer Fallback-Sprache bietet die Möglichkeit, auf Inhalte in einer anderen Sprache zurückzugreifen, wenn für die angezeigte Sprache keine Inhalte existieren. So sind Inhalte schnell und einfach präsentiertbar, ohne vollständig übersetzt zu sein. Die Nutzung dieser Funktion erfordert die Angabe einer Fallback-Sprache im CaaS locale-Format (zum Beispiel en_GB).

Um die in der Bridge-Konfiguration festgelegte Fallback-Sprache nutzen zu können, muss die verwendete FirstSpirit-Absatzvorlage die Eingabekomponente st_languageFallbackEnabled und die ihr zugehörige Regel beinhalten. Andernfalls ist die Aktivierung der Fallback-Sprache nicht möglich.

Zu den CaaS-Angaben zählen unter anderem die Tenant ID und die Project ID: Die Tenant ID ist eine von der e-Spirit AG festgelegte eindeutige Kennung, die im Konfigurationsdialog des CaaS-Services definiert ist. Die Project ID entspricht der UUID des verwendeten FirstSpirit-Projekts. Sie ist ein Bestandteil der CaaS-URL und folgt in dieser auf die Tenant ID. Die CaaS-URL ist ihrerseits im Konfigurationsdialog der CaaS-Projekt-Komponente sichtbar. Weitere Informationen zum Schema der CaaS-URL sind in der CaaS Connect Moduldokumentation enthalten.

Die für die Konfiguration notwendigen CaaS-Informationen stellt die e-Spirit AG mit der Integration zur Verfügung. Bei Fragen bietet der Technical Support qualifizierte Unterstützung an.

Für die definierten Pages sind zusätzlich die bearbeitbaren Slots sowie optional eine Merge-Strategie zu konfigurieren. Mit der Merge-Strategie lässt sich festlegen, wie die Inhalte, die sowohl Commerce Cloud- als auch FirstSpirit-seitig für einen Slot gepflegt sind, miteinander verknüpft werden. Standardmäßig ersetzen die FirstSpirit-Inhalte die in einem Slot enthaltenen Commerce Cloud-Inhalte.

Der folgende Code-Block zeigt die für das Referenzprojekt notwendige Konfiguration. Sie definiert verschiedene Shop und FirstSpirit Driven Pages, für deren Bearbeitung die Konfiguration zwingend erforderlich ist.

Erweiterung des import-Arrays
import { APPEND, FsSpartacusBridgeModule } from 'fs-spartacus-bridge';
import { FsSpartacusViewComponentsModule } from 'fs-spartacus-view-components';
import { FirstSpiritManagedPage, fromSlotList } from 'fs-spartacus-common';
import { NgModule } from '@angular/core';

@NgModule({
   imports: [
      FsSpartacusViewComponentsModule,
      FsSpartacusBridgeModule.withConfig({
         fallbackLanguage: 'en_GB',
         caas: {
            baseUrl: 'CAAS BASE URL',
            project: 'PROJECT ID',
            apiKey: 'CAAS API KEY',
            tenantId: 'TENANT ID'
         },
         firstSpiritManagedPages: [
            FirstSpiritManagedPage.enhanceSapPages('CartPageTemplate',
               fromSlotList('BottomHeaderSlot', 'PreFooterSlot')),
            FirstSpiritManagedPage.enhanceSapPages('ProductDetailsPageTemplate',
               fromSlotList('BottomHeaderSlot', 'PreFooterSlot')),
            FirstSpiritManagedPage.enhanceSapPages('CategoryPageTemplate',
               fromSlotList('BottomHeaderSlot', 'PreFooterSlot')),
            FirstSpiritManagedPage.enhanceSapPages('ProductListPageTemplate',
               fromSlotList('BottomHeaderSlot', 'PreFooterSlot'))
            FirstSpiritManagedPage.enhanceSapPages('ProductListPageTemplate',
               fromSlotList('BottomHeaderSlot', 'PreFooterSlot')),
            FirstSpiritManagedPage.integrateFsDrivenPagesIntoSapSkeleton(
               'DummyCampaignPageWithHeader',
               PageType.CONTENT_PAGE,
               'campaign_page_with_header',
               fromSlotList('BottomHeaderSlot', 'Section1', 'Section2C', 'Section3', 'PreFooterSlot')),
            FirstSpiritManagedPage.integrateFsDrivenPages(
               'campaign_page_without_header',
               fromSlotList('BottomHeaderSlot', 'NarrowContentSection', 'WideContentSection', 'BottomNarrowSection', 'PreFooterSlot'))
         ]
      })
   ]
})
export class AppModule { }

2.2.1. Definition der Shop und FirstSpirit Driven Pages

Für die Pflege redaktioneller Inhalte unterscheidet die Integration zwischen Shop und FirstSpirit Driven Pages. Sie variieren dadurch, dass die Shop Driven Pages sowohl in FirstSpirit als auch in der Commerce Cloud eine Seite besitzen. Im Gegensatz dazu existieren die FirstSpirit Driven Pages ausschließlich in FirstSpirit.

Um die Bearbeitung der Seiten im ContentCreator zu ermöglichen, sind sie in der Bridge zu konfigurieren. Die Konfiguration unterscheidet sich dabei in Abhängigkeit des Seitentyps.

Shop Driven Pages

Im Fall der Shop Driven Pages sind in der Konfiguration der Name des Commerce Cloud Templates und die bearbeitbaren Slots sowie optional eine Merge-Strategie anzugeben. Das Mapping zwischen dem definierten Commerce Cloud Template und der FirstSpirit-Vorlage erfolgt in den Projekteinstellungen.

Beispielkonfiguration - Shop Driven Page
firstSpiritManagedPages: [
   FirstSpiritManagedPage.enhanceSapPages('StoreFinderPageTemplate', [
      { name: 'BottomHeaderSlot' },
      { name: 'MiddleContent', mergeStrategy: APPEND }
   ])
]
FirstSpirit Driven Pages

FirstSpirit Driven Pages existieren ausschließlich in FirstSpirit und besitzen keine zugehörige Seite in der Commerce Cloud. Sie können entweder das Layout einer Shop Driven Page oder ein eigenes Layout verwenden, das in der Storefront definiert ist. Diese Unterscheidung ist auch in der Konfiguration zu berücksichtigen: Im ersten Fall sind die UID der zu verwendenden Commerce Cloud-Seite, deren PageType sowie die FirstSpirit-Vorlage und die bearbeitbaren Slots anzugeben. Im zweiten Fall ist lediglich die Angabe der FirstSpirit-Vorlage und der Slots erforderlich. In beiden Fällen erfolgt das Styling der FirstSpirit Driven Pages in Angular beispielsweise in der styles.scss-Datei der Storefront.

Beispielkonfiguration - FirstSpirit Driven Pages
firstSpiritManagedPages: [

   // Fall 1: Die FirstSpirit Driven Page verwendet das Layout einer Shop Driven Page.
   FirstSpiritManagedPage.integrateFsDrivenPagesIntoSapSkeleton(
      'DummyCampaignPageWithHeader',
      PageType.CONTENT_PAGE,
      'campaign_page_with_header',
      fromSlotList('BottomHeaderSlot', 'Section1', 'Section2C', 'Section3', 'PreFooterSlot')),

   // Fall 2: Die FirstSpirit Driven Page verwendet ein in der Storefront definiertes Layout.
   FirstSpiritManagedPage.integrateFsDrivenPages(
      'campaign_page_without_header',
      fromSlotList('BottomHeaderSlot', 'NarrowContentSection', 'WideContentSection',
         'BottomNarrowSection', 'PreFooterSlot')
   )
]

Die im ersten Fall anzugebene Commerce Cloud-Seite muss einer Dummy-Seite entsprechen, die bis auf das gewünschte Layout leer ist. Das heißt, dass sie das Layout definiert und beispielsweise einen allgemeinen Header und Footer besitzt, ansonsten jedoch keine Inhalte enthält. Eine solche Seite ist für jedes Layout erforderlich, dass von FirstSpirit Driven Pages verwendbar sein soll. Der SAP Blog beschreibt die Erzeugung neuer Seiten in Spartacus.

Im zweiten Fall ist der FirstSpirit Driven Page keine Commerce Cloud-Seite und somit auch kein Layout einer solchen Seite zugeordnet. Die Storefront weiß daher nicht, welche Slots existieren und in welcher Reihenfolge diese auszugeben sind. Um ihr diese Informationen mitzuteilen, ist die b2cLayoutConfig-Konfiguration folgendermaßen zu erweitern. Der dargestellte Code-Ausschnitt entspricht der Konfiguration für das Referenzprojekt.

Spartacus-seitig existieren verschiedene allgemeine Slots, deren Ausgabe ohne zusätzliche Konfiguration erfolgt. Ihre Angabe ist daher lediglich in der Konfiguration der Bridge, jedoch nicht in der b2cLayoutConfig-Konfiguration erforderlich. Ein Beispiel für diese Art von Slots ist der BottomHeaderSlot aus dem vorhergehenden Code-Ausschnitt.

Erweiterung der b2cLayoutConfig-Konfiguration
import {b2cLayoutConfig, LayoutConfig} from '@spartacus/storefront';

const config: LayoutConfig = JSON.parse(JSON.stringify(b2cLayoutConfig));
config.layoutSlots.footer['slots'].unshift('PreFooterSlot');

config.layoutSlots.campaign_page_without_header = {
  slots: ['NarrowContentSection', 'WideContentSection', 'BottomNarrowSection']
 };

export const customLayoutConfig = config;

FirstSpirit-seitige Anforderungen

Sowohl die Shop als auch die FirstSpirit Driven Pages benötigen entsprechende Seitenvorlagen im FirstSpirit-Projekt, in denen die Eingabekomponenten pt_seoUrl und pt_cc_identifier konfiguriert sein müssen. Die Eingabekomponente pt_seoUrl ermöglicht die Definition einer SEO-Url und muss daher bearbeitbar sein. Im Gegensatz dazu handelt es sich bei der Eingabekomponente pt_cc_identifier um eine versteckte Komponente. Sie wird automatisch befüllt und stellt die Erreichbarkeit der Seite im ContentCreator sicher.

Darüber hinaus ist sicherzustellen, dass die Inhaltsbereiche der FirstSpirit-Vorlagen mit den konfigurierten Slots übereinstimmen: Für jeden definierten Slot muss die Seitenvorlage einen Inhaltsbereich mit demselben Namen besitzen. Andernfalls werden die redaktionellen Inhalte von der Storefront ignoriert und nicht im Live-Stand ausgegeben.

Das Mapping zwischen den konfigurierten Slots und den Inhaltsbereichen der FirstSpirit-Seitenvorlagen unterscheidet nicht zwischen Groß- und Kleinschreibung. Die Namen Section1 und section1 gelten daher als identisch und werden einander erfolgreich zugeordnet.

2.2.2. Merge-Strategien

Mit der FirstSpirit Connect-Integration bezieht die Storefront sowohl Inhalte aus der Commerce Cloud als auch aus der jeweiligen CaaS-Instanz und verknüpft sie vor der Auslieferung miteinander. Dafür muss sie durch die fs-spartacus-bridge-Bibliothek erweitert werden, die entsprechend der Beschreibung im vorhergehenden Kapitel einzubinden und zu konfigurieren ist. Während der Konfiguration lässt sich optional eine Merge-Strategie definieren. Diese legt fest, wie die Inhalte, die sowohl Commerce Cloud- als auch FirstSpirit-seitig für einen Slot gepflegt sind, miteinander verknüpft werden.

Die folgenden Optionen stehen zur Auswahl:

REPLACE

Die Merge-Strategie REPLACE entspricht der Standardeinstellung der Bridge und muss daher nicht explizit angegeben werden. Sie bewirkt, dass die in FirstSpirit gepflegten Inhalte die in einem Slot enthaltenen Commerce Cloud-Inhalte überschreiben. Auf der entsprechenden Seite sind damit nur noch die FirstSpirit-Inhalte sichtbar.

APPEND

Soll eine Seite sowohl die Commerce Cloud- als auch die FirstSpirit-Inhalte für einen Slot anzeigen, kann zwischen den Merge-Strategien APPEND und PREPEND gewählt werden. Mit der Merge-Strategie APPEND zeigt die entsprechende Seite die in FirstSpirit gepflegten Inhalte unterhalb der für einen Slot bestehenden Commerce Cloud-Inhalte an.

PREPEND

Die Merge-Strategie PREPEND ist äquivalent zur zuvor genannten Option APPEND. Allerdings zeigt die Seite die FirstSpirit-Inhalte für einen Slot in diesem Fall oberhalb der aus der Commerce Cloud stammenden Inhalte an.

2.3. Erzeugung einer Dummy-Seite

Die FirstSpirit Connect-Integration unterscheidet bei der Pflege redaktioneller Inhalte zwischen Shop und FirstSpirit Driven Pages. FirstSpirit Driven Pages können entweder ein eigenes, in der Storefront definiertes Layout verwenden oder das einer Shop Driven Page übernehmen.

In zweiten Fall muss Commerce Cloud-seitig eine Dummy-Seite existieren, die bis auf das gewünschte Layout leer ist. Das heißt, dass sie, abgesehen von beispielsweise einem allgemeinen Header und Footer, keine Inhalte besitzen.

Eine Dummy-Seite lässt sich mithilfe eines ImpEx-Skripts erzeugen. Das im folgenden Code-Block dargestellte Skript generiert die Dummy-Seite für die im Referenzprojekt enthaltenen FirstSpirit Driven Pages. Sie basiert auf dem LandingPage2Template-Template und enthält lediglich einen Header und einen Footer. Die Existenz der Dummy-Seite ist zwingend erforderlich für die Verwendung der FirstSpirit Driven Pages.

Weitere Informationen zur Erzeugung neuer Seiten in Spartacus sind im SAP Blog enthalten.

ImpEx-Skript
$contentCatalog=electronics-spaContentCatalog
$contentCVOnline=catalogVersion(CatalogVersion.catalog(Catalog.id[default=$contentCatalog]),\
CatalogVersion.version[default=Online])[default=$contentCatalog:Online]

$siteResource=jar:de.hybris.platform.spartacussampledataaddon.constants.\
   SpartacussampledataaddonConstants&/spartacussampledataaddon/import/\
   contentCatalogs/electronicsContentCatalog

# create dummy page in online catalog
INSERT_UPDATE ContentPage;$contentCVOnline[unique=true];uid[unique=true];name;\
   masterTemplate(uid,$contentCVOnline);label;defaultPage[default='true'];\
   approvalStatus(code)[default='approved'];homepage[default='false']
;;DummyCampaignPageWithHeader;Dummy Campaign Page With Header;LandingPage2Template;/dummycampaignpagewithheader

# create empty slots for page
INSERT_UPDATE ContentSlot;$contentCVOnline[unique=true];uid[unique=true];name;active
;;Section1-DummyCampaignPageWithHeader;Section1 Slot for DummyCampaignPageWithHeader;true
;;Section2A-DummyCampaignPageWithHeader;Section2A Slot for DummyCampaignPageWithHeader;true
;;Section2B-DummyCampaignPageWithHeader;Section2B Slot for DummyCampaignPageWithHeader;true
;;Section2C-DummyCampaignPageWithHeader;Section2C Slot for DummyCampaignPageWithHeader;true
;;Section3-DummyCampaignPageWithHeader;Section3 Slot for DummyCampaignPageWithHeader;true
;;Section4-DummyCampaignPageWithHeader;Section4 Slot for DummyCampaignPageWithHeader;true
;;Section5-DummyCampaignPageWithHeader;Section5 Slot for DummyCampaignPageWithHeader;true
;;BottomHeaderSlot-DummyCampaignPageWithHeader;Bottom Header Slot for DummyCampaignPageWithHeader;true

# configure content slots for page
INSERT_UPDATE ContentSlotForPage;$contentCVOnline[unique=true];uid[unique=true];\
   position[unique=true];page(uid,$contentCVOnline)[unique=true];contentSlot(uid,$contentCVOnline)[unique=true]
;;Section1-DummyCampaignPageWithHeader;Section1;DummyCampaignPageWithHeader;Section1-DummyCampaignPageWithHeader
;;Section2A-DummyCampaignPageWithHeader;Section2A;DummyCampaignPageWithHeader;Section2A-DummyCampaignPageWithHeader
;;Section2B-DummyCampaignPageWithHeader;Section2B;DummyCampaignPageWithHeader;Section2B-DummyCampaignPageWithHeader
;;Section2C-DummyCampaignPageWithHeader;Section2C;DummyCampaignPageWithHeader;Section2C-DummyCampaignPageWithHeader
;;Section3-DummyCampaignPageWithHeader;Section3;DummyCampaignPageWithHeader;Section3-DummyCampaignPageWithHeader
;;Section4-DummyCampaignPageWithHeader;Section4;DummyCampaignPageWithHeader;Section4-DummyCampaignPageWithHeader
;;Section5-DummyCampaignPageWithHeader;Section5;DummyCampaignPageWithHeader;Section5-DummyCampaignPageWithHeader
;;BottomHeaderSlot-DummyCampaignPageWithHeader;BottomHeaderSlot;DummyCampaignPageWithHeader;BottomHeaderSlot-DummyCampaignPageWithHeader

# language settings
$language=en
INSERT_UPDATE ContentPage;$contentCVOnline[unique=true];uid[unique=true];title[lang=$language]
;;DummyCampaignPageWithHeader;Dummy Campaign Page With Header

3. FirstSpirit - Installation und Konfiguration

Für die Verwendung der Funktionalitäten des FirstSpirit Connect-Moduls ist FirstSpirit-seitig die Installation und Konfiguration unterschiedlicher Komponenten erforderlich. Die folgenden Unterkapitel erläutern die dafür notwendigen Schritte.

Zur Nutzung des FirstSpirit Connect-Moduls muss außerdem das CaaS Connect-Modul konfiguriert werden. Die dafür notwendigen Schritte sind in der CaaS Connect-Dokumentation beschrieben.

Neben den Standardgruppen Everyone, Administrators und Developers existieren im Referenzprojekt drei weitere externe Gruppen: Editors, ChiefEditors und ProjectAdmins. Diese Gruppen besitzen verschiedene Rechte, die entsprechend ihrer Aufgaben gewählt und für die verschiedenen Verwaltungen definiert wurden. Personen außerhalb dieser Gruppen sind standardmäßig nicht berechtigt das Referenzprojekt zu verwenden.

Besteht darüber hinaus der Bedarf nach weiteren Accounts oder Gruppen, so ist ihre Erzeugung beim Technical Support anzufordern. Für neue Accounts ist dafür eine Angabe der folgenden Informationen erforderlich:

  • Vor- und Nachname

  • E-Mail-Adresse

  • zuzuordnende Gruppen

3.1. Konfiguration der Projekt-Komponente

Für den Einsatz des FirstSpirit Connect-Moduls sind einige projektspezifische Informationen erforderlich. Sie sind über die Projekt-Komponente anzugeben, die dem bereitgestellten Referenzprojekt bereits hinzugefügt ist.

Zur Nutzung des FirstSpirit Connect-Moduls ist außerdem eine Konfiguration des CaaS Connect-Moduls erforderlich. Die dafür notwendigen Schritte sind in der CaaS Connect-Dokumentation beschrieben.

Das Referenzprojekt bindet außerdem die Projekt-Komponente der CXT ContentCreator Extension ein. Diese enthält eine vordefinierte Konfiguration, deren Veränderung zu einer Verhaltensänderung des ContentCreators führen kann. Eine Anpassung der Konfiguration ist daher nur nach vorheriger Rücksprache mit dem Technical Support vorzunehmen.

Öffnen Sie für die Konfiguration den ServerManager und wählen Sie den Bereich Projekt-Eigenschaften  Projekt-Komponenten.

projectcomponents
Abbildung 5. Projekt-Eigenschaften - Projekt-Komponenten

Im Hauptpanel ist eine Liste aller bereits vorhandenen Projekt-Komponenten zu sehen. Selektieren Sie den Eintrag FirstSpirit Connect for SAP Commerce Cloud Project Configuration und öffnen Sie den zugehörigen Konfigurationsdialog über Konfigurieren.

Der Dialog gliedert sich in fünf Reiter, von denen derzeit lediglich die Felder der Reiter Allgemein, Produkt DAP und Kategorie DAP zu berücksichtigen sind. Die nachfolgenden Unterkapitel erläutern sie im Detail. Die Reiter Vorschau und Inhalte besitzen derzeit keine Funktionalität.

3.1.1. Allgemein

Der Konfigurationsdialog der Projekt-Komponente enthält als erstes den Reiter Allgemein. Die in ihm zu definierenden Informationen müssen dem FirstSpirit-Server für eine Verbindung zur Commerce Cloud bekannt sein.

config general
Abbildung 6. Projekt-Komponente - Allgemein
URI

Innerhalb des Reiters Allgemein ist zunächst die URI der Commerce Cloud-Instanz einzutragen. Sie ermöglicht dem FirstSpirit-Server den Aufbau einer Verbindung zur Commerce Cloud.

Connection timeout/Connection retries

Mithilfe der beiden Felder Connection timeout und Connection retries lassen sich die Zeitspanne (in Sekunden) sowie die Anzahl der Versuche definieren, die der FirstSpirit-Server für einen Verbindungsaufbau zur Commerce Cloud verwendet.

Der FirstSpirit-Server benötigt für die Abfrage von Informationen aus der Commerce Cloud eine OAuth-Authentifizierung. Die benötigten Authentifizierungsdaten sind in den nachfolgenden Feldern des Reiters Allgemein einzutragen. Die übrigen Reiter ermöglichen eine Überschreibung dieser Angaben und besitzen daher dieselben Felder. Die Überschreibung erfolgt durch die Aktivierung der Checkbox Override general OAuth settings in einem der übrigen Reiter.

Auth Server URI

Für die Verbindung zur Commerce Cloud benötigt der FirstSpirit-Server die Angabe des Standard-Endpunkts für die OAuth-Authentifizierung. Die Eingabe der URI dieses Endpunkts muss relativ zur URI der Commerce Cloud-Instanz erfolgen.

Username/Password

In den Feldern Username und Password sind die Zugangsdaten anzugeben, mit denen die Authentifizierung durchgeführt wird. In der Regel handelt es dabei um die Daten eines technischen Commerce Cloud-Accounts.

OAuth Client ID

Dieses Feld dient der Angabe der für die Authentifizierung genutzten Standard-Client-ID. Sie wird während der Konfiguration des OAuth-Clients erzeugt und definiert die Zugriffsrechte des technischen Accounts.

OAuth Client Secret

Zusätzlich zur Client ID wird an dieser Stelle die Eingabe des ihr zugehörigen Client Secrets erwartet.

OAuth Grant Type

Ergänzend zur Client ID und zum Client Secret setzt die OAuth-Authentifizierung einen Grant Type voraus. Dafür stellt die Combobox die zwei Optionen password und client credentials zur Auswahl.

OAuth Einstellungen testen

Durch einen Klick auf diesen Button lässt sich der Verbindungsaufbau zur Commerce Cloud testen. Wurde in einem der anderen Reiter die Überschreibung der OAuth-Authentifizierung aktiviert, werden die in ihm gespeicherten Einstellungen berücksichtigt.

3.1.2. Produkt DAP

Zusätzlich zum Reiter Allgemein besitzt der Konfigurationsdialog der Projekt-Komponente die Reiter Produkt DAP und Kategorie DAP. Sie dienen der Konfiguration der Reports im ContentCreator, die verschiedene Informationen voraussetzen.