Mit der Shopware Composable Storefront k\u00f6nnen Unternehmen die Funktionen, die sie f\u00fcr ihre Storefront ben\u00f6tigen, kombinieren und anpassen. Entkoppelte Architektur bedeutet, dass eine Komponente in einem Shop unbewusst wachsen kann, was zu unkontrollierter Skalierbarkeit f\u00fchrt. Diese Architektur ist flexibler und erm\u00f6glicht die schnelle Erstellung neuer Dienste. Sie macht die Dinge auch weniger kompliziert und daher einfacher. Sie ist auch offener, was die Kreativit\u00e4t und den Wettbewerb innerhalb eines Unternehmens f\u00f6rdert.<\/p>\n\n\n\n
Umgebungsanforderungen f\u00fcr Shopware Composable Storefront<\/strong><\/h2>\n\n\n\n- Shopware API<\/strong>
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\u00fctzt. Sie k\u00f6nnen den Endpunkt und den API-Schl\u00fcssel im Admin-Panel des Shops finden. F\u00fcgen Sie im Endpunkt Ihres Shops \/store-api am Ende hinzu.<\/li><\/ul>\n\n\n\n![\"Wie](\"https:\/\/www.bay20.com\/wp-content\/uploads\/2025\/01\/Dashboard-Shopware-Administration-01-23-2025_01_30_AM-980x487.png\")
<\/figure>\n\n\n\n- Node.js<\/strong>
F\u00fcr die Entwicklung von Shopware Composable Storefront, erfordert es Node.js Runtime Environment. Wir empfehlen die Verwendung der Version ist mindestens 22.0 oder h\u00f6her als f\u00fcr die bessere Erfahrung. Sie k\u00f6nnen einfach die Node.js<\/a> von der offiziellen Website.<\/li>- Package Manger<\/strong>
Die Composable Storefront unterst\u00fctzt pnpm, npm und yarn package manager. Ich empfehle die Verwendung von pnpm, weil es den Speicherplatz spart und auch die schnelle Installationsgeschwindigkeit bietet.<\/li><\/ul>\n\n\n\nSchritt zur Einrichtung eines zusammensetzbaren Schaufensters.<\/h2>\n\n\n\n
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\u00e4che, die mit Standardfunktionen wie Warenkorb, Navigation, Kasse und CMS-Seiten ausgestattet ist. Alternativ k\u00f6nnen Sie sich auch f\u00fcr die leere Vorlage entscheiden.<\/p>\n\n\n\n
- Ziehen Sie die Vorlagendatei aus dem Github-Repository.
npx tiged shopware\/frontends\/templates\/vue-demo-store demo-store<\/code>
![\"\"](\"https:\/\/www.bay20.com\/wp-content\/uploads\/2025\/01\/Screenshot-5.png\")
Wenn Sie diesen Befehl ausf\u00fchren, wird ein Ordner mit dem Namen demo-store<\/strong> erstellt. Navigieren Sie anschlie\u00dfend zu diesem Ordner.
![\"\"](\"https:\/\/www.bay20.com\/wp-content\/uploads\/2025\/01\/Screenshot-6.png\")
<\/li>- Nachdem Sie die Vorlage von GitHub gezogen haben, f\u00fchren Sie den Befehl aus, um alle erforderlichen Pakete zu installieren.
pnpm i<\/code>
![\"\"](\"https:\/\/www.bay20.com\/wp-content\/uploads\/2025\/01\/Screenshot-7.png\")
<\/li>- Sobald der Installationsbefehl abgeschlossen ist, f\u00fchren Sie diesen Befehl aus, um die Anwendung zu starten. Standardm\u00e4\u00dfig wird sie gestartet bei localhost:3000<\/strong>.
pnpm run dev<\/code>
![\"\"](\"https:\/\/www.bay20.com\/wp-content\/uploads\/2025\/01\/Screenshot-8.png\")
<\/li><\/ol>\n\n\n\nIn dieser Vorlage sind der Endpunkt und der API-Zugangsschl\u00fcssel bereits vorgegeben. Wenn Sie den API-Zugangsschl\u00fcssel oder den Endpunkt \u00e4ndern m\u00f6chten, \u00f6ffnen Sie die Datei nuxt.config.ts. Aktualisieren Sie in der Datei die Werte f\u00fcr accessToken und Endpunkt mit den Werten, die Sie \u00fcber das Shopware-Administrationspanel abgerufen haben. Sobald Sie die \u00c4nderungen gespeichert haben, wird die Vorlage automatisch neu gestartet und die Aktualisierungen basierend auf Ihren Shopware-Verwaltungseinstellungen ber\u00fccksichtigt.<\/p>\n\n\n\n
Bitte kontaktieren Sie uns unter <\/strong>manish@bay20.com<\/a> oder rufen Sie uns an unter +91-8800519180<\/a> \/ +91-9582784309<\/a><\/strong> f\u00fcr jegliche Unterst\u00fctzung im Zusammenhang mit Shopware. Sie k\u00f6nnen auch die Shopware-Entwicklungsseite<\/a> um unsere Dienstleistungen zu \u00fcberpr\u00fcfen.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"Shopware Composable Frontends ist ein Framework f\u00fcr die Erstellung benutzerdefinierter Storefronts auf der Grundlage von Cloud-Technologie. Die themenbasierte Anpassung wird mit zunehmender Anzahl von Abh\u00e4ngigkeiten schwierig zu pflegen. Der Headless-Ansatz in Shopware Frontends bietet die M\u00f6glichkeit, das Frontend vom Backend zu trennen, was die Agilit\u00e4t, Skalierbarkeit und Flexibilit\u00e4t erh\u00f6ht. Diese Art von offener Architektur geht […]<\/p>\n","protected":false},"author":120,"featured_media":15032,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[168,78,115],"tags":[],"class_list":["post-14992","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-composable-storefront","category-shopware","category-shopware-6"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/14992","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/users\/120"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/comments?post=14992"}],"version-history":[{"count":13,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/14992\/revisions"}],"predecessor-version":[{"id":17357,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/14992\/revisions\/17357"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media\/15032"}],"wp:attachment":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media?parent=14992"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/categories?post=14992"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/tags?post=14992"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
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\u00fctzt. Sie k\u00f6nnen den Endpunkt und den API-Schl\u00fcssel im Admin-Panel des Shops finden. F\u00fcgen Sie im Endpunkt Ihres Shops \/store-api am Ende hinzu.<\/li><\/ul>\n\n\n\n
<\/figure>\n\n\n\n- Node.js<\/strong>
F\u00fcr die Entwicklung von Shopware Composable Storefront, erfordert es Node.js Runtime Environment. Wir empfehlen die Verwendung der Version ist mindestens 22.0 oder h\u00f6her als f\u00fcr die bessere Erfahrung. Sie k\u00f6nnen einfach die Node.js<\/a> von der offiziellen Website.<\/li>- Package Manger<\/strong>
Die Composable Storefront unterst\u00fctzt pnpm, npm und yarn package manager. Ich empfehle die Verwendung von pnpm, weil es den Speicherplatz spart und auch die schnelle Installationsgeschwindigkeit bietet.<\/li><\/ul>\n\n\n\nSchritt zur Einrichtung eines zusammensetzbaren Schaufensters.<\/h2>\n\n\n\n
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\u00e4che, die mit Standardfunktionen wie Warenkorb, Navigation, Kasse und CMS-Seiten ausgestattet ist. Alternativ k\u00f6nnen Sie sich auch f\u00fcr die leere Vorlage entscheiden.<\/p>\n\n\n\n- Ziehen Sie die Vorlagendatei aus dem Github-Repository.
npx tiged shopware\/frontends\/templates\/vue-demo-store demo-store<\/code>
Wenn Sie diesen Befehl ausf\u00fchren, wird ein Ordner mit dem Namen demo-store<\/strong> erstellt. Navigieren Sie anschlie\u00dfend zu diesem Ordner.
<\/li>- Nachdem Sie die Vorlage von GitHub gezogen haben, f\u00fchren Sie den Befehl aus, um alle erforderlichen Pakete zu installieren.
pnpm i<\/code><\/li>- Sobald der Installationsbefehl abgeschlossen ist, f\u00fchren Sie diesen Befehl aus, um die Anwendung zu starten. Standardm\u00e4\u00dfig wird sie gestartet bei localhost:3000<\/strong>.
pnpm run dev<\/code><\/li><\/ol>\n\n\n\nIn dieser Vorlage sind der Endpunkt und der API-Zugangsschl\u00fcssel bereits vorgegeben. Wenn Sie den API-Zugangsschl\u00fcssel oder den Endpunkt \u00e4ndern m\u00f6chten, \u00f6ffnen Sie die Datei nuxt.config.ts. Aktualisieren Sie in der Datei die Werte f\u00fcr accessToken und Endpunkt mit den Werten, die Sie \u00fcber das Shopware-Administrationspanel abgerufen haben. Sobald Sie die \u00c4nderungen gespeichert haben, wird die Vorlage automatisch neu gestartet und die Aktualisierungen basierend auf Ihren Shopware-Verwaltungseinstellungen ber\u00fccksichtigt.<\/p>\n\n\n\n
Bitte kontaktieren Sie uns unter <\/strong>manish@bay20.com<\/a> oder rufen Sie uns an unter +91-8800519180<\/a> \/ +91-9582784309<\/a><\/strong> f\u00fcr jegliche Unterst\u00fctzung im Zusammenhang mit Shopware. Sie k\u00f6nnen auch die Shopware-Entwicklungsseite<\/a> um unsere Dienstleistungen zu \u00fcberpr\u00fcfen.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
Shopware Composable Frontends ist ein Framework f\u00fcr die Erstellung benutzerdefinierter Storefronts auf der Grundlage von Cloud-Technologie. Die themenbasierte Anpassung wird mit zunehmender Anzahl von Abh\u00e4ngigkeiten schwierig zu pflegen. Der Headless-Ansatz in Shopware Frontends bietet die M\u00f6glichkeit, das Frontend vom Backend zu trennen, was die Agilit\u00e4t, Skalierbarkeit und Flexibilit\u00e4t erh\u00f6ht. Diese Art von offener Architektur geht […]<\/p>\n","protected":false},"author":120,"featured_media":15032,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[168,78,115],"tags":[],"class_list":["post-14992","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-composable-storefront","category-shopware","category-shopware-6"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/14992","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/users\/120"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/comments?post=14992"}],"version-history":[{"count":13,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/14992\/revisions"}],"predecessor-version":[{"id":17357,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/14992\/revisions\/17357"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media\/15032"}],"wp:attachment":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media?parent=14992"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/categories?post=14992"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/tags?post=14992"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Nachdem Sie die Vorlage von GitHub gezogen haben, f\u00fchren Sie den Befehl aus, um alle erforderlichen Pakete zu installieren.
- Package Manger<\/strong>