Der Onlineshop kohler.ch basiert komplett auf einer Headless-Architektur. Die Storefront (Darstellungsschicht) ist also vom Backend (Datenschicht) getrennt, damit diese Anwendungen unabhängig voneinander entwickelt und verwaltet werden können.

The core

Das Kernstück des Onlineshops der HANS KOHLER AG basiert auf Vendure. Diese Open-Source-Headless-E-Commerce-Plattform baut auf dem NestJS-Framework auf. Vendure bietet alles, was für die Speicherung und Verwaltung von Produkten und Kund*innen, die Definition der gesamten Kaufabwicklung, die Verwaltung und Abwicklung von Bestellungen und vielen weiteren Funktionen erforderlich ist.

Vendure ist so aufgebaut, dass es nur die grundlegenden Bausteine eines Onlineshops definiert. So zum Beispiel die Bereitstellung von Vorlagen für Produkte und Kollektionen, die Verwaltung von Warenkörben und Preisen und die Festlegung des Standard-Bestellvorgangs. Alles lässt sich leicht erweitern oder an die Bedürfnisse des aktuellen Anwendungsfalls anpassen. Das Hauptziel dieses Ansatzes besteht darin, dass sich die Entwickler*innen bei der Umsetzung der spezifischen Geschäftsanforderungen eines Shops nicht mit dem Framework herumschlagen müssen.

Vendure bietet bereits die meisten Funktionen, die für den Aufbau eines einfachen Onlineshops nötig sind. Aber wie du vielleicht weisst, gibt es in den Geschäftsprozessen jedes Unternehmens mindestens einen Sonderfall, der sich komplett von allen anderen Shops unterscheidet. Das kann ein zusätzlicher Schritt bei der Kundenüberprüfung, eine Preisberechnung oder eine ganz eigene Werbestrategie sein. Das Gute an Vendure ist, dass man auf dem äusserst soliden und ausgereiften NestJS-Framework jederzeit eine komplett benutzerdefinierte Funktion implementieren und in den Shop integrieren kann, wenn die gewünschte Funktion nicht im Kernstück oder in einem der zahlreichen Plug-ins enthalten ist.

Was haben wir entwickelt?

Nachfolgend sind einige der zahlreichen kundenspezifischen Anforderungen, die wir für den Onlineshop der HANS KOHLER AG umgesetzt haben, aufgeführt. Sie geben dir eine Vorstellung davon, was mit Vendure alles möglich ist:

  • Möglichkeit, einen Kostenvoranschlag für einen bestimmten Warenkorb mit einem vereinfachten Zahlungsvorgang anzufordern.
  • Massgeschneiderte Preisstrategie mit Mengenrabatten, bei denen die Menge je nach Produkt auf verschiedenen Einheiten basiert. Ausserdem besteht die Möglichkeit, spezifische Preise für bestimmte Kund•innen oder Kundengruppen festzulegen.
  • Komplexe Promotionsstrategie mit kundenspezifischen Mengenrabatten auf Produktgruppen desselben Typs sowie Aktionen, die auf anderen Aktionen basieren.
  • Schneidbare Produkte (z. B. Rohre) können über einen benutzerdefinierten Konfigurator im Frontend und ein eigenes Preissystem für Zuschnitte in den Warenkorb gelegt werden.
  • Automatische Synchronisation von Produkten, Preisen, Kund•innen und Bestellungen mit dem auf Microsoft Dynamics 365 basierenden ERP-System, das von der HANS KOHLER AG verwendet wird.
  • Payrexx-Integration für den elektronischen Zahlungsverkehr.
  • Auftragsspezifische Versandkosten je nach gewählter Lieferadresse und Versandart.
  • Individueller Bestellprozess, bei dem die Kund•innen während des Bestellvorgangs spezielle Versandanforderungen (z. B. telefonische Benachrichtigung bei Eintreffen der Sendung) hinzufügen können.

Das CMS

