Magento 2 Twig Theme Vereinfacht Frontend Entwicklung

· magento · 3 Minuten Lesezeit

Frontend Entwicklung in Magento 2 vereinfachen mit einem kompletten Theme mit Twig. In diesem Beitrag beschäftige ich mich mit Frontend Entwicklung in Magento 2. Wir verfolgen das ambitionierte Ziel ein komplettes Theme für Magento 2 auf Basis von Twig aufzubauen.

Motivation

Eines der größten Schwierigkeiten mit Magento 2 ist aus meiner Sicht, dass Anpassungen im Frontend sehr aufwendig und damit teuer sind. Man benötigt wirklich sehr sehr viel Einarbeitung, um selbst triviale Änderungen im Frontend durchführen zu können. Für Frontend Entwickler, die andere Stacks gewohnt sind, ist das sehr mühsam und sogar teilweise unverständlich. Magento hat dies bereits erkannt und der Lösungsansatz heißt PWA. Neben Magento gibt es noch andere PWA-Lösungen, um diesem Problem zu begegnen. PWA kommt aber mit seinen ganz eigenen Vor- und Nachteilen.

Ich suche daher nach Möglichkeiten die Frontend Entwicklung in Magento 2 zu vereinfachen. Aus meiner Sicht würde ein komplettes Theme auf Twig Basis folgende Vorteile bieten:

  • Schneller und einfacher Änderungen im Frontend machen
  • Kein Änderungen an Layout XML nötig
  • Einfache includes von Partials
  • Twig statt Phtml
  • Kein Less
  • Eigene Build-Pipeline nutzbar, z.B Grunt mit SASS
  • Integration in Patternlab

Wenn man also ein Modul hätte, welches es ermöglicht das Frontend mit Twig aufzubauen, könnte man ganze Themes zu einem Bruchteil des bisherigen Aufwands zu integrieren.

Ein komplett eigenes Twig Theme – für Magento 2

Ich habe mir also die Mühe gemacht, das mal auszuprobieren und ein komplettes Theme mit Twig Templates zu bauen. Leider ist das nicht ganz so trivial. Es reicht nämlich nicht aus, die Template Engine zu tauschen. Theoretisch natürlich schon, man müsste alle existierenden Templates nach Twig konvertieren. Das sind in einer Standard Installation fast 1000 – ein ganz schöner Aufwand. Und selbst dann hat man noch nichts an Flexibilität gewonnen, weil die Struktur nach wie vor durch das Layout XML vorgegeben wird. Der Ansatz, für den ich mich entschieden habe besteht darin, das Ergebnis von ausgewählten Controller Actions zu ändern. Statt dem normalen Rendering-Prozess wird dann eine komplettes Twig Template zurück gegeben.

Durch eine Handvoll Filter und Functions wird eine Brücke zu Magento geschlagen, um auf Bestehende Funktion zuzugreifen. So wird es möglich gezielt einen Block oder einen Container an einer bestimmten Stelle auszugeben, oder einen Preis entsprechend zu formatieren.

Hier ein kleiner Auszug, um Containter zu rendern und den Inhalt der aktuellen CMS Seite:

{{ renderElement('content.top') }}
{{ renderElement('content') }}
{{ getBlock('cms_page').toHtml }}

Und ein weiteres kleines Beispiel für die Produkte im Warenkorb:

{% for item in customer.cart.items %}
{{ item.name }}({{ item.price|price|raw }})
{% endfor %}

Es ist also durchaus machbar ein komplettes Theme mit Produktkatalog, Kundenkonto und Checkout aufzubauen und dabei auf bestehende Funktionalität von Magento zurückzugreifen.

Magento 2 Produktkatalog mit Twig Theme

Wir befinden uns noch in der Experimentierphase, aber die ersten Ergebnisse sind schon sehr vielversprechend. Ich hoffe bald einen einsetzbaren Stand zu haben, um erste Projekte damit umsetzen zu können und dann mehr Flexibilität und Freiheit zu haben, um schneller und einfacher Kundenwünsche umsetzen zu können.

Share:
Zurück zum Blog