Shopware 6 hat ist definitiv eine stärkere Veränderung als die beim Update von Shopware 4 auf Shopware 5. Während man hier von einem Update gesprochen hat, das vergleichsweise einfach von der Hand geht handelt es sich vom Sprung der Version 5 auf die 6er Version um eine Migration.
Und von Migrationen spricht man sonst nur, wenn man das System komplett wechselt. Sprich wenn man beispielsweise von Magento oder WooCommerce auf Shopware umsteigt. Man sieht also schon an den Begriffen dass definitiv mehr passiert sein muss.
Aber was ist dieses mehr? Im folgenden habt ihr eine kleine Liste mit den wichtigsten Änderungen, die euch bei Shopware 6 erwarten:
– Twig statt Smarty
– SASS & Boostrap statt LESS
– API first
– Neues Backend
Das ist also einiges. Ich würde sagen man erkennt Shopware eigentlich nur noch am Frontend, wo alles ungefähr immer noch wie beim alten Responsive Theme aussieht.
Neues in Shopware 6 – Twig statt Smarty
Seit Shopware 6 wird für den Aufbau des Themes unter anderem Twig verwendet. Twig ist vergleichbar zu Smarty und ersetzt dieses.
Schauen wir uns hier mal ein paar Beispiele an, wie Twig verwendet werden kann:
1.1 Twig-Beispiel: Text auf eine bestimmte Zeichenlänge beschneiden:
{{ 'Dieser Text ist länger als 12 Zeichen' | truncate(12) }}
Links sehen wir einen Text. Der Text ist mit Leerzeichen wenn ich mich nicht verzählt habe 37 Zeichen lang. Ganz sicher ist er aber länger als 12 Zeichen. Mit dem Befehl truncate(12) sagen wir nun, dass der Text auf 12 Zeichen gekürzt werden soll. Das Ergebnis wäre als in diesem Fall die Ausgabe des Texts: „Dieser Text i“
Was wir also bisher erkennen ist, dass Twigg innerhalb von insgesamt 4 geschweiften Klammern verwendet wird. Auf der linken Seite werden die Inhalte eingetragen und rechts neben dem Trenner kommt eine Anweisung was damit gegebenenfalls gemacht werden soll.
1.2 Twig-Beispiel: Ein Text soll in Großbuchstaben ausgegeben werden
{{ 'irgendein Text' | upper }}
Mit dem Befehl upper können wir den Text in Großbuchstaben ausgeben lassen, das Ergebnis wäre also: IRGENDEIN TEXT. Normalerweise würde man für so etwas eher CSS verwenden, aber wo neue Möglichkeiten sind, ergeben sich auch neue Ideen diese anzuwenden.
1.3 Twig Beispiel: Dateien erweitern
Wer in seinem (Child-) Theme eine vorhandene Datei aus dem Parent Theme erweitern möchte kann den folgenden Twig Code verwenden:
{{% sw_extends 'storefront/layout/header/dateiname' %}}
Der genau Pfad ist natürlich davon abhängig, von welchem Theme die erweiterte Datei stammt und in welchem Ordner sie genau liegt.
1.4 Twig Beispiel: Einen Block erstellen
Wenn ihr den Logo Block erweitern möchtet könnt ihr das mit folgendem Code erledigen:
{{% block layout_header_logo %}}
{{ parent() }}
neuer Inhalt
{{% endblock %}}
Man kopiert also den Block ohne seinen eigentliche Inhalt und fügt stattdessen {{ parent() }} um die Inhalte anzuzapfen wie bei einer Tankstelle.
Neues in Shopware 6 – SASS & Bootstrap statt LESS
Jeder der LESS kennt sollte auch wissen was SASS ist. Im Grunde ist es LESS sehr ähnlich wird aber von viel mehr Leuten verwendet. Ich selber kenne LESS eigentlich nur aus dem Shopware Universum. Viele die sich in LESS eingearbeitet haben, müssen sich nun umstellen – der Vorteil ist aber wie gesagt dass es weiter verbreitet ist und man daher auch mehr hilfreiche Infos und Anbieter finden wird.
Bootstrap wurde interessanterweise auch schon in dem einzigen Responsive Theme, was für Shopware 4 entwickelt wurde verwendet und hat ebenfalls viele Fans und Anwender.
Neues in Shopware 6 – API First
Mit Shopware 6 haben es sich die Schöppinger zur Aufgabe gemacht das System so connectable wie möglich zu entwickeln. Ein Beispiel: Man kann z.B. seinen ganzen Produkt-Stream über die API bei Instagram einspielen.
Shopware 6 Infos – Die Break Points
Die Break-Ponts der min-width Werte bei Shopware 6 sind folgendermaßen:
XS: 0
S: 576px
M: 768px
L: 992px
XL: 1200px
Was noch:
– Snippets > Datei für Theme Infos
– die Datei base.html.twig ist das Gegenstück zur index.tpl
– {{ dump() }} – gibt Infos aus
– Die Textbausteine sind jetzt bei Snippets (Einstellungen > Snippets > auf Sprache klicken)