1. Die Store API als Grundlage
Die Store API ist laut Shopware die kundenseitige Schnittstelle von Shopware 6. Sie ist für alles gedacht, was im Frontend passiert: Produkte ansehen, Warenkorb, Checkout und Kundenkonto. Sie gibt nur Daten heraus, die für das Frontend relevant und sicher sind, und funktioniert für anonyme wie für angemeldete Kunden.
Headless-Frontends wie Single-Page-Apps oder native Apps sprechen die Store API per JSON über HTTP an. Laut Doku nutzen die normale Storefront und die API dieselben Dienste im Kern. Die Geschäftslogik bleibt also in Shopware, egal welches Frontend du baust.
2. Shopware Composable Frontends
Für eigene Frontends bietet Shopware Composable Frontends an, ein Werkzeugkasten für plattformunabhängige Storefronts. Der Demo-Store basiert auf Vue.js und Nuxt 3. Composable Frontends verbindet sich zur Laufzeit über die Store API mit deiner Shopware-6-Instanz und unterstützt TypeScript.
Laut Shopware ist die Umsetzung der Shop-Logik ein großer Teil und ein Risiko jedes eigenen Frontends. Deshalb bringt Composable Frontends Pakete für diese Aufgaben mit, zum Beispiel die Einbindung der Erlebniswelten (Shopware CMS) sowie Anmeldung und Zustandsverwaltung. Neben Shopware kannst du weitere Datenquellen wie ein CMS oder Analyse-Tools anbinden.
3. Wann sich headless lohnt
Ein eigenes Frontend lohnt sich, wenn die Standard-Storefront mit Themes an Grenzen stößt: mehrere Frontends wie Shop, App und Kiosk auf einer Datenbasis, ein Design ohne Kompromisse oder Inhalte aus einem separaten CMS. Der Preis dafür ist ein eigenes Entwicklungsprojekt mit laufender Pflege.
Für viele kleine und mittlere Shops reicht die Standard-Storefront mit einem angepassten Theme. Prüfe vorher, welche Funktionen du brauchst und ob sie mit einem Theme erreichbar sind.
4. Plugins und Suche im Headless-Frontend
Viele Erweiterungen bringen ihre Oberfläche als Teil der Storefront mit. In einem eigenen Frontend erscheint diese Oberfläche nicht automatisch. Prüfe daher für jede Erweiterung, ob sie die Store API unterstützt oder ob du ihre Oberfläche selbst nachbauen musst. Das gilt besonders für Zahlungsarten, Cookie-Hinweise und die Suche.
Das Plugin Grumeria Suche bindet das Grumeria-Widget in die Shopware-Storefront ein. Für ein eigenes Frontend gibt es das Widget-Skript, das sich über das Attribut data-selector an ein beliebiges Suchfeld hängt. Teste das in deinem Frontend vor dem Livegang, gerade wenn das Suchfeld per JavaScript neu gerendert wird. Den Produktfeed liefert weiter der Shopware-Produktexport.
Häufige Fragen
Ist Shopware 6 headless?
Shopware 6 lässt sich headless betreiben: Die Store API stellt Produkte, Warenkorb, Checkout und Kundenkonto für eigene Frontends bereit. Mitgeliefert wird aber auch die klassische Storefront.
Was sind Shopware Composable Frontends?
Ein Werkzeugkasten von Shopware für eigene Storefronts. Der Demo-Store basiert auf Vue.js und Nuxt 3, die Verbindung zu Shopware läuft über die Store API.
Funktionieren Plugins im Headless-Frontend?
Nicht automatisch. Oberflächen, die eine Erweiterung in die Storefront einbaut, musst du im eigenen Frontend nachbauen oder über die Store API anbinden.