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ß.

FirstSpirit Connect for Commerce ermöglicht die Verknüpfung der Digital Experience Platform FirstSpirit mit einem beliebigen E-Commerce-Shopsystem. 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 des Shops und können diesen mit redaktionellen Inhalten, wie beispielsweise Interactive-Videos, verknüpfen. Die Pflege der Inhalte erfolgt dabei mithilfe einer intuitiv zu bedienenden und von FirstSpirit bereitgestellten WYSIWYG-Oberfläche. Darüber hinaus erhalten sie die Möglichkeit, neue Inhalte zu erstellen. Kenntnisse über das angebundene E-Commerce-Shopsystem sind dafür nicht erforderlich. Die WYSIWYG-Oberfläche stellt alle benötigen Funktionalitäten zur Verfügung.

Die Storefront des angebundenen Shops übernimmt weiterhin die Auslieferung der Inhalte. Diese bezieht sie jedoch nicht mehr ausschließlich aus dem Backend des Shops, 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 und dem angebundenen Shop besitzt damit eine Architektur, in der das redaktionelle Backend FirstSpirits klar vom Frontend des Shops getrennt ist.

Wird im restlichen Dokument die Formulierung "Connect for Commerce" verwendet, ist damit innerhalb dieser Dokumentation grundsätzlich FirstSpirit Connect for Commerce gemeint.

Ein Bestandteil der Auslieferung von FirstSpirit Connect for Commerce ist das Referenzprojekt FirstSpirit Connect for Commerce Reference Project. Die vorliegende Dokumentation orientiert sich durchgängig an diesem Referenzprojekt und erläutert die mit Connect for Commerce bereitgestellten Funktionalitäten anhand gängiger Anwendungsfälle.

1.1. Funktionsumfang

FirstSpirit Connect for Commerce 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 stellt das Modul nach der Installation und Konfiguration innerhalb des WYSIWYG-Clients bereit.

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 des angebundenen Shops 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 hat keinerlei Auswirkung auf das Frontend.

dataflow
Abbildung 1. Datenfluss

1.2. Architektur

Die Architektur eines Shops setzt sich standardmäßig aus dem Backend und einer Storefront zusammen. Während das Backend in diesem System sämtliche Shopfunktionalitäten bereitstellt und alle Shopinhalte persistiert, dient die Storefront der Auslieferung dieser Inhalte.

Mit der FirstSpirit Connect for Commerce-Lösung integrieren sich FirstSpirit und der CaaS in diese Architektur und erweitern die Funktionalitäten des Shops. Connect for Commerce schafft dadurch ein Gesamtsystem, das die funktionalen Stärken der einzelnen Systeme kombiniert. Innerhalb dieses Gesamtsystems repräsentieren FirstSpirit und der Shop das Backend, während der CaaS und die Bridge die Middleware und die Storefront das Frontend bilden.

Die folgende Grafik zeigt die Highlevel-Architektur dieses Gesamtsystems:

ng architecture simple
Abbildung 2. Highlevel-Architektur

Innerhalb des neu geschaffenen Gesamtsystems übernimmt die Storefront weiterhin die Auslieferung der Inhalte, die sie standardmäßig aus dem Backend des Shops bezieht. Zusätzlich fragt sie jedoch die Inhalte der jeweiligen CaaS-Instanz ab und verknüpft sie mit denen des Shops.

Im Gegensatz zur Auslieferung der Inhalte verlagert sich deren Erstellung und Pflege 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 dem Shop 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 zur Verfügung.

Die Bereitstellung der Produkt- und Kategorieinformationen erfolgt über Reports im ContentCreator. Die Bridge ermittelt die notwendigen Informationen dafür aus dem Backend des angebundenen Shops und übergibt sie über eine REST-Schnittstelle an den FirstSpirit-Server.

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 Shopinhalten integriert.

Das Gesamtsystem aus FirstSpirit, dem angebundenen Shop und dessen Storefront besitzt damit eine Architektur, in der das redaktionelle Backend FirstSpirits klar von der Storefront getrennt ist.

ng architecture
Abbildung 3. Lowlevel-Architektur

1.3. Konzept

Connect for Commerce bietet die Möglichkeit, redaktionelle Inhalte für den angebundenen Shop FirstSpirit-seitig zu pflegen und diese anschließend in den CaaS zu übertragen. Aus diesem werden sie von der Storefront des Shops abgefragt und zusammen mit den Produktinformationen aus dem Shop 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. Life Cycle

Innerhalb des mit Connect for Commerce geschaffenen Gesamtsystems verlagert sich die Erstellung und Pflege redaktioneller Inhalte nach FirstSpirit. Durch den vollständigen Zugriff auf den Produktkatalog des angebundenen Shops ist dabei auch eine Einbindung der Shopinhalte möglich.

Mit der Freigabe der redaktionellen Inhalte erfolgt eine automatische Übertragung in den CaaS. Dieser stellt sie wiederum der Storefront des angebundenen Shops bereit.

Die Storefront fragt die Informationen ab und verknüpft sie mit denen des Shops, um sie in einer kombinierten Ansicht auszuliefern. Für die Vorschau ermittelt FirstSpirit die dargestellte Seite wiederum aus der Storefront und stellt sie mit den gepflegten Inhalten im ContentCreator dar.

lifecycle
Abbildung 4. Life Cycle

1.3.2. Bridge

