Shopware 6 – Vue.js im Storefront nutzen

Next - Shopware 6 – Vue.js im Storefront - made by Next AG

Shopware 6 – Vue.js im Storefront nutzen – Eine technische Anleitung

„Eine Warnung vorweg: Heute wird es technisch!“

Shopware 6 bietet mit seinem top-modernen Technologiestack, dem REST-API Ansatz und dem komfortablen Administrationsbackend auf Basis von Vue.js ein modernes E-Commerce-Framework, das seinesgleichen sucht.

Im Frontend setzt es auf etablierte Basistechnologien wie Bootstrap, SASS und ES6 Javascript, alles auf Basis des Symfony-Stacks.

Leider unterstützt Shopware 6 im Standard keine Verwendung eines modernen Javascript Frameworks wie React, Angular oder Vue.js im Storefront.

Da wir ausgesprochene Fans von Vue.js sind und dieses Framework in all unseren Projekten im Shop, CMS und Individualsoftwarebereich intensiv einsetzen, haben wir nach einem Weg gesucht, dieses mächtige Framework auch im Shopware 6 Frontend nutzbar zu machen.

Im diesem Beitrag erklären wir anhand eines selbstentwickelten Shopware 6 Plugins, welches den Checkout und die Bestellübersicht im Backend um zusätzliche Felder erweitert, wie man auf einfache Weise Vue.js im Storefront verwenden kann.

Der Demo-Sourcecode kann am Ende des Tutorials heruntergeladen werden.

Nextag Checkout Plugin

Über das Plugin werden auf der Checkoutseite unter der Bestellliste über eine Vue.js Komponente 3 weitere Felder Kommentar, Kommission und Liefertermin eingefügt.

Diese Felder werden in einer eigenen Entity, welche mit der Bestellung assoziiert ist, beim Absenden der Bestellung im Shopware 6 Standard über DAL gespeichert.

Shopware 6 – Vue.js im Storefront - Darstellung Zusatzfelder im Checkout

Im Administrationsbackend werden diese 3 Felder in der Bestellübersicht und auf der Bestelldetailseite dargestellt.

Shopware 6 – Vue.js im Storefront - Darstellung Zusatzfelder im Administrationsbackend - Bestellübersicht
Shopware 6 – Vue.js im Storefront - Darstellung Zusatzfelder im Administrationsbackend - Bestellung

Im Folgenden wird die Vue.js Integration detailliert beschrieben. Die Implementation des Administrationsbackends, des OrderPlaced Subscribers und der Entity wird nicht weiter erläutert, da diese nach Shopware Standard implementiert wurden.

Vue.js Implementation

Da Vue.js Komponenten von Shopware 6 im Storefront nicht über webpack erkannt werden, haben wir den Vue.js Teil in einem eigenen Unterordner srvVue implementiert.

Shopware 6 – Vue.js im Storefront - Ordnerstruktur Next AG Checkout Plugin

In diesem Ordner befindet sich alles ausser der Twig-Template Integration, welche wieder nach Shopware Standard im Ordner Resources implementiert ist.

Im Ordner srcVue befindet sich die package.json Datei, über die per npm install (im Order srcVue direkt aufzurufen) die benötigten node_modules installiert werden.

Die Kompilierung der Vue.js Komponente erfolgt per npm run dev welches über das integrierte Laravel Mix webpack.mix.js kompiliert und im Ordner srcVue/dist/storefront/js die Datei nextag-checkout.js erzeugt.

Nun kommt der eigentliche Trick:

Damit das Javascript, welches ja nun nicht von Shopware mit in die all.js kompiliert wurde im Twig verwendet werden kann, muss im Ordner public/js des Projektes ein Symlink zu dieser Datei erstellt werden.

cd public/js

ln -s ../../custom/plugins/NextagCheckout/src/Resources/app/storefront/srcVue/dist/storefront/js/nextag-checkout.js

Shopware 6 – Vue.js im Storefront - Symlink-Erstellung

Vue.js Integration in Twig-Template

im Ordner Resources/views/storefront/page/checkout befindet sich nach Shopwarestandard eine Twig-Datei additionalcheckoutfields.html.twig welche die Vue.js Komponente und deren zugehöriges Template im Ordner templates in <div id=“nextagCheckout“></div> lädt.

Shopware 6 – Vue.js im Storefront - Vue.js Integration in Twig-Template

Vue Twig Template:
Shopware 6 – Vue.js im Storefront - Vue.js Twig-Template
Im Vue Twig Template kann wie gewohnt mit {{}} und {% %} mit Twig gearbeitet werden.
Die Syntax für Vue Variablen ist hier [[variable]]
Shopware 6 – Vue.js im Storefront - Vue.js Variablen Delimiter Definition

additionalcheckoutfields.html.twig kann dann wie in Shopware 6 gewohnt an der gewünschte Stelle im Checkout eingebunden werden. (In diesem Beispiel in confirm/index.html.twig unterhalb der Bestellliste.)

Installation des Plugins

  1. Plugin Herunterladen und im Ordner custom/plugins ablegen
  2. bin/console plugin/refresh
  3. bin/console plugin/install NextagCheckout –activate
  4. bin/console cache:clear
  5. Plugin im Administrationsbackend konfigurieren
  6. cd custom/plugins/NextagCheckout/src/Resources/app/storefront/srcVue
  7. npm install
  8. npm run dev
  9. cd public/js
  10. ln -s ../../custom/plugins/NextagCheckout/src/Resources/app/storefront/srcVue/dist/storefront/js/nextag-checkout.js
  11. bin/build-administration.sh (Production Template) oder bin/console administration:build (Development Template)
  12. bin/console theme/compile
  13. rm -rf var/cache

Download Code

https://bitbucket.org/nextag-ch/shopware-nextag-checkout

Viel Spass bei der Arbeit mit Vue.js und der neu gewonnenen Freiheit im Shopware 6 Storefront!

Dieser Beitrag wurde von Oliver Riske erstellt.