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

The three typical layers of a web application

Strukturschicht (Structure & Content)

Die wichtigsten Aspekte im Umgang mit Twig in der Storefront

// 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)

Der Preprozessor Umstieg: von LESS zu Sass

The Front-End Tooling Survey 2018 (Ashley Nolan)

Bootstrap 4: Source-Files nutzen und profitieren

Organisation ist die halbe Miete

|– 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)

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

  • webpack.base.config.js — Beinhaltet die Grundkonfiguration, die für alle verfügbaren Environments gelten
  • 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

--

--

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
Martin Schindler

Martin Schindler

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