Unsere neuesten Features, die jede Interaktion auf ein neues Level heben.

SHOPWARE COMPOSABLE FRONTENDS

Dein Toolkit für innovative, schnelle Storefront-Entwicklung

Entdecke unser fortschrittliches SDK zur Entwicklung von Custom Frontends. Nutze smarte Tools, um deine Arbeitsweise aufs nächste Level zu bringen und erschaffe einzigartige Einkaufserlebnisse.

Sprich mit unseren Experten

Entwickle im Tempo deiner Ideen

Headless

Trenne Frontend vom Backend. Entwickle und iteriere schneller als je zuvor und entwerfe eine benutzerdefinierte Frontend-Architektur, die deinen spezifischen Unternehmensanforderungen entspricht.

Composable

Erschaffe einzigartige Einkaufserlebnisse, ohne dabei das Rad neu zu erfinden. Greife gleichzeitig auf bewährte Funktionen zurück, mit denen du deinen Onlineshop genau an den Stellen individualisierst, wo es für dich wichtig ist.

Cloud ready

Mach's dir leicht und überlasse Shopware das Hosting, einschließlich automatischer Software-Updates und Maintenance. So kannst du dich voll auf das Wachstum deines Unternehmens konzentrieren.

App-unterstützt

Alle Apps, die auf dem Plugin-/App-System basieren und Funktionen über die API bereitstellen, werden unterstützt. Der API-Zugriff ist sowohl über den API-Client als auch durch Vue.js Composables möglich.

Textgrafik mit dem Schriftzug: 'Einfach, skalierbar, und flexibel für deine Kreativität als Innovationstreiber.'

Collage mit einem arbeitenden Team, einem Entwickler am Computer, Code und Symbolen für Zeit und Dokumentation. Symbolisiert Zusammenarbeit und Softwareentwicklung.

Setze deine Ideen mühelos um. Shopware Composable Frontends stellt dir eine benutzerfreundliche Auswahl an JavaScript-APIs und Vue.js Komponenten bereit. Erstelle deine Frontends komplett selbst und behalte die volle Kontrolle über deinen Technologie-Stack, ohne den ganzen Update-Stress.

Bild zeigt eine Produktseite für gemahlenen Pfeffer mit einem 'In den Warenkorb'-Button. Ein Codebeispiel ist überlagert, das die Funktion zum Hinzufügen des Produkts in den Warenkorb zeigt. Eine Benachrichtigung bestätigt, dass der Artikel erfolgreich hinzugefügt wurde. Ein kleines Bild eines Entwicklers ist ebenfalls sichtbar.

Das Cookbook erklärt dir genau, wie du bestimmte Shopware Features, zum Beispiel eine Wunschliste oder einen Blog, in deine individuelle Storefront integrierst. Dank des API-Clients und der Composables musst du dir keine Gedanken darüber machen, wie alles funktioniert. Es funktioniert einfach.

Webseite mit Sommertrends, zeigt Bilder von einem Mädchen im Freien und einer Gruppe von Menschen am Pool. Überschrift lautet 'Fresh ideas for hot summer days'.

Der API-Client ist eine eigenständige TypeScript-Bibliothek, die nicht speziell an Vue.js gebunden ist. Du kannst sie in jedem JavaScript- oder Node.js-basierten Projekt verwenden. Nutze sie in Verbindung mit React, Svelte oder einfach mit Vanilla-JavaScript. Starte auf der grünen Wiese und integriere E-Commerce Funktionalitäten genau dort, wo und wie du sie brauchst.

Ein Entwicklerteam arbeitet an Computern. Um das zentrale Bild sind Logos von React, Svelte und Astro angeordnet, die verschiedene Webentwicklungsframeworks symbolisieren.

Du willst unsere Erlebniswelten auch in deinem Custom Frontend nutzen? Kein Problem – das Shopware CMS ist headless. Oder ziehst du es vor, dein eigenes Headless-CMS aufzusetzen? Auch das ist möglich. Composable Frontends bietet dir alle Möglichkeiten, um dein CMS mühelos zu integrieren.

Der Kickstarter für deine Frontends

