Angesichts der wachsenden Beliebtheit von Headless-Architekturen wollten wir die verfügbaren Lösungen untersuchen und uns dabei vor allem auf die E-Commerce-Branche konzentrieren. Auf unserer Reise wollten wir eine benutzerdefinierte Storefront mit zwei beliebten Headless-Technologien erstellen: Omni-Channel Connect (OCC) API als E-Commerce-API und Contentstack als unsere Headless CMS API.
Was wollten wir erreichen?
Was den technischen Teil betrifft, so war es unser Ziel, einen PoC zu entwickeln, der eine einfache, aber erweiterbare Template-Engine enthält, die auf Seitenvorlagen mit dynamischen und statischen Content-Slots basiert. Aus der Sicht eines Inhaltsredakteurs wollten wir eine einfache und intuitive Möglichkeit zur Anpassung von Vorlagen und zur Veröffentlichung neuer Inhalte.
Lösung
Wir begannen damit, die Kernfunktionen von Contentstack zu erkunden und versuchten, die Architektur und die verfügbaren Integrationsfunktionen zu verstehen. Zum Glück war die Dokumentation sehr ausführlich und vermittelte uns ein solides Verständnis der Lösung.
Zunächst haben wir einige Zeit damit verbracht, alle beweglichen Komponenten einer Page Builder-Anwendung zu identifizieren und sie mit den sofort einsatzbereiten Komponenten von Contentstack zu verknüpfen. Dies führte zu einer robusten Architektur mit vielen Anpassungs- und Erweiterungsmöglichkeiten über das Contentstack-Adminpanel.
Am Ende haben wir für jedes Layout, das wir normalerweise in einem Schaufenster haben, verschiedene Seitenvorlagen definiert. Jede Vorlage würde Slots bieten, in denen jede Art von Komponenten (OOB, benutzerdefiniert) platziert werden könnte. Jede Seitenstruktur würde aus dem Typ der Seite (Layout) und der Liste der Slots mit den konfigurierten Komponenten bestehen.
Nachdem die Seitenvorlagen fertig waren, begannen wir mit der Modellierung unserer benutzerdefinierten Komponenten. Einige dieser Komponenten sollten über das Admin-Panel anpassbar sein (z.B. Banner, Bildergalerie), andere wären nur Platzhalter (z.B. Schaltfläche „In den Warenkorb“, Bestandsinformationen). Einige der Konfigurationen der Komponenten würden Abhängigkeiten von Drittanbietern erfordern. Dies war der Moment, in dem die OCC API vom Contentstack Admin Panel aus genutzt werden musste. Glücklicherweise bietet Contentstack ein SDK für die Entwicklung benutzerdefinierter Felder, so dass wir unser eigenes Javascript hochladen können, um mit der OCC-API-Schicht zu kommunizieren.
Nachdem die Seitenvorlagen und die benutzerdefinierten Komponenten fertig waren, definierten und konfigurierten wir schnell einige Basisseiten (Landing Page, Details Page) in Contentstack, damit wir mit der Nutzung des Headless CMS beginnen konnten.
Da es keine Einschränkungen hinsichtlich der Programmiersprachen gibt, um sowohl das CMS als auch die OCC-API zu nutzen, haben wir eine Angular-Anwendung entwickelt, die in der Lage ist, CMS-Seiteninhalte auf Angular-Komponenten abzubilden.
Vorteile
Die Implementierung einer Headless-Architektur ermöglichte es uns, die Verantwortlichkeiten zwischen der Präsentationsschicht (Storefront), dem CMS und dem E-Commerce-Backbone zu trennen (zu entkoppeln).
Einer der größten Vorteile eines Headless-Ansatzes ist, dass nur der Endverbraucher (Web-App, mobile App) für die Präsentationslogik verantwortlich ist. Die Benutzerfreundlichkeit dieser Lösung ist ebenfalls ein großer Vorteil, da die Konfiguration und Änderung von Inhalten auch für Nichttechniker sehr einfach ist.
Benachteiligungen
Der Preis für eine flexible Lösung ist eine höhere Komplexität, denn es gibt mehr Systeme, über die man den Überblick behalten muss. Es kann auch teurer werden, da Sie für einen weiteren Dienst bezahlen.
Schlussfolgerung
Eine Headless-CMS-Lösung wie Contentstack kann als einfache, aber erweiterbare Template-Engine verwendet werden, die aus Sicht eines Redakteurs intuitiv und unkompliziert bei der Anpassung von Templates oder der Veröffentlichung neuer Inhalte ist.