Für moderne Onlineshops setzen wir voll auf Shopware 6. Als offizieller Shopware-Partner bereichern wir seit 2020 - kurz nach dem Release von Shopware 6 Ende 2019 – die Community mit unseren eigenen Plugins.
Der Trend im E-Commerce geht Richtung Headless. Bei diesem Ansatz ist der Kern des Shops, sprich die Daten wie Bestellungen, Kunden- und Produktinformationen, vom Frontend getrennt. Das Frontend ist der Teil, den Kunden sehen, wenn sie den Onlineshop besuchen – auch Storefront genannt. Headless bedeutet also: Shopware läuft vom Frontend entkoppelt im Hintergrund und wird ausschliesslich über Programmierschnittstellen (APIs) angesteuert.
In diesem Artikel stellen wir unsere Headless-E-Commerce-Architektur vor: ein Nuxt-Frontend, das über APIs Shopware 6 als Shop-Engine und Statamic als vollwertiges CMS anbindet – alles vereint in einem modernen Onlineshop.
Shopware 6 - API-first E-Commerce
Shopware wurde von Grund auf mit dem API-first-Ansatz entwickelt. Das bedeutet: Die gesamte Shop-Logik, vom Hinzufügen von Produkten in den Warenkorb bis zum Abschluss einer Bestellung, lässt sich über HTTP-Schnittstellen steuern. Dafür braucht es nicht einmal eine klassische Webseite. Eine Storefront könnte auch in ein beliebiges IoT-Gerät integriert sein. Jemand könnte zum Beispiel direkt auf dem Display seines Kühlschranks eine Bestellung aufgeben, wenn die Cola alle ist. Auch Roboter oder KI-gesteuerte Agents könnten über die Schnittstellen mit dem Shop interagieren.
API-first macht Shopware zukunftssicher: Die Shop-Logik ist komplett entkoppelt von einer Storefront im klassischen Webbrowser und basiert ausschliesslich auf dem bewährten HTTP-Protokoll. Aber seien wir ehrlich: Wenn wir an einen Onlineshop denken, haben die meisten noch eine Webseite im Kopf, die wir am Computer oder Handy besuchen, um unsere Einkäufe zu tätigen.
Die klassische Shopware Twig Storefront
Shopware liefert bei der Installation eine voll funktionsfähige Storefront für den Webbrowser. Diese basiert auf der Template-Engine Twig und präsentiert Besuchern einen funktionierenden Online-Shop mit einem Standard-Theme “out of the box”. Natürlich möchte man seinem Shop jedoch einen persönlichen Anstrich verpassen. Stilistische Anpassungen sind möglich, indem man das Theme überschreibt und dem Shop so sein eigenes Leben einhaucht. Ein Beispielprojekt, das wir mit diesem Setup realisiert haben, ist der Blumenversand sayflowers.ch.
Unsere Erfahrung zeigt: Je individueller die Gestaltung und Programmierung wird, desto weniger profitiert man von der existierenden Storefront. Eine Analogie: Ein Auto kann man neu lackieren, andere Felgen montieren oder kleine Details anpassen - aber man würde nicht versuchen, einen VW Golf zu einem Ferrari umzubauen. Da baut man den Ferrari besser von Grund auf neu.
Für den Blumenversand sayflowers.ch haben wir die klassische Twig Storefront durch ein custom Theme und mit viel Liebe zum Detail umgestaltet.
Shopware als CMS
Shopware besteht im Kern aus dem API-first-Shopsystem und der Administration. Die Administration ermöglicht es, Bestellungen und Kundendaten einzusehen sowie Businesslogik zu definieren, wie etwa das Versenden von E-Mails bei Änderungen des Lieferstatus. Mit den „Erlebniswelten“ bietet die Administration auch ein CMS, mit dem Kunden eigene Inhalte einfügen und gestalten können. Über Code lassen sich mit Programmierkenntnissen auch neue Blöcke definieren, die dann im CMS zur Verfügung stehen. Unsere Erfahrung zeigt jedoch: Das CMS – und insbesondere das Entwickeln individueller Blöcke nach Kundenwunsch – verursacht in der Praxis sehr viel Arbeit. Aus unserer Sicht zu viel. Wir sehen das Shopware-CMS als Add-on, nicht aber als Kernkompetenz von Shopware. Wer auf die Twig-Storefront setzt, ist allerdings auf die Verwendung dieses CMS eingeschränkt.
Statamic CMS
Hier zeigt sich der Vorteil der headless Architektur. Als CMS nutzen wir nicht Shopware, sondern Statamic: ein vollwertiges Content-Management-System. Es ist nicht nur bedienungsfreundlicher und flexibler, sondern spart uns vor allem Zeit bei der Entwicklung und unseren Kunden damit Geld. Wir bauen auf eine Vielzahl von existierenden Basiskomponenten und erstellen neue Komponenten im Handumdrehen. Die Inhalte des CMS werden ebenfalls via API an unser Frontend geliefert.
Nuxt Frontend
Zurück zum Ferrari: Wir entwerfen für unsere Kunden massgeschneiderte Onlineshops ohne Kompromisse. Da wir sowohl Shopware als auch Statamic ausschliesslich via APIs ansprechen, erhalten wir von diesen Systemen lediglich die „Rohdaten“. Das bedeutet für uns gestalterische und technologische Freiheit: Unser Design-Team ist nicht an die technischen Vorgaben eines vorgefertigten Themes gebunden, sondern kann eine einzigartige Brand-Experience erschaffen.
Für die Umsetzung dieses Frontends setzen wir auf das Nuxt Framework. Nuxt basiert auf Vue.js und ist spezialisiert auf die Entwicklung von hochperformanten Web-Applikationen. Der grosse Vorteil: Nuxt beherrscht Server-Side Rendering (SSR). Das sorgt dafür, dass die Seite für Suchmaschinen perfekt lesbar ist und mit flüssigen Animationen geschmeidig und ausserdem extrem schnell lädt. Das Ergebnis ist eine Storefront, die dem Kunden ein einzigartiges und überzeugendes Einkaufserlebnis bietet.
Damit wir bei aller Individualität effizient bleiben, fliessen unsere Erfahrungen in unser eigenes “Skeleton” ein. Dieses Skelett dient uns als technisches Fundament, das bereits die wichtigsten Funktionen für die Anbindung von Shopware und Statamic enthält. So müssen wir nicht für jedes Projekt das Rad neu erfinden, sondern können uns voll und ganz auf das konzentrieren, was den Shop unserer Kunden einzigartig macht.
Fazit
Die Kombination aus Shopware 6, Statamic und Nuxt bietet eine technologisch fundierte Basis für anspruchsvolle E-Commerce-Projekte. Durch den Headless-Ansatz nutzen wir die spezifischen Stärken jedes Systems: Shopware sorgt für stabile und skalierbare Handelsprozesse, Statamic ermöglicht eine intuitive Inhaltsverwaltung und Nuxt führt beides in einer performanten, individuell gestalteten Storefront zusammen. Dieses Setup ist die ideale Lösung für Unternehmen, die eine massgeschneiderte und moderne Brand-Experience schaffen möchten.
