Motivation
Kann man Twig als Template Engine in Magento 2 verwenden, um die Frontend Entwicklung zu vereinfachen? Diese Frage kommt immer wieder auf, weil leider Anpassungen im Frontend von Magento 2 relativ aufwendig sind. Besonders Einsteigern fällt es schwer selbst kleine Änderungen zu machen. Auch PHP Entwickler z.B. aus dem Symfony Kontext fällt der Einstieg in Magento 2 deshalb nicht leicht. Sie sind andere Frameworks und deutlich einfachere Template Umgebungen gewöhnt. Ich schaue mir mal an, was man tun kann, um hier Abhilfe zu schaffen.
PHTML Templates in Magento 2
Die Templates in Magento sind standardmäßig PHTML Templates. Dabei handelt es sich um einen Mischmasch von HTML mit eingebetteten PHP Anweisungen. Hier ist ein Beispiel eines solchen Templates. Man sieht alle Variablen werden über PHP Anweisungen in das HTML gerendert.
Was ist Twig?
Twig ist eine Template-Engine für PHP. Sie erfreut sich großer Beliebtheit, weil sie recht einfach zu lesen und zu schreiben ist. Frameworks wie z.B. Symfony setzen auf Twig. Das obige Beispiel würde in Twig in etwa so aussehen:
{% if block.getPreviousImageUrl || block.getNextImageUrl %}
{% if block.getPreviousImageUrl %}
« {{ __(‘Prev’) }}
{% endif %} {% if block.getNextImageUrl %}
{{ __(‘Next’) }} »
{% endif %}
{% endif %}Das ist schon irgendwie lesbarer als die PHTML Templates von Magento. Und das liegt nicht nur daran, dass das Syntaxhighlighting anders ist.
Twig in Magento2 nutzen
Um zu verstehen, wie Twig in Magento als Template Engine verwendet werden kann, müssen wir uns zunächst anschauen, wie Magento die PHTML Templates rendert. Das Rendering findet in der Funktion render der Klasse \Magento\Framework\View\TemplateEngine\Php statt.
public function render(BlockInterface $block, $fileName, array $dictionary = [])
{
ob_start();
try {
$tmpBlock = $this->_currentBlock;
$this->_currentBlock = $block;
extract($dictionary, EXTR_SKIP);
include $fileName;
$this->_currentBlock = $tmpBlock;
} catch (\Exception $exception) {
ob_end_clean();
throw $exception;
}
/** Get output buffer. */
$output = ob_get_clean();
return $output;
}Verwendet wird das ganze in \Magento\Framework\View\Element\Template::fetchView. Das ist genau die Stelle wo die entsprechende Template Engine aus dem Pool geladen und aufgerufen wird. Alles was man tun muss ist also eine Klasse bereitstellen, die die Funktion render des Interfaces \Magento\Framework\View\TemplateEngineInterface implementiert. Es existieren auch bereits Extensions für Magento 2, die genau das tun, z.B.: https://github.com/SchumacherFM/Magento2-Twig. Damit wird es dann möglich alternativ zu PHTML Templates auch Twig Templates zu verwenden.
Kann man damit jetzt ein komplettes Magento Theme bauen?
Das Grundproblem ist leider, dass es nicht damit getan ist die Template Engine zu tauschen, um wirklich einen schnelleren und einfacheren Workflow in der Frontend-Entwicklung zu haben. Ein wesentlicher Faktor ist ebenfalls die Layout Struktur von Magento welche es für Einsteiger sehr schwer macht, das richtige Template überhaupt erst zu finden. Eine Idee wäre wohl, das gegen eine Leichtgewichtige Sammlung von Twig Templates zu tauschen, um auch die Möglichkeit von includes voll ausschöpfen zu können. Das Thema werde ich mir dann beim nächsten Mal anschauen.