17
.
March
2020
|
Technology
Vue Storefront ist eine Headless und Backend agnostische e-Commerce Progressive Web App, die in Vue.js geschrieben wurde. Die Tatsache, dass eine Headless-Architektur verwendet wird, ermöglicht die Verbindung von Vue Storefront mit jeder e-Commerce-Plattform, sodass es sich um eine Frontend-PWA für Magento, Shopify, BigCommerce, WooCommerce usw. handeln kann. Das Projekt ist Open Source mit einer starken und wachsenden Community.
Vue Storefront ist dank der vue-storefront-API und dedizierten API-Konnektoren für e-Commerce Backendsysteme plattformunabhängig. Das Datenformat in vue-storefront-api ist für jedes Shopsystem immer dasselbe. Unabhängig davon, welches e-Commerce Backend Sie verwenden: Ihr Frontend bleibt gleich - ohne Änderungen.
Dies ist eine großartige Strategie für Migrationen, da Sie problemlos von einem Shopsystem auf ein anderes (oder von einer Version auf eine andere, z. B. Magento 1 -> 2) migrieren können, ohne Ihr Frontend anzufassen.
Der API Connector arbeitet in zwei Phasen:
Einige der bekanntesten Shopsysteme verfügen bereits Integrationen (Magento, CoreShop, BigCommerce, WooCommerce, Shopware), aber man kann auch leicht eine eigene mit der Integrations-Boilerplate erstellen. Die blauen Bereiche im Diagramm sind für den Offline-Cache verantwortlich und werden später in diesem Artikel erläutert.
Es gibt drei Konzepte, mit denen man vertraut sein sollte, wenn man mit Vue Storefront arbeiten will.
Zusammenfassend lässt sich sagen, dass ein solcher Shop im Grunde ein Vue-Storefront-Theme ist, das die von Modulen bereitgestellten Funktionen verwendet. Der Vue Storefront Core hält alles zusammen. Wenn man diese drei Konzepte kennt, kann mit Vue Storefront arbeiten und eigene Shops erstellen.
Zum installieren von Vue Storefront gibt es drei Möglichkeiten:
Um die Installation zu starten gibt man "yarn installer" in das Stammverzeichnis des Projekts ein und beantwortet die Fragen in der Konsole. Nach Abschluss der Installation fährt man mit dem Befehl "yarn dev" fort, um das Projekt auszuführen (standardmäßig auf port 3000). Unabhängig davon, welche der Optionen gewählt, können Sie die Einstellungen in der Konfigurationsdatei später ändern.
Der größte Teil der Vue Storefront-Konfiguration, wie das aktive Design, Backend-API-Adressen, Multistore-Setup, etc., erfolgt über die Konfigurationsdatei, die sich im Ordner „config“ befindet. Die Datei default.json enthält alle Standardeinstellungen.
Für ein eigene Implementierung sollte man eine local.json-Datei erstellen und die Felder aus default.json inkludieren, die überschreiben werden sollen. Diese beiden Dateien werden während des Erstellungsprozesses von local.json zusammengeführt. Wenn man das Installationsprogramm zum Einrichten der Vue Storefront-Instanz verwendet, werden die richtigen Konfigurationsdateien automatisch generiert.
Sollen in Vue Storefront Themes erstellt werden, müssen dafür in den meisten Fällen lediglich um das eigene HTML- und CSS-Markup betrachtet werden. Die erforderliche Businesslogik wird vom core mit den Kernmodulen bereitgestellt und kann problemlos in jede Komponente der Themes eingefügt werden.
Der Mechanismus zum Einfügen einer Kernbusinesslogik in Themes ist simpel. Verwendet wird Vue.js-Mixins, um die aktualisierbare Businesslogik im Kern zu halten. Angenommen, es existiert eine Microcart-Kernkomponente mit einer solchen Businesslogik (Bild links), kann sie einfach in jede Theme-Komponente (Bild rechts) einfügt werden, indem sie importiert und als Mixins hinzufügt wird. Mit diesem Ansatz können nun problemlos Updates für alle Kernkomponenten gemacht werden, ohne den Shop zu beschädigen.
Der einfachste Weg, ein eigenes Theme zu erstellen, ist die Erstellung einer Kopie des Standardthemes. Hier wird der Name der Datei package.json geändert, das aktive Theme in config/local.json umbenannt und yarn ausgeführt, um Lerna-Verknüpfungen zu schließen, die für Monorepos verwendet werden.
Vue Storefront funktioniert auch dann, wenn der Benutzer offline ist. Dies gelingt, indem Vue Storefront starken Gebrauch vom Browser-Cache macht.
Tatsächlich sind diese Informationen alles, was man wissen muss, um mit Vue-Storefront arbeiten zu können. Nachdem die Basics erlernt und umgesetzt wurden, können die Vue-Storefront Dokumente und die Community zu Rate gezogen werden, um sich eingehender mit dem Projekt zu befassen.
Sie können sich auch eine Videoaufzeichnung vom 4. Vue Storefront-Hackathon mit einem kostenlosen Einführungstraining ansehen.
