Die neue Shopware 6 Storefront und was du alles darüber wissen solltest

Martin Schindler, B. Sc. Informatik (Software Architect bei dasistweb GmbH) — war an der Konzeption und Entwicklung der neuen Shopware 6 Storefront beteiligt

In Einzelteile zerlegt — die Shopware 6 Storefront

Um das große Ganze verstehen zu können, muss man oft zunächst die einzelnen Bestandteile betrachten und wie diese schlussendlich auch zusammenspielen. Aus diesem Grund beleuchten wir nachfolgend gemeinsam die einzelnen Komponenten der neuen Storefront, beginnend mit den drei elementaren Schichten einer webbasierten Applikation und den verwendeten neuen Tools und Standards. Damit für dich nachvollziehbarer wird, weshalb manche Dinge plötzlich anders als bisher gewohnt laufen, will ich versuchen Brücken zu den verschiedenen Pendants aus Shopware 5 zu schlagen.

The three typical layers of a web application

Strukturschicht (Structure & Content)

Das Fundament eines Web-Frontends bildet die Strukturschicht in ihrer einfachsten Ausprägungsform bestehend aus statischem HTML Markup, aufgeteilt in logische oder inhaltsbezogene Abschnitte. Für die Realisierung höherer, technischer Anforderungen existieren sogenannte Template-Engines, die das Rendern von HTML Markup mit Hilfe von Vorlagen (Templates) übernehmen. Nichts Neues für jeden, der bereits mit einer früheren Version von Shopware gearbeitet hat.

Die wichtigsten Aspekte im Umgang mit Twig in der Storefront

Debugging — Ein simpler VarDump auf ein Objekt in der View konnte Smarty gehörig in die Knie zwingen. Bei Twig sieht das gänzlich anders aus — zum Glück! Dank der integrierten VarDumper-Komponente und dem DebugBundle von Symfony können fortan alle Variablen in der Storefront sorgenfrei ausgegeben werden:

// Ausgabe aller in der aktuellen View verfügbaren Variablen
{{ dump() }}
// Ausgabe einer oder mehrerer spezifischer Variablen
{{ dump(page.detail[, ...]) }}
Skalare Datentypen, Arrays sowie Objekte können mittels {{ dump() }} bequem debugged werden
// Bisher in Smarty
{s name='OrderColumnId' namespace='frontend/account/orders'}{/s}
// Twig
{{ 'account.orderItemNumber'|trans }}
// @Storefront/page/account/logout.html.twig
{% sw_extends '@Storefront/page/account/_page.html.twig' %}
// @Storefront/base.html.twig
{% sw_include '@Storefront/layout/meta.html.twig' %}
// Exemplarische Verwendung von "sw_icon" im Template
{% sw_icon 'marketing' style { 'color': 'success', 'size': 'fluid', 'pack': 'default' } %}
// Exemplarische Verwendung von "sw_thumbnails" im Template
{% sw_thumbnails 'confirm-shipping-current-image-thumbnails' with {
media: context.shippingMethod.media,
sizes: {
'default': '100px'
},
attributes: {
'class': 'confirm-shipping-method-image',
'alt': context.shippingMethod.media.translated.alt,
'title': context.shippingMethod.media.translated.title
}
} %}

Präsentationsschicht (Presentation)

In der heutigen Zeit ist ein Onlineshop ohne modern anmutendes, benutzerzentrisches Look & Feel unvorstellbar geworden. Die sogenannte Präsentationsschicht erlaubt es uns, den Look einer Applikation mittels CSS an das HTML Markup zu binden.

Der Preprozessor Umstieg: von LESS zu Sass

Wer schon mit Shopware 5 gearbeitet hat, der kennt bereits die Stylesheet-Sprache LESS. Bei Shopware 6 ist nun ein konsequenter Umstieg auf Sass erfolgt. Beim Vergleich von Frameworks, Sprachen oder Tools steckt der Teufel wie so oft im Detail — die bekanntesten CSS Preprozessoren (das sind Sass, LESS, Stylus, PostCSS) unterscheiden sich funktional betrachtet circa 20% voneinander, die restlichen 80% sind deckungsgleich. Zu behaupten Sass sei besser, schneller, toller als LESS wäre daher eine rein subjektive Aussage.

The Front-End Tooling Survey 2018 (Ashley Nolan)

Bootstrap 4: Source-Files nutzen und profitieren

Wie eben erwähnt, liegen die Source-Files von Bootstrap als Sass-Files vor. Es ist somit möglich, die darin definierten Variablen, Mixins und Functions für eigene Zwecke zu nutzen. Welche dies sind und wie sie man sie verwendet, kann der offiziellen Dokumentation entnommen werden.

Organisation ist die halbe Miete

Um auch die in einem Softwareprojekt omnipräsente Frage nach der Organisationsstruktur von Ordnern und Dateien geklärt zu haben, orientiert sich die neue Storefront grundsätzlich am sogenannten 7–1 Pattern, einem Organisationsmuster das sich im Sass Umfeld über die Zeit etabliert hat. Aufgeteilt in sieben getrennte Bereiche (bzw. Ordner) sind so diverse Verantwortlichkeiten logisch getrennt.