Wie bereits erläutert, wird Vendure nur mit den bei E-Commerce-Projekten üblichen Grundfunktionen ausgeliefert. Deshalb sind auch keine CMS-Funktionen enthalten. Um die gewünschten CMS-Anforderungen zu erfüllen, verwenden wir DatoCMS. So können wir die für den Onlineshop erforderlichen Inhalte – wie Seiten oder Blogbeiträge – erstellen und bearbeiten.

DatoCMS ist ein Headless CMS, das als SaaS-Lösung verfügbar ist. Über eine GraphQL-API kann auf alle Inhalte im Backend zugegriffen werden. Da wir Daten aus dem CMS in Vendure einbinden wollten und umgekehrt (z. B. Auswahl einer in DatoCMS definierten Ansprechperson für ein in Vendure definiertes Produkt), haben wir alle erforderlichen API-Endpunkte von DatoCMS über benutzerdefinierte GraphQL-Endpunkte auf Vendure übertragen. Dank diesem Mechanismus konnten wir die von DatoCMS benötigten Inhalte direkt in die Antwort von Vendure einbinden. Aus diesem Grund muss das Frontend nur eine einzige Anfrage stellen, um alle für das Rendering der aktuellen Seite erforderlichen Daten zu erhalten. Das führt wiederum zu schnelleren Antwortzeiten für die Kund•innen.

Da es sich um einen mehrsprachigen Onlineshop handelt, war es wichtig, dass die Inhalte leicht übersetzt werden können. Zu diesem Zweck verwenden wir ein Plug-in, das auf der Grundlage von Deepl automatisch eine übersetzte Fassung einer bestimmten Seite oder eines Blogbeitrags erstellt. Diese liefert den jeweiligen Redakteur*innen eine Grundlage für die Übersetzung der Inhalte.

Das Frontend

Das Frontend für serverseitiges Rendering haben wir mit Svelte and SvelteKit erstellt. Der Onlineshop der HANS KOHLER AG ist bei Weitem die umfassendste Anwendung, die wir je mit diesem Stack entwickelt haben. Wir sind wirklich zufrieden mit unserer Wahl. Während des gesamten Projekts standen wir kein einziges Mal vor dem Problem, spezifische Anforderungen aufgrund von Einschränkungen beim Framework nicht problemlos umsetzen zu können. Mit diesem Problem waren wir sonst früher oder später immer irgendwann konfrontiert, wenn wir andere Frameworks wie Vue oder React verwendeten.

Für das Design benutzen wir Tailwind CSS und für die GraphQL-API-Anfragen Houdini. Letzteres wirkt – wie der Name schon sagt – bei der Arbeit mit GraphQL-APIs wahre Wunder. Für alle definierten Abfragen und Mutationen generiert es Svelte-Speicher, die ihren Status immer dann aktualisieren, wenn sich etwas an den von ihnen gespeicherten Daten ändert. Selbst wenn die Änderung in einer anderen Mutation erfolgt. Alles, was man mit der GraphQL-API macht, wird anhand des Endpunkt-Schemas typgeprüft. Deshalb kann ein bestimmtes Datenfeld, das in der Abfrage erst noch ausgewählt werden muss, weder in der Vorlage noch mit einem falschen Typ verwendet werden. Mit Houdini und SvelteKit ist unsere Anwendung absolut typsicher. Ausserdem ist es höchst unwahrscheinlich – wenn nicht gar unmöglich – dass während der Laufzeit etwas nicht funktioniert.

Insgesamt sind wir mit der Wahl unserer Architektur sehr zufrieden. Vendure lieferte uns eine solide und zuverlässige Grundlage, um alle Anforderungen in Bezug auf diesen Onlineshop umzusetzen. Mit DatoCMS konnten wir schnell und einfach ein System erstellen, mit dem die Redakteur*innen alle Informationen zu den im Onlineshop der HANS KOHLER AG erhältlichen Produkte veröffentlichen können. Mit Svelte und SvelteKit konnten wir eine umfassende Frontend-Anwendung entwickeln, deren Wartung einfach bleibt und mit der man leicht neue Funktionen entwickeln kann.