K5 Konferenz 2024
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

Headless

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

Composable

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

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

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.

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.

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.

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.

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:

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.

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.

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?

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.

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.”

Dominic Klein
Manager Developer Experience, shopware AG,

Verwandte Blog Posts

Verwandte Videos

Projekt Shopware "Frontends"

shopcast.fm

"Frontends" Revisted

shopcast.fm

Ecommerce as easy as an UI component

Ramona Schwering, Vuejs Amsterdam 2023