Unser Team hatte in Zusammenarbeit mit Shopware die Gelegenheit, sich mit einem neuen Tool von Shopware vertraut zu machen und damit zu arbeiten: Shopware Frontends. Von Shopware sowie von Partnern erhielten wir die Anfrage, ein neues Projekt mit diesem neuen Tool umzusetzen und mehrere Elemente von der bestehenden Website zu integrieren. Nämlich müssen wir für den Kunden ein Proof of Concept (POC) vorbereiten.
*Ein Proof of Concept (POC) ist eine Methode, die einem Projektmanagement-Team oder anderen Fachleuten ermöglicht, die Machbarkeit oder Durchführbarkeit einer Idee, eines Produkts, Konzepts, einer Lösung oder Hypothese zu bestimmen, zu demonstrieren und zu validieren.
In diesem Artikel werden wir diese Erfahrung detailliert und Schritt für Schritt besprechen, die Vorteile dieser Methode aufzeigen und die Besonderheiten von Shopware Frontends erläutern.
Was ist Shopware Frontends?
Shopware Composable Frontends ist ein Set aus mehreren Tool-Paketen zur Erstellung plattformunabhängiger, individueller Storefronts, deren Implementierung auf Vue.js und Nuxt3 basiert. Strukturell sieht es folgendermaßen aus:
Shopware 6 wird als eine der unterstützten Datenquellen betrachtet. Es ist jedoch möglich, jede andere Datenquelle zu integrieren, wie z.B. CMS oder Analysedaten. Shopware Frontends verwendet die Store API, um zur Laufzeit eine Verbindung zu Ihrer Shopware 6-Instanz herzustellen.
Shopware Frontends bietet verschiedene Pakete, die komplexe Aufgaben bewältigen können:
- Routing
- Integration der Einkaufswelten (Shopware CMS)
- Produktsuche und Filter
- Preisformatierung
- Authentifizierung und Statusverwaltung
Es unterstützt auch TypeScript.
Sie können von Grund auf neu beginnen und überhaupt keine Vorlage verwenden, aber es wird empfohlen, die Shopware Frontends Setup-Templates zu verwenden, die auf Nuxt.js und Tailwind CSS basieren.
Erfahren Sie mehr über Shopware Frontends!
Hinterlassen Sie uns Ihre Kontaktdaten und wir werden uns bei Ihnen melden.
POC für den Kunden – Aufgaben und Implementierungsschritte
In dem Projekt, an dem wir gearbeitet haben, plante der Kunde, seine Website auf Shopware zu migrieren. Allerdings sollten nur die administrativen und Backend-Teile mit Shopware realisiert werden, während der Frontend-Teil mit Shopware Frontends umgesetzt werden sollte, das auf Vue.js und Nuxt3 basiert. Einer der wichtigsten technischen Punkte war die reibungslose Integration zwischen WordPress und Shopware Frontends zur Anzeige von Blogbeiträgen.
Die Hauptaufgaben, die wir durchführen mussten, waren:
- Kommunikation zwischen Shopware und Shopware Frontends implementieren
- Shopware mit Kategorien und Produkten wie auf der ursprünglichen Website füllen
- Ein möglichst ähnliches Design der Hauptseite erstellen
- Die Ausgabe von Blogbeiträgen von der WordPress-Website implementieren
- In die bestehende Suche die Möglichkeit zur Suche nach Blogbeiträgen einfügen
Die Aufgaben waren klar definiert, sodass unser Team mit der Implementierungsphase beginnen konnte.
Befüllen der Website
Die ersten Schritte zur Installation und Konfiguration waren einfach und verliefen schnell. Der nächste Schritt war die Befüllungsphase.
Da Shopware Frontends eine ziemlich gute API-Integration mit Shopware bietet, waren das Standardmenü in der Kopfzeile, der Warenkorb, die Suche und der Account-Link bereits vorhanden. Es gab auch sofort einen Standard-Footer. Wir mussten nur die Anzahl der Menüanzeigeebenen ändern. Wir wollten das Logo über die API einbinden, aber derzeit hat Frontends nur API-Anfragen für den Storefront-Teil, sodass das Logo statisch gesetzt werden musste.
Erstellung der Hauptseite und der Listen-Seite
Unser nächster Schritt bestand darin, die Hauptseite und die Listen-Seite zu erstellen. Shopware Frontends bietet wie die Produktdetailseite, die Produktlisten-Seite, den Warenkorb, den Checkout und die Standardseite an. Daher kann man problemlos die Einkaufserlebnisse von Shopware nutzen, um die Hauptseite zu erstellen.
Es gibt jedoch eine wichtige Nuance: Nur standardmäßige Shopware CMS-Elemente werden auf der Shopware Frontends-Seite angezeigt. Wenn Sie also benutzerdefinierte CMS-Blöcke oder -Elemente haben, werden diese auf Frontends nicht angezeigt.
Wir standen vor dieser Herausforderung, da es notwendig war, einen Slider mit Hintergrundbildern und Inhalten auf der Seite anzuzeigen. Trotz der Dokumentation und den Möglichkeiten von Shopware Frontends konnten wir diese Aufgabe problemlos bewältigen. Wir haben ein benutzerdefiniertes CMS-Element auf der Frontendseite implementiert. Über die API erhalten wir alle Daten unseres CMS-Elements in einem JSON-Objekt, das wir dann in der Komponente verteilen und das Styling sowie die Swiper-Bibliothek einbinden. Somit können wir problemlos alle nicht-standardmäßigen CMS-Elemente aus dem Shopware-Erlebnis in unsere Frontends integrieren.
Integration von WordPress & Shopware Frontends
Der nächste Schritt war die Integration von WordPress in Shopware Frontends. Der Kunde wollte das WordPress CMS verwenden, um Blogbeiträge auf der Website anzuzeigen.
Um Datensätze von WordPress zu erhalten, haben wir das GraphQL-Plugin verwendet, das uns einen Endpoint bereitstellte, an den wir Anfragen senden konnten, um Daten aus der Datenbank abzurufen. Die Aufgabe bestand darin, eine Komponente auf der Frontend-Seite zu erstellen, die eine spezifische Anfrage an den Endpoint generiert. Die Antwort war ein Array von Beiträgen, das ich dann als gewöhnliche Karten mit einem Bild und einem Titel anzeigen konnte.
Dies ist jedoch keine umfassende Ansicht der Nachrichten. Es ist nur logisch, dass man mehr Inhalte sehen möchte. Die Lösung dafür ist eine spezielle Nachrichten-Seite mit vollständigem Inhalt. Glücklicherweise hat Shopware Frontends bereits ein robustes Routing-System implementiert, das es uns ermöglicht, die erforderliche Logik für die Nachrichten effizient umzusetzen. Jetzt wird der Benutzer, wenn er auf eine Nachrichtenkarte klickt, nahtlos zu einer separaten Seite mit dem vollständigen Inhalt der Nachricht weitergeleitet. Dies wird erreicht, indem eine Anfrage an den GraphQL-Endpoint gesendet wird, wobei ein Slug aus der URL-Adresse übermittelt wird, damit GraphQL den Typ des erforderlichen Nachrichteninhalts genau identifizieren kann.
Suchimplementierung
Die letzte Aufgabe, die in diesem Fall implementiert werden musste, war die Suche. Shopware Frontends hat eine Produktsuchfunktion implementiert, aber der Kunde wollte, dass die Suche auf zwei Entitäten funktioniert: Produkte und Nachrichten.
Dafür mussten wir unsere eigene Funktionalität implementieren, die ausgelöst wird, wenn Text in das Suchfeld eingegeben wird. Dann wird eine Anfrage an den Endpoint mit dem eingegebenen Text gesendet. Im Falle eines passenden Ergebnisses zeigen wir Nachrichten unter den Produkten an, die ebenfalls dem eingegebenen Text entsprechen können. Dies demonstriert die Anpassungsfähigkeit von Shopware Frontends, da es uns ermöglicht, die Suchfunktion auf mehrere Entitäten auszudehnen und die spezifischen Anforderungen des Kunden zu erfüllen.
Zusammenfassung
Shopware Composable Frontends ist ein sehr interessantes Tool mit großem Potenzial und endlosen Möglichkeiten, besonders im Frontend-Bereich, da es in Vue.js geschrieben ist. An einigen Stellen der Arbeit war eine bessere Information über Frontends in der Dokumentation erforderlich. Aber wir sind sicher, dass Shopware dieses Manko beheben wird und das Tool in seinen nächsten Versionen noch besser wird.
