Der Internetauftritt des Marktführers im Bio-Fachhandel bestand bislang aus zwei voneinander unabhängigen Systemen. Der Corporate Website, die Produktbeschreibungen, weiterführende Informationen zu diesen und allgemeine Einblicke in das Unternehmen umfasste, sowie dem Onlineshop, über den die Kunden bisher ihre Waren bestellen konnten. Die Corporate Website wurde mit dem Drupal CMS umgesetzt. Der Onlineshop hingegen über ein separates Magento Shopsystem. Ziel des Relaunchs war es nun, die bereits bestehenden Systeme zu einem einzigen zu verheiraten, um Shop-Funktionalitäten und informative Inhalte auf einer Seite darzustellen. Dadurch wird dem Kunden ein Maximum an Usability geboten. Die neue Webapp sollte außerdem mit modernen Technologien wartbar gemacht werden und architektonisch flexibel sein.

Um eine aufwendige und komplexe Migration der redaktionellen Inhalte in eine neue E-Commerce-Plattform zu vermeiden, empfahl Monday Consulting eine Headless-Architektur. Zusätzlich konnte man sich somit technologisch von PHP und den beiden OpenSource Plattformen Drupal und Magento lösen. 

Bei einer Headless-CMS-Architektur sind Inhalte und Darstellung technisch voneinander getrennt. Drupal übernimmt weiterhin die Verwaltung der Inhalte, die anschließend von einer modernen Next.js Anwendung ausgespielt werden. Durch aktuelle Technologien, wie React und einer statischen HTML Pre-Generierung, fällt nicht nur die Entwicklung leichter, auch das Einhalten von Best Practices wird vereinfacht. Die Daten werden seitens Drupal über eine API-Schnittstelle zur Verfügung gestellt und anschließend im gewünschten Design in der neuen Webapp dargestellt. Auf diese Weise ist die Webapp an sich schlank konstruiert und somit maximal performant.

Während die redaktionellen Inhalte aus Drupal statisch ausgegeben werden, wird die Webapp mit dynamischen Inhalten aus Magento angereichert. So stehen neben dem Namen und der Zutatenliste eines Produktes die Shop-Daten in Echtzeit zur Verfügung. Dieser hybride Ansatz erlaubt es, dass die Webseite zum Beispiel bei Ausfall des Shopsystems weiterhin funktionsfähig ist und Inhalte ausspielt. Lediglich der Warenkorb sowie die Kaufabwicklung sind währenddessen deaktiviert. Der statische Teil der Seite ist somit beinahe komplett ausfallsicher.

Für den User ist besonders der statische Ansatz auffällig, da Informationen nicht erst vom Server erstellt werden müssen, sondern sofort vorgeneriert verfügbar sind. Die React-Anwendung auf Basis von Next.js beschleunigt die Seite im Vergleich zur vorherigen Version zusätzlich, was insbesondere beim Navigieren sowie bei Interaktionen, beispielsweise beim Filtern von Produkten, direkt ins Auge fällt. Gleichzeitig nimmt die Entwicklungsgeschwindigkeit zu, da mit modernen Frameworks und deklarativer Programmierung Ideen sehr viel schneller realisiert werden können. Zusätzlich erhalten die Entwickler ein erhöhtes Maß an Sicherheit, da die neue Architektur in TypeScript umgesetzt wurde. Somit kann eine Vielzahl an typischen Programmierfehlern frühzeitig vermieden werden.

"Die Idee von Monday Consulting, über den Headless-Ansatz eine neue Webapp zu entwickeln, die beide Systeme verheiratet, bietet uns viele Vorteile. Zum einen erfahren unsere Kunden eine bessere Usability und zum anderen müssen wir uns in der Datenpflege nicht umgewöhnen. Auf zukünftige Umstellungen können wir flexibel reagieren und weitere Datenquellen nahtlos integrieren."

Manuela Wiegmann, Corporate Communications

Weitere Informationen zum Relaunch und der technischen Umsetzung des Headless-Commerce-Ansatzes finden Sie auf der Referenzseite des Unternehmens beschrieben. Die neue 2-in-1-Website ist unter www.lebensbaum.com zu finden.