netz98 Blog
Der E-Commerce &
Magento Blog
Headless E-Commerce (Bild: ALotOfPeople / iStock)

Was ist Headless E-Commerce?

Headless E-Commerce ist eine kleine Revolution für den Omnichannel. Was steckt hinter der Technologie? Wie funktioniert sie? Und was sind die Vorteile? Wir erklären es.

 

Woher kommt der Headless-Trend?

Die ersten Headless-Ansätze stammen aus dem Umfeld der CMS-Anwendungen. Um den Content möglichst optimal für die jeweiligen Plattformen auszuspielen zu können, wurden zentralisierte Content-Systeme entwickelt, die lediglich für die strukturierte Ablage und Verwaltung der Inhalte zuständig sind.

Das Ausspielen der Inhalte erfolgte über entkoppelte Anwendungen und Websites, die für die jeweiligen Zielgruppen optimiert werden konnten. Außerdem lassen sich durch ein Headless CMS wesentlich kürzere Iterationen im Frontend erzielen, um die Customer Experience und UX möglichst kundenfreundlich zu gestalten. Die meist etwas schwerfälligeren Backend-Systeme müssen nicht angepasst werden, sondern nur der Ausgabe-Layer. Dadurch lassen sich schnell neue Trends und Technologien anwenden und vereinfachte A/B-Tests realisieren.

Inspiriert durch die neuen CMS-Entwicklungen setzen auch Shopsystem-Anbieter zunehmend auf Headless-Möglichkeiten. Ein großer Vorreiter dieser Technologie stellt hierbei das Magento PWA Studio dar. Es vereint den entkoppelten Ansatz von Inhalt und Ausgabe und ermöglicht außerdem das Zwischenschalten weiterer Anwendungen über eine zentralisierte Middleware.

 

Die Vorteile von Headless E-Commerce und PWA

Neben der klassischen Trennung von Inhalten und deren Präsentation gehen Progressive Web Apps (PWA) und ihre Möglichkeiten für einen Headless E-Commerce noch weiter. Mit dem Local-Storage der Browser und dem HTTP/2-Protokoll erhalten Entwickler mächtige Werkzeuge an die Hand, um das Nutzererlebnis sehr stark zu beeinflussen.

Durch den Local-Storage wird die Speicherung von Inhalten und Bildern auf dem lokalen Gerät möglich. Es erlaubt das Anzeigen von Onlineshops, auch wenn kein Netz oder WLAN zur Verfügung steht. Diese Funktionalität war bislang nativen Apps vorbehalten.

Mittels der neuen HTTP/2 Funktionen gibt es zudem die Möglichkeit, aktiv Push-Benachrichtigen zu verschicken. Außerdem ermöglicht das neue Protokoll das parallele und beschleunigte Laden von Webseiten, was besonders bei mobilen Geräten einen immensen Vorteil bietet.

 

Technische Beispiele für Headless E-Commerce

Wie bereits in unserem Beitrag „Magento Headless: Was bedeutet das?“ beschrieben, liegt die Stärke des Headless-Ansatzes darin, verschiedene Systeme über ein Backend-System anzuschließen. Diese Systeme sind in der Regel verschiedene Websites, Onlineshops und mobile Apps. Auch das Anbinden von Preissuchmaschinen und Marktplätzen ist ein gängiger Anwendungsfall, wodurch ein Headless-Ansatz oft ein wichtiger Bestandteil einer Omnichannel-Strategie wird.

Beim Headless E-Commerce erfolgt die Kommunikation zwischen dem Backend-Server und beispielsweise der Website im Frontend über zahlreiche Schnittstellen. Hierdurch entstehen JavaScript-Anwendungen, die im Browser laufen und komplett autark – sprich ohne Internet-Verbindung – agieren können. Dadurch ist es dem Onlineshop-Nutzer möglich, seine Shopping-Tour auch offline fortzusetzen. Sobald er wieder mit dem Internet verbunden ist, werden seine Artikel im Warenkorb an das Backend übertragen.

Durch das Vorhalten der Daten im Browser wird aber nicht nur eine Offline-Funktionalität bereitgestellt, sondern auch die Ladezeiten ganz erheblich reduziert. Dieser zusätzliche Vorteil des Headless E-Commerce hat einen positiven Einfluss auf die Conversion-Rate.

 

Headless E-Commerce Beispiel: Headless Magento (Bild: netz98)Beispiel für Headless E-Commerce: Wird Magento als Headless-System verwendet, lässt es sich ganz flexibel als „Gehirn“ zwischen verschiedenen Instanzen nutzen.

 

Die Schnittstellen des Headless-Systems

So schön die neue Headless-Welt auch sein mag, kommen diese Vorteile natürlich nicht von ungefähr. Neben den neuen Technologien zur Ausgabe der Inhalte ändert sich auch „unter der Haube“ einiges. Vor allem die Schnittstellen zwischen Frontend-Anwendung und dem dahinter liegenden Server, der die Website mit Inhalten versorgt, werden zentraler und kritischer Bestandteil in dem Headless-Konstrukt.

Die klare Definition von Schnittstellen zwischen den Systemen ermöglicht das problemlose Austauschen von Inhalten, Produktdaten, Bildern und auch das Auslösen von Bestellungen. Denn auch der komplette Checkout-Prozess inklusive der verschiedenen Payment-Strategien muss beim Headless E-Commerce über diese Schnittstellen abgebildet werden.

Oft werden neben den Content- und Onlineshop-Systemen zusätzliche Anwendungen wie SAP, ein CRM oder verschiedene Logistik-Systeme angeschlossen. Diese Systeme werden in der Regel über eine zwischengeschaltete Middleware an die Website „angedockt“. Hierdurch lassen sich im Hintergrund einzelne Systeme schneller aktualisieren oder austauschen.

 

Headless Commerce: Neue Spezialisten sind gefragt

Durch die neuen Herausforderungen der entstehenden JavaScript-Frontends und -Schnittstellen werden ganz neue Anforderungen an E-Commerce-Agenturen und deren Designer und Entwickler gestellt. Es zeichnet sich heute schon ab, dass zukünftig immer mehr Frontend- und JavaScript-Spezialisten benötigt werden.

Dies hat Magento erkannt und deshalb eigens eine Frontend- und JavaScript-Zertifizierung zu den üblichen Backend- und Solution-Specialist-Zertifizierungen hinzugefügt. Diese Spezialisten kümmern sich um die Umsetzung des Onlineshop-Frontends und die Anbindung an die Schnittstellen aus dem Backend.

Da Entwickler und Designer beim Headless E-Commerce nicht mehr zwangsläufig an das mitgelieferte Frontend gebunden sind, können sie dieses verhältnismäßig leicht durch ein komplett anderes austauschen. Diese Flexibilität ermöglicht eine extrem schnelle Adaption neuer Trends und eine flotte Verbesserung der UX.

 

Bilder: ALotOfPeople / iStock, netz98

 

Über den Autor / die Autorin

Kommentar hinterlassen

*Pflichtfeld

netz98 flyin

Verpassen Sie nicht mehr das Neueste rund um E-Commerce- und Magento-Themen!

Mit der Anmeldung zu unserem Newsletter erhalten Sie regelmäßig wissenswerte und spannende Informationen, die IHR Online-Business nach vorne bringen.

Vielen Dank für Ihre Anmeldung! Wir haben Ihnen soeben ein E-Mail gesendet. Bitte bestätigen Sie in der E-Mail Ihre Anmeldung.

X