Die Art und Weise, wie du dein Projekt aufbaust, beeinflusst natürlich auch das Deployment. Wähle, ob du bei Null anfangen oder ein bereits bestehendes Projekt nutzen möchtest. Shopware Composable Frontends bietet dir die folgenden drei Möglichkeiten:

Bildmontage zeigt einen Entwickler, Code auf einem Bildschirm und eine 'Hello World!' Nachricht. Ein großes, zentrales Symbol mit der Nummer 1 überlagert die Elemente.

Beginne mit einem frischen Template, das aus einer leeren Nuxt.js Application besteht und in dem die Shopware Composable Frontends Komponenten bereits vorinstalliert sind. Nuxt.js ist ein "Meta" Framework, das auf Vue.js aufbaut und zusätzliche Funktionen für das Routing und die Dateiverwaltung bietet.

Bildmontage zeigt eine Webseite, Code auf einem Bildschirm und farbige UI-Elemente. Ein großes, zentrales Symbol mit der Nummer 2 überlagert die Elemente.

Alternativ kannst du das Demo-Store-Template als Referenz nutzen. Es beinhaltet den Großteil der Shopware Features und ermöglicht dir eine Vorschau des Frontends. Verwende das Demo-Store-Template entweder als Grundlage für dein Projekt oder einfach als eine Inspirationsquelle.

Bildmontage zeigt ein User-Interface, Logos von Astro, React und Svelte, sowie Code zum Installieren von Paketen. Ein großes, zentrales Symbol mit der Nummer 3 überlagert die Elemente.

Die dritte Option ist, Composable Frontends als JavaScript-Dependency hinzuzufügen und dann in dein Projekt zu integrieren. Beispielsweise verwendet das Astro-Starter-Template Composable Frontends in einem nicht auf Vue.js basierenden Projekt und veranschaulicht damit die Vielseitigkeit des Frameworks.

Welche Kenntnisse benötigst du für Shopware Composable Frontends?

Drei lachende Personen am Tisch, eine hält ein Smartphone, Laptop auf dem Tisch. Szene zeigt Freude und Zusammenarbeit.

Leichter Einstieg

Wenn du mit Vue.js vertraut bist und Erfahrung mit dem Erstellen von JavaScript-Anwendungen hast, wirst du unsere detaillierte Dokumentation verstehen und direkt mit Composable Frontends durchstarten können. Spezielle Shopware Kenntnisse sind nicht erforderlich und du musst auch nicht viel über das SDK selbst wissen. Natürlich ist es wichtig zu verstehen, welche Composables du zum Aufbau deines Frontends nutzen solltest, aber mit unseren Starter-Guides gelingt dir ein schneller und einfacher Einstieg. Du musst keine Frameworks, kein Kniffe und keine spezielle Syntax kennen.

Nahaufnahme von Händen, die auf einer Laptop-Tastatur tippen.

Wann benötige ich mehr Erfahrung?

Wenn du deinen gesamten Onlineshop mit Shopware Composable Frontends entwickeln möchtest, empfiehlt es sich, Erfahrung im Umgang mit Nuxt.js oder deinem präferierten Framework mitzubringen. Du solltest in der Lage sein, Herausforderungen wie Routing, Datenkonsistenz, Caching und weitere anspruchsvollere Themen zu meistern.

Tauche ein in die Technik

Warum haben wir Composable Frontends entwickelt? Inwiefern unterscheidet es sich von der Shopware PWA? Und für welche Projekte ist es am besten geeignet? Antworten auf diese und viele weitere Fragen erhältst du im Interview mit Niklas Dzösch (Shopware Developer Evangelist) und Dominic Klein (Manager Developer Experience).

“Composable Frontends ermöglicht es Entwicklern, die Funktionen von Shopware in modularen Technologie-Stacks einzusetzen. Wir wissen, dass sich das Frontend-Developer Ökosystem rasch wandelt und von fortlaufenden Verbesserungen und Innovationen angetrieben wird. Genau deshalb wollen wir dir keine bestimmte Technologie vorschreiben. Stattdessen bieten wir dir volle Entscheidungsfreiheit. Gleichzeitig stellen wir leicht verständliche Beispiele bereit, die dafür sorgen, dass du sofort durchstarten kannst. Mit Composable Frontends bekommst du ein zukunftssicheres Framework für deine Custom Storefronts in Shopware.”