Shopware Composable Frontends ist ein Framework für die Erstellung benutzerdefinierter Storefronts auf der Grundlage von Cloud-Technologie. Die themenbasierte Anpassung wird mit zunehmender Anzahl von Abhängigkeiten schwierig zu pflegen. Der Headless-Ansatz in Shopware Frontends bietet die Möglichkeit, das Frontend vom Backend zu trennen, was die Agilität, Skalierbarkeit und Flexibilität erhöht. Diese Art von offener Architektur geht jedoch auf Kosten der Konfigurierbarkeit und der Vollständigkeit der Funktionen im Vergleich zur Flexibilität.
Warum Shopware Composable Frontend verwenden?
Mit der Shopware Composable Storefront können Unternehmen die Funktionen, die sie für ihre Storefront benötigen, kombinieren und anpassen. Entkoppelte Architektur bedeutet, dass eine Komponente in einem Shop unbewusst wachsen kann, was zu unkontrollierter Skalierbarkeit führt. Diese Architektur ist flexibler und ermöglicht die schnelle Erstellung neuer Dienste. Sie macht die Dinge auch weniger kompliziert und daher einfacher. Sie ist auch offener, was die Kreativität und den Wettbewerb innerhalb eines Unternehmens fördert.
Umgebungsanforderungen für Shopware Composable Storefront
- Shopware API
Es gibt keine Unterscheidung zwischen Shopware-Frontend, wenn es um die Bereitstellung von Shopware-API geht. Cloud- und selbstverwaltete Shopware 6-Instanzen werden beide vom Shopware-Frontend unterstützt. Sie können den Endpunkt und den API-Schlüssel im Admin-Panel des Shops finden. Fügen Sie im Endpunkt Ihres Shops /store-api am Ende hinzu.
- Node.js
Für die Entwicklung von Shopware Composable Storefront, erfordert es Node.js Runtime Environment. Wir empfehlen die Verwendung der Version ist mindestens 22.0 oder höher als für die bessere Erfahrung. Sie können einfach die Node.js von der offiziellen Website. - Package Manger
Die Composable Storefront unterstützt pnpm, npm und yarn package manager. Ich empfehle die Verwendung von pnpm, weil es den Speicherplatz spart und auch die schnelle Installationsgeschwindigkeit bietet.
Schritt zur Einrichtung eines zusammensetzbaren Schaufensters.
Folgen Sie diesen Schritten, um Ihr kompatibles Schaufenster zu konfigurieren.
Wir verwenden die von Shopware bereitgestellte Demo Storefront. Dabei handelt es sich um eine Referenzimplementierung einer Online-Shop-Benutzeroberfläche, die mit Standardfunktionen wie Warenkorb, Navigation, Kasse und CMS-Seiten ausgestattet ist. Alternativ können Sie sich auch für die leere Vorlage entscheiden.
- Ziehen Sie die Vorlagendatei aus dem Github-Repository.
npx tiged shopware/frontends/templates/vue-demo-store demo-store
Wenn Sie diesen Befehl ausführen, wird ein Ordner mit dem Namen demo-store erstellt. Navigieren Sie anschließend zu diesem Ordner.
- Nachdem Sie die Vorlage von GitHub gezogen haben, führen Sie den Befehl aus, um alle erforderlichen Pakete zu installieren.
pnpm i
- Sobald der Installationsbefehl abgeschlossen ist, führen Sie diesen Befehl aus, um die Anwendung zu starten. Standardmäßig wird sie gestartet bei localhost:3000.
pnpm run dev
In dieser Vorlage sind der Endpunkt und der API-Zugangsschlüssel bereits vorgegeben. Wenn Sie den API-Zugangsschlüssel oder den Endpunkt ändern möchten, öffnen Sie die Datei nuxt.config.ts. Aktualisieren Sie in der Datei die Werte für accessToken und Endpunkt mit den Werten, die Sie über das Shopware-Administrationspanel abgerufen haben. Sobald Sie die Änderungen gespeichert haben, wird die Vorlage automatisch neu gestartet und die Aktualisierungen basierend auf Ihren Shopware-Verwaltungseinstellungen berücksichtigt.
Bitte kontaktieren Sie uns unter manish@bay20.com oder rufen Sie uns an unter +91-8800519180 / +91-9582784309 für jegliche Unterstützung im Zusammenhang mit Shopware. Sie können auch die Shopware-Entwicklungsseite um unsere Dienstleistungen zu überprüfen.
