Komponentenbasierte Entwicklung mit dem Shopware Frontends Framework
Headless Commerce
Headless Commerce ist ein Ansatz für E-Commerce-Plattformen, bei dem das Backend (die Datenbank und die Logik, die die Daten verarbeitet) vom Frontend (der Benutzeroberfläche) getrennt wird. Das bedeutet, dass die Verwaltung von Produkten, Bestellungen und Kunden weiterhin in einem Backend erfolgt, aber die Benutzeroberfläche kann auf jeder Plattform oder jedem Gerät dargestellt werden, z. B. auf einer Website, einer mobilen App oder einem Smart-Device. Durch die Trennung von Backend und Frontend bietet Headless Commerce mehr Flexibilität und Skalierbarkeit für den E-Commerce-Bereich, da verschiedene Frontend-Plattformen verwendet werden können, ohne dass das Backend neu geschrieben werden muss. Dies ermöglicht es auch Entwickler:innen, benutzerdefinierte und ansprechende Benutzeroberflächen zu erstellen, die genau auf die Bedürfnisse ihrer Zielgruppe zugeschnitten sind. Insgesamt ist Headless Commerce ein fortschrittlicher Ansatz für E-Commerce-Plattformen, der Unternehmen dabei hilft, sich schnell an die sich ständig ändernden Anforderungen des Marktes anzupassen und eine bessere Benutzererfahrung zu bieten.
Shopware Frontends Framework
Shopware hat mit Shopware Frontends ein Framework für komponentenbasierte Entwicklung auf Basis des Headless Commerce Ansatzes veröffentlicht. Das Framework ermöglicht es Entwickler:innen, schnell und einfach ansprechende Shop-Frontends zu erstellen, indem sie auf eine Vielzahl von vorgefertigten Komponenten zurückgreifen können. Durch die Verwendung von Shopware Frontends können Entwickler:innen auch die Vorteile des Headless Commerce nutzen, indem sie das Frontend vom Backend trennen und somit die Flexibilität und Skalierbarkeit ihres Shops erhöhen. Das Framework ist auch vollständig responsiv und bietet eine nahtlose Integration mit der Shopware-Plattform, was es zu einer leistungsstarken und flexiblen Lösung für die Erstellung von modernen E-Commerce-Shops macht. Mit Shopware Frontends hat Shopware eine zukunftsweisende Lösung geschaffen, die den Anforderungen von Unternehmen jeder Größe gerecht wird.
Das Shopware Frontends Framework basiert auf einer Kombination von modernen Webtechnologien, darunter Nuxt.js, Vue.js, Typescript und Tailwind.
Vue.js
Vue.js ist eine fortschrittliche JavaScript-Bibliothek, die auf einem Komponentenbasierten Ansatz aufbaut. Es ist sehr flexibel und einfach zu erlernen und bietet eine reaktive Datenbindung und eine leistungsfähige Routing-Option. Vue.js verwendet Virtual-DOM, um Änderungen an der Benutzeroberfläche schnell und effizient zu verarbeiten. Die Bibliothek enthält viele nützliche Funktionen wie Ereignis-Bindungen, direktiven und Komponenten, um komplexe Benutzeroberflächen einfach zu erstellen. Es unterstützt auch das Erstellen von Einzel-Datei-Komponenten, die HTML, CSS und JavaScript in einer Datei vereinen. Es gibt auch eine Vielzahl von Plugins und Erweiterungen, die von der großen Vue-Community bereitgestellt werden, um die Entwicklung noch einfacher und effizienter zu machen.
<script setup lang="ts">
export interface Props {
type?: 'circle' | 'square' | 'chip';
}
withDefaults(defineProps<Props>(), {
type: 'square',
});
const classList = {
circle: 'w-6 h-6 rounded-full',
square: 'px-2 h-[19px]',
chip: 'px-4 h-6 rounded-full',
};
</script>
<template>
<div :class="['bg-primary text-secondary inline-flex items-center justify-center', `${classList[type]}`]">
<div class="text-2sm leading-500 font-bold uppercase tracking-wider">
<slot />
</div>
</div>
</template>
Nuxt.js
Nuxt ist ein Framework, das auf Vue.js aufbaut und die Erstellung von serverseitig gerenderten Single-Page-Anwendungen erleichtert. Mit Nuxt können Entwickler:innen die Performance ihrer Anwendung verbessern, indem sie die Ladezeit reduzieren. Dies wird durch das Vorladen von Ressourcen erreicht, wodurch eine bessere Benutzererfahrung erzielt wird. Darüber hinaus erleichtert Nuxt auch die Entwicklung von SEO-freundlichen Anwendungen, da es den Seiteninhalt in der HTML-Struktur vorab rendert und somit von Suchmaschinen besser indiziert werden kann.
import svgLoader from 'vite-svg-loader';
export default defineNuxtConfig({
build: {
transpile: ['floating-vue'],
},
shopware: {
shopwareEndpoint: process.env.shopwareEndpoint,
shopwareAccessToken: process.env.shopwareAccessToken,
},
alias: {
useMeta: '~/composables/useMeta',
},
typescript: {
typeCheck: true,
strict: true,
},
modules: ['@nuxtjs/tailwindcss', '@vueuse/nuxt', '@shopware-pwa/nuxt3-module', '@shopware-pwa/cms-base', 'nuxt-swiper'],
// components: true,
components: {
dirs: ['~/components', '~/styleguide'],
global: true,
},
vueuse: {
ssrHandlers: true,
},
experimental: {
inlineSSRStyles: false,
},
nitro: {
compressPublicAssets: true,
},
tailwindcss: {
configPath: 'tailwind.config.ts',
},
router: {
options: {
linkExactActiveClass: 'text-brand-primary',
},
},
vite: {
plugins: [svgLoader({})],
},
});
Typescript
TypeScript ist eine Erweiterung von JavaScript, die statische Typisierung und andere Funktionen bietet, um die Entwicklung von großen und komplexen Anwendungen zu erleichtern. Mit TypeScript können Entwickler:innen Typen definieren, um Fehler bei der Laufzeit zu vermeiden und die Code-Lesbarkeit zu erhöhen. Die statische Typisierung von TypeScript hilft dabei, Fehler frühzeitig zu erkennen und die Codequalität zu verbessern. TypeScript bietet auch weitere Funktionen wie Klassen, Schnittstellen, Enumerations und Generics, um die Struktur und Organisation von Code zu verbessern. Es kann mit vielen Frameworks und Bibliotheken u.a. Vue.js kombiniert werden. Insgesamt ist TypeScript eine leistungsfähige und nützliche Erweiterung von JavaScript, die die Entwicklung von skalierbaren und robusten Anwendungen erleichtert.
{
"extends": "./.nuxt/tsconfig.json",
"include": [
"./.nuxt/nuxt.d.ts",
"./**/*"
],
}
Tailwind
Tailwind ist ein CSS-Framework, das auf einer Utility-First-Philosophie basiert. Es bietet eine große Anzahl von vordefinierten CSS-Klassen, die auf spezifische Eigenschaften wie Größe, Abstand, Farben und Schriftarten angewendet werden können. Mit Tailwind können Entwickler:innen schnell und einfach CSS-Stile auf ihre Benutzeroberflächen anwenden, ohne viel Zeit mit der Erstellung von benutzerdefiniertem CSS-Code zu verbringen. Das Framework bietet auch erweiterte Funktionen wie Responsiveness, Hover- und Focus-Effekte, Transitions und Animations. Tailwind ist auch sehr anpassbar und kann leicht mit anderen Frameworks und Bibliotheken u.a. Vue.js, kombiniert werden. Insgesamt ist Tailwind ein nützliches CSS-Framework, das Entwicklern Zeit spart und ihnen ermöglicht, schnelle und ansprechende Benutzeroberflächen zu erstellen.
<div class="bg-grey-medium text-primary typo-copy-md lg:typo-copy-lg flex items-center p-5">
<div
:class="`${classList[type]}`"
class="h-7.5 w-7.5 mr-3.5 flex flex-shrink-0 items-center justify-center rounded-full lg:mr-4 lg:h-11 lg:w-11"
>
<Icon
name="symbols:info--circle"
class="h-5 w-5 lg:h-7 lg:w-7"
/>
</div>
<slot />
</div>
Wie kann das Shopware Frontends Framework genutzt werden?
Für das Aufsetzen von einem Shopware Frontends Framework stehen zwei Templates zur Verfügung: Ein Demo Store Template und ein Blank Template.
Das Demo Store Template ist ein Beispiel-Template des Shopware Frontends Frameworks, das für Entwickler:innen gedacht ist, um schnell und einfach eine eigene Shopware Store-Frontend-Umgebung aufzubauen. Es enthält eine Vielzahl von Komponenten, die in einer typischen E-Commerce-Umgebung verwendet werden, wie z.B. Header, Footer, Navigation, Kategorieseiten und Produktdetails. Das Template ist responsiv und enthält viele interaktive Elemente wie Suchfunktionen, Warenkörbe und Zahlungs- und Versandoptionen. Es ist auch möglich, das Template nach den eigenen Bedürfnissen anzupassen und zu erweitern. Das Demo Store Template ist ein guter Ausgangspunkt für die Entwicklung von benutzerdefinierten Store-Frontends auf Basis des Shopware Frontends Frameworks.
npx tiged shopware/frontends/templates/vue-demo-store demo-store
cd demo-store
npm i && npm run devDas Blank Template ist ein Minimaltemplate für ein eigenes, individuelles Store-Frontend, das von Grund auf neu aufgebaut wird. Im Gegensatz zum Demo Store Template enthält das Blank Template keine vorgefertigten Layouts oder Styles und bietet damit eine leere Leinwand für die eigene Gestaltung. Das Template bietet jedoch eine grundlegende Ordnerstruktur und einige Konfigurationsdateien, um den Einstieg zu erleichtern. Das Blank Template eignet sich besonders für erfahrene Entwickler:innen, die volle Kontrolle über das Aussehen und Verhalten ihrer Shopware Store-Frontend-Umgebung haben möchten.
npx tiged shopware/frontends/templates/vue-blank vue-blank
cd vue-blank
npm i && npm run dev
Bei sitegeist setzen wir im Projekt, das auf dem Shopware Frontends Framework basiert, das Demo Store Template als Ausgangspunkt ein. Das Template bietet eine gute Grundlage und einen schnellen Einstieg. Es bietet auch die Möglichkeit, die Styles und das Layout nach den Anforderungen unseres Kunden anzupassen und zu erweitern. Die Verwendung des Demo Store Templates als Basis für das Projekt ermöglicht es uns, Zeit und Ressourcen zu sparen und sich auf die Entwicklung von Funktionen und Erweiterungen zu konzentrieren, die spezifisch für die Bedürfnisse unseres Kunden abzielen.
Im weiteren Verlauf des Projekts haben wir kundenindividuelle Komponenten entwickelt, um die Funktionalität und das Design des Store-Frontends an die spezifischen Anforderungen unseres Kunden anzupassen. Die komponentenbasierte Entwicklung bietet dabei einige Vorteile. Zum einen konnten wir Komponenten unabhängig voneinander entwickeln, testen und wiederverwenden, was die Effizienz der Entwicklung erhöhte. Zum anderen erlaubt es uns, die Komponenten in verschiedenen Teilen des Store-Frontends zu kombinieren und neu anzuordnen, um schnell und einfach neue Seiten und Layouts zu erstellen. Dadurch können wir die Flexibilität und Wartbarkeit des Codes erhöhen und die Entwicklungszeit für neue Funktionen und Seiten reduzieren. Insgesamt ermöglichte uns die komponentenbasierte Entwicklung, eine maßgeschneiderte und flexible Store-Frontend-Lösung für unseren Kunden zu entwickeln, die den spezifischen Anforderungen und Bedürfnissen des Kunden entsprechen.
Das Shopware Frontends Framework bietet fünf verschiedene Packages zur Anbindung an die Shopware API an, die für die Headless Entwicklung eines Shops sehr hilfreich sind.
- @shopware-pwa/types
- @shopware-pwa/helpers-next
- @shopware-pwa/api-client
- @shopware-pwa/composables-next
- @shopware-pwa/cms-base
Types Package
Das Shopware Frontends Framework stellt ein Types-Package zur Verfügung, das Typescript-Types für verschiedene Shopware-Objekte bereitstellt. Dazu gehören beispielsweise Order, Customer, Cart, Payment, Shipping oder Address. Durch die Verwendung dieser vorkonfigurierten Typen wird die Integration der Shopware-API in die Frontend-Entwicklung erleichtert und ermöglicht eine typensichere Verwendung von Daten aus der Shopware-API. Das Types-Package bietet auch Typen für Requests und Responses der API-Endpunkte, wodurch sichergestellt wird, dass die Daten korrekt formatiert und validiert sind. Die Verwendung von Typescript-Types im Shopware Frontends Framework trägt zur Verbesserung der Code-Qualität bei und ermöglicht eine schnellere und sicherere Entwicklung von Shopware-Frontends.
export type Cart = {
name: string;
token: string;
price: CartPrice;
lineItems: LineItem[];
errors: CartErrors;
deliveries: CartDelivery[];
transactions: Transaction[];
modified: boolean;
customerComment: null | string;
affiliateCode: null | string;
campaignCode: null | string;
};
Ein weiterer Vorteil des Types-Packages im Shopware Frontends Framework ist, dass es nicht auf Vue.js beschränkt ist und unabhängig davon in jedem Typescript-Projekt eingesetzt werden kann.
Helpers Package
Zusätzlich zum Types-Package stellt das Shopware Frontends Framework auch ein Helpers-Package zur Verfügung, das nützliche Helferfunktionen für die Entwicklung von Shopware-Frontends bereitstellt. Diese Funktionen umfassen Formatierung, Datenmanipulation und andere zustandslose Aufgaben, die häufig in der Frontend-Entwicklung vorkommen. Das Helper-Package nutzt das Types-Package, um eine typensichere Verwendung der Shopware-Daten zu gewährleisten, ist jedoch unabhängig von Vue.js und kann in jedem Typescript-Projekt eingesetzt werden.
function getFormattedPrice(value, currency, options = {
direction: "ltr",
removeDecimals: false,
removeCurrency: false
}) {
let formattedPrice = [(+value).toFixed(toFixedValue), currency];
if (options.removeDecimals) {
formattedPrice[0] = removeDecimals(formattedPrice[0]);
}
if (options.removeCurrency) {
formattedPrice.pop();
}
if (options.direction === "rtl" && !options.removeCurrency) {
formattedPrice = formattedPrice.reverse();
}
return formattedPrice.join(" ");
}API-Client Package
Das Shopware Frontends Framework bietet auch ein API-Client-Package, das den Zugriff auf die Shopware-API abstrahiert und die Entwicklung von Shopware-Frontends erleichtert. Der API-Client nutzt das Types-Package, um eine typensichere Verwendung der Shopware-Daten zu ermöglichen. Es kann in jedem JavaScript-Projekt eingesetzt werden, unabhängig davon, ob es sich um eine Vue.js-Applikation oder ein anderes Framework handelt. Der API-Client bietet eine einfache und effiziente Kommunikation zwischen dem Shopware-Shop und dem Frontend, indem er die Details der API-Endpunkte und -Anfragen abstrahiert.
const getCustomerRegisterEndpoint = () => `/store-api/account/register`;
async function register(params, contextInstance = defaultInstance) {
const resp = await contextInstance.invoke.post(
getCustomerRegisterEndpoint(),
params
);
return resp.data;
}
Composables Package
Ergänzend bietet das Shopware Frontends Framework auch ein Composables-Package, das auf dem API-Client aufbaut und zusätzliche Funktionalitäten zur Verfügung stellt. Composables sind wiederverwendbare Funktionen, die die Zustandsverwaltung, das UI-Login und den Datenabruf in Vue.js vereinfachen. Das Composables-Package ermöglicht es Entwickler:innen, diese Funktionen einfach und effizient in ihren Vue.js-Projekten zu nutzen. Durch die Verwendung von Composables können die Entwickler:innen die Komplexität ihrer Anwendungen reduzieren und die Wiederverwendbarkeit ihres Codes erhöhen. Das Composables-Package trägt somit zu einer schnelleren und effizienteren Entwicklung von Shopware-Frontends bei.
function useProduct(product, configurator) {
const _product = _useContext("product", { context: product });
if (!_product.value) {
throw new Error("Product context is not provided");
}
const _configurator = _useContext("configurator", {
context: product && configurator
});
function changeVariant(variant) {
_product.value = Object.assign({}, _product.value, variant);
}
return {
product: computed(() => _product.value),
configurator: computed(() => _configurator.value),
changeVariant
};
}
CMS Package
Neben dem API-Client-Package, dem Types-Package, dem Helper-Package und dem Composables-Package bietet das Shopware Frontends Framework auch ein CMS-Package an. Dieses Package stellt Vue.js-Komponenten für die Einbindung von CMS-Inhalten in Shopware-Frontends zur Verfügung. Mit dem CMS-Package können Entwickler:innen einfach und effizient Inhalte wie Texte, Bilder oder Videos aus dem Shopware-CMS integrieren. Das CMS-Package ist somit ein weiteres nützliches Tool für die Entwicklung von Shopware-Frontends, das zur Steigerung der Effizienz beiträgt.
<script setup lang="ts">
import type {
CmsElementImageSlider,
CmsElementImage,
} from "@shopware-pwa/composables-next";
import SwSlider from "../../../SwSlider.vue";
const props = defineProps<{
content: CmsElementImageSlider;
}>();
const items = computed(() => props.content.data.sliderItems);
</script>
<template>
<div class="cms-element-image-slider">
<SwSlider :config="props.content.config">
<CmsElementImage
v-for="image of items"
:key="image.media.url"
:content="({ data: image, config: props.content.config } as unknown as CmsElementImage)"
/>
</SwSlider>
</div>
</template>
Deployment und Hosting
Bei Sitegeist deployen wir die Shopware Frontends Vue Application in unserer standardisierten Gitlab CI/CD Pipeline in Verbindung mit dem Deployment Tool Deployer. Die Pipeline ermöglicht es uns, automatisierte Builds durchzuführen und den Code auf verschiedenen Umgebungen wie Test- oder Produktionsumgebungen zu deployen.
task('sms:build', function () {
set('release_path', '{{project_root}}');
run('npm ci');
run('npm run build');
})->local();
Wir hosten die Shopware Frontends Vue.js Application derzeit bei Timme Hosting. Um die Anwendung auf dem Server zu verwalten und sicherzustellen, dass sie immer reibungslos läuft, nutzen wir Supervisor als Prozess Manager. Supervisor ist ein Open-Source-Tool, das die Überwachung und Steuerung von Prozessen auf Unix-Systemen ermöglicht. Mit Supervisor können wir die Anwendung starten, stoppen und neu starten und erhalten zudem wertvolle Informationen zur Verfügbarkeit und Leistung der Anwendung. Die Kombination aus Timme Hosting und Supervisor ermöglicht es uns, die Shopware Frontends Vue.js Application auf einem zuverlässigen und stabilen Hosting-Service zu betreiben und gleichzeitig die Wartung und Verwaltung der Anwendung zu automatisieren und zu optimieren.
Fazit
Das Shopware Frontends Framework bietet eine robuste und leistungsfähige Plattform für die komponentenbasierte Entwicklung von Online-Shops. Durch die Verwendung von Vue.js und den verschiedenen Packages, die das Framework zur Verfügung stellt, können Entwickler:innen schnell und einfach benutzerdefinierte Komponenten erstellen und anpassen. Das Types Package bietet eine einfache Möglichkeit, Typisierung in das Projekt zu integrieren, und das Composables Package erleichtert die Verwaltung von Zuständen und die Integration von API-Aufrufen in die Anwendung. Mit dem CMS Package können Entwickler:innen zudem schnell und einfach Inhalte erstellen und verwalten.
Durch den Headless Ansatz und die Trennung von Frontend und Backend wird die Entwicklung von Online-Shops sehr flexibel. Bei Bedarf können auch unterschiedliche Teams für Frontend und Backend eingesetzt werden. Die Möglichkeit der Trennung bietet auch die Chance, spezielle Fachteams für Backend- oder Frontend-Entwicklung zu etablieren und so die Entwicklung des Shops in einem hohen Tempo und mit hoher Qualität voranzutreiben.
Das Shopware Frontends Framework ist aktuell noch in der Beta-Phase. Auch der Pluginsupport, insbesondere für Payment, ist aktuell noch begrenzt. Jedoch ist es bereits möglich, Paypal als Zahlungsmethode zu integrieren.
Insgesamt bietet das Shopware Frontends Framework eine umfassende Lösung für die Entwicklung von individuellen Online-Shops und ist eine gute Wahl für Unternehmen, die eine flexible und leistungsfähige Plattform benötigen. Wir sind gespannt auf die weitere Entwicklung des Frameworks und freuen uns darauf, unsere Erfahrungen damit zu sammeln.
Haben Sie Fragen zu unserer Entwicklung oder brauchen Sie Unterstützung in Ihren Shopware Projekten, dann freuen wir uns über Ihre Rückmeldung.
