Vue Storefront - ein Überblick

Vue Storefront ist eine ziemlich komplexe Lösung mit vielen Möglichkeiten. Alle zu kennen kann einige Zeit dauern. In diesem Gast-Artikel von Vue Storefront Co-Founder Filip Rakowski werden alle wichtigen Konzepte in wenigen Minuten erklärt, die notwendig sind, um mit Vue Storefront zu starten.

 

Was ist Vue Storefront?

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.

Hauptmerkmale von Vue Storefront:

  • plattformunabhängig
  • Fokus auf Performance
  • Mobile-First-Ansatz
  • Keine Einschränkungen bei Theming und Anpassungen
  • tolle Erfahrung für Entwickler
  • Open Source mit MIT-Lizenz
  • Standard Server-Side Rendering (für SEO)
  • Offline-Modus

Wie wird Vue Storefront mit Backend-Systemen verbunden?

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.


Bildquelle: www.blog.vuestorefront.io

 

Der API Connector arbeitet in zwei Phasen:

  • Data pump (Bild: mage2nosql) zieht statische Daten (Katalog, Bestellungen, usw.) von Ihrer e-Commerce Plattform zu Vue Storefront Elasticsearch und ändert das Format zu dem von der vue-Storefront-api benötigten. Nach dem Abrufen der Daten können Sie Ihren Produktkatalog in Vue Storefront anzeigen. Nachdem die Daten in ElasticSearch geschoben wurden, bleiben sie mit Änderungen im Backend synchronisiert und aktualisieren ihren Inhalt.
  • Worker Pool ist die Synchronisation von sogenannten dynamischen Aufrufen (User Sessions, Warenkorbregeln, usw.), die nicht in der Datenbank gespeichert werden können und von vue-storefront-api direkt aus dem Backend aufgerufen werden müssen. Während dieser zwei Integrationsphasen kann Vue Storefront mit Ihrem Backendsystem arbeiten.

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.

 

Wie funktioniert es?

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.

Vue Storefront installieren

Zum installieren von Vue Storefront gibt es drei Möglichkeiten:

  • Man kann das Frontend einrichten, das mit der Demo-Backend-Plattform verbunden ist (am besten geeignet zum Ausprobieren von Vue Storefront).
  • Das Frontend kann mit einer eigenen vue-storefront-api und Datenbank eingerichtet werden, die von der Demo ausgegeben wurde.
  • Eingerichtet werden kann Vue Storefront auch mit der vue-storefront-api, die mit einem e-Commerce-Backend verbunden ist.


Bildquelle: www.blog.vuestorefront.io

 

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.

 

Vue Storefront konfigurieren

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.

 

Themes erstellen in Vue Storefront

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.


Bildquelle: www.blog.vuestorefront.io

 

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.


Die Geschäftslogik der Kernkomponente kann als Vue.js-Mixin in jede Theme-Komponente eingefügt werden. // Bildquelle: www.blog.vuestorefront.io

 

Offline-Modus und Cache

Vue Storefront funktioniert auch dann, wenn der Benutzer offline ist. Dies gelingt, indem Vue Storefront starken Gebrauch vom Browser-Cache macht.

  • Für die statischen Assets (nur prod) wird das sw-precache-Plugin verwendet. (Konfiguration unter core/build/webpack.prod.sw.config.js). Sie werden im Service Worker zwischengespeichert und können im Application tab der dev-tools überprüft werden.
  • Für den Katalog und Speicherdatencache wird IndexedDB und Local Storage verwendet. Außerdem werden auch Produkte aus besuchten Kategorien vorab abgerufen. Wenn also eine Kategorie aufgerufen wird, sind alle Produkte offline verfügbar. Der Mechanismus des Offline-Speichers befindet sich unter core/lin./Storage.
    Derzeit werden einige der gecachten Daten auch verwendet, wenn der Nutzer online ist, um den Content sofort anzuzeigen. Deshalb ist Vue Storefront so schnell.


Hier finden Sie zwischengespeicherte statische Assets. Bitte beachten Sie, dass Service Worker nur im Produktionsmodus arbeitet. // Bildquelle: www.blog.vuestorefront.io

 

Was sonst noch wichtig ist

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.

 

Nützliche und weiterführende Links

Video inklusive Training

Sie können sich auch eine Videoaufzeichnung vom 4. Vue Storefront-Hackathon mit einem kostenlosen Einführungstraining ansehen.