|– abstract/              # Helper die selbst keinen Output erzeugen
| |– _variables.scss # Sass Variablen
| |– _functions.scss # Sass Funktionen
| |– _mixins.scss # Sass Mixins
| |– _placeholders.scss # Sass Platzhalter
| … # Etc.
|
|– base/ # Boilerplate des Themes
| |– _base.scss # Basis Styles
| |– _reboot.scss # Reset/normalize
| … # Etc.
|
|– component/ # Widgets/Module/Komponenten Styles
| |– _alert.scss # Alerts
| |– _card.scss # Card
| |– _forms.scss # Formulare
| |– _icon.scss # Icons
| … # Etc.
|
|– layout/ # Globale Wireframe Styles
| |– _account-menu.scss # Account Menü
| |– _container.scss # Container
| |– _header.scss # Header
| |– _footer.scss # Footer
| … # Etc.
|
|– page/ # Seiten spezifische Stylesheets
| |– account/ # Account spezifische Files
| | |- _login.scss # Login spezifische Styles
| | |- _profile.scss # Profil spezifische Styles
| | |– … # Etc.
| |– checkout/ # Checkout spezifische Files
| | |– … # Etc.
| … # Etc.
|
|– skin/ # Skins
| |– shopware/ # Shopware Skin Files
| | |– … # Etc.
| … # Etc.
|
|– vendor/ # Einbinden und Konfigurieren von Vendoren
| |– _bootstrap.scss # Bootstrap
| |– _tiny-slider.scss # Tiny Slider
| … # Etc.
|
|– base.scss # Haupt-Datei mit Import aller Partials
|– variables.scss # Import aller Variablen

Verhaltensschicht (Behaviour)

Zu guter Letzt wird über die Struktur- und die Präsentationsschicht schließlich die Verhaltensschicht gestülpt. Auf dieser Ebene ist all das angesiedelt, das dem Anwender eine interaktive Bedienung ermöglicht. Im Falle einer Webapplikation übernimmt dies primär die Skriptsprache JavaScript, kurz JS.

document.addEventListener('Viewport/hasChanged', () => {
console.log('Viewport has changed');
});
import DeviceDetection from '../device-detection.helper';...
if(DeviceDetection.isTouchDevice()) {
console.log('This device is of type touch device');
}
import DomAccess from '../dom-access.helper';...
if(DomAccess.hasAttribute(element, 'attribute')) {
console.log('The attribute exists');
}
import DomAccess from '../dom-access.helper';...constructor(){
try {
this.el = DomAccess.querySelector(document, '.js-modal'));
...
} catch (e) {
// do nothing
}
}
import HttpClient from '../http-client.service';...this.client = new HttpClient(window.accessKey, window.contextToken);...const requestUrl = DomAccess.getAttribute(form, 'action');        
const data = FormSerializeUtil.serialize(form);
this.client.post(
requestUrl.toLowerCase(),
data,
this._onOffCanvasOpened.bind(this)
);

Webpack Module Bundler

Zu guter Letzt möchte ich noch kurz auf etwas eingehen, das für die Verwendung der genannten neuen Technologien aus verschiedenen Aspekten heraus essentiell ist. Während bei Shopware 5 noch Grunt als TaskRunner im Einsatz war um beispielsweise CSS und JS Code zu kompilieren, kommt Shopware 6 nun mit dem Module Builder Webpack im Schlepptau. Internationale Größen wie Airbnb, Trivago, Adobe, Slack und Co. setzen schon seit geraumer Zeit auf Webpack, welches sich mittlerweile langsam aber sicher zu einer “State of the art”-Technologie entwickelt hat.

  • webpack.dev.config.js — Hier finden sich Konfigurationen, die für Webpack im Modus “dev” oder “watch” gelten
  • webpack.hot.config.js — Konfigurationen, die explizit für den eingebauten Webpack HMR Modus gelten
  • webpack.prod.config.js — Speziell für den Produktionsmodus angepasste Konfiguration

Fazit

Viel ist geschehen seit Shopware 5, einiges hat sich grundlegend verändert und es wurde mit der Zeit gegangen. Für mehr Qualität, mehr Abgrenzung, mehr Möglichkeiten — auch in der Storefront. Dass dieser Umstand ein gewisses Maß an Umdenken erfordert, liegt in der Natur der Sache. Doch nur so ist es möglich, Shopware 6 und die damit zu realisierenden Projekte auf ein neues Level zu bringen. Der Markt entwickelt sich weiter und mit ihm die Anforderungen. Die neue Shopware 6 Storefront gibt dir und deinem Projekt alle Möglichkeiten an die Hand um auch künftig mit der Zeit gehen zu können.

--

--

Bachelor of Computer Science & Software Architect with a weakness for perfection and the awareness of human imperfection. Passionate mountain biker 🤘

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store