Die Bridge ist ein Microservice, der als Bindeglied zwischen einem beliebigen Shop-Backend und dem FirstSpirit-Server fungiert. Sie dient dazu, die Kommunikation und den Datenaustausch zwischen den beiden Systemen zu erleichtern.

Die Bridge implementiert die REST-Schnittstellen der Bridge API und überträgt die verfügbaren Produkt-, Kategorie- und Inhaltsseiten-Informationen aus dem Shop-Backend an den FirstSpirit-Server. Sie ist ebenfalls für das Mapping zwischen FirstSpirit-Seiten und Shop-Seiten verantwortlich.

Referenzimplementierungen verschiedener Bridges sind auf Github verfügbar.

1.3.3. CaaS Connect

Der CaaS entspricht einem zentralen Repository. Er persistiert die FirstSpirit-Inhalte in Form von Inhaltsfragmenten und stellt sie in einem einheitlichen JSON-Format beliebigen Endpunkten bereit.
Im Gegensatz zu vorherigen CaaS-Versionen entfällt mit CaaS Connect das Templating in FirstSpirit und verlagert sich in das Frontend. Durch die kontinuierliche Übertragung der Inhalte ist darüber hinaus jederzeit ein aktueller Datenbestand im CaaS sichergestellt.

Weitere Informationen sind in der CaaS Connect-Dokumentation enthalten.

1.3.4. Frontend API

Die Frontend API erweitert FirstSpirit Connect for Commerce, um die Funktionalität, Produkt-, Kategorie-, und Inhaltsseiten als Shop Driven Pages zu erzeugen, Daten aus dem CaaS abzurufen und markierte Slots für die Inhaltsbearbeitung vorzubereiten.

Sie besteht aus zwei npm-Paketen:

Die Referenzimplementierung eines Backend-Service ist auf Github verfügbar.

Weitere Informationen und Beispiele sind in der Frontend API-Dokumentation enthalten.

1.3.5. Seiten

Ähnlich wie in FirstSpirit basieren Seiten innerhalb eines Shops 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 for Commerce Reference Project werden die editierbaren Bereiche einer Shopseite durch die Inhaltsbereiche einer FirstSpirit-Seitenvorlage repräsentiert. Ihnen können Absätze hinzugefügt werden, die jeweils der äquivalenten Komponente einer Shopseite entsprechen (vgl. Abbildung Page Rendering).

Mit FirstSpirit lassen sich somit Komponenten generieren, die innerhalb der editierbaren Bereiche einer Shopseite dargestellt werden.

page rendering
Abbildung 5. Page Rendering

1.3.6. Seitentypen

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

FirstSpirit Driven Pages

FirstSpirit Driven Pages existieren ausschließlich in FirstSpirit und besitzen keine zugehörige Seite im Shopsystem. 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.

Shop Driven Pages

Im Gegensatz zu den FirstSpirit Driven Pages besitzen die Shop Driven Pages sowohl eine Seite in FirstSpirit als auch im Shopsystem. 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.

1.3.7. Vorschau

Die mit dem FirstSpirit Connect for Commerce-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 des angebundenen Shops bestimmt jedoch weiterhin das Rahmenwerk einer Seite, deren editierbare Bereiche die generierten Komponenten einbinden.

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

1.3.8. Identifier

Mit Connect for Commerce erhalten Redakteurinnen und Redakteure vollständigen Zugriff auf den Produktkatalog des angebundenen Shops und können diesen durch redaktionelle Inhalte ergänzen. Die Ermittlung der dafür notwendigen Informationen aus dem Shop-Backend erfolgt mithilfe einer Bridge. Sie übergibt die Daten an den FirstSpirit-Server, der sie über Reports im ContentCreator bereitstellt.

Um stets eine fehlerfreie Zuordnung zwischen den realen Shopdaten und den in FirstSpirit verwendeten Produkt- und Kategorieinformationen zu gewährleisten, ist ein Mapping erforderlich. Dieses muss auf eindeutigen IDs basieren und kann beispielsweise der Abbildung einer SKU auf eine URL entsprechen. Das Mapping ist sowohl für die Bridge als auch für die Datenübertragung im Frontend relevant. Die nachfolgende Grafik stellt das Mapping einer Product ID oder Category ID auf eine Resource ID dar.

Die im Mapping definierten IDs werden ihrerseits in den Formulardaten des jeweiligen FirstSpirit-Elements gespeichert und bei jeder Freigabe per Deployment in den CaaS übertragen. Bei einem solchen FirstSpirit-Element kann es sich sowohl um eine Seite als auch um beispielsweise einen einzelnen Teaser, der ein bestimmtes Produkt referenziert, handeln. Der CaaS persistiert die in FirstSpirit erstellten Inhalte in Form von Inhaltsfragmenten und stellt diese der Storefront des angebundenen Shops bereit.

Die Storefront übernimmt weiterhin die Auslieferung der Inhalte, die sie standardmäßig aus dem Backend des Shops bezieht. Mit Connect for Commerce greift sie zusätzlich auf den CaaS zu und fragt von ihm die redaktionellen Daten ab. Die Abfrage erfolgt auf Basis des von der Bridge vorgegebenen Mappings, das auch im Frontend bekannt sein muss. Auf diesem Weg ist sichergestellt, dass der CaaS die richtigen Daten zurückgibt. Die Storefront verknüpft die Informationen mit denen des Shops und liefert sie in einer kombinierten Ansicht aus.