Erste Schritte: Templating in Magento 2

An einem nachkarnevalistischen Freitag, in dem in Köln nix los ist und scheinbar auch bei meinen Kunden nicht, da ich meinen E-Mail-Eingangsordner anstarre und er einfach nur zurückstarrt, habe ich die Leerzeit zur Lehrzeit umgewandelt und endlich einmal Magento 2 installiert. (https://github.com/magento/magento2)

Und – bevor ich in andere Tiefen vordringe – wollte ich mir als allererstes das neue Templating ansehen.

Wo sind die Dateien?

Fündig wurde ich auf altbekannten Pfaden.

app/design/frontend/default 

Da sind sie dann auch, die Theme-Verzeichnisse: blank, demo (so heißt das ’neue‘ default-Theme), demo_blue, iphone und modern. Im Inneren sehen sie anders aus – aber dazu später mehr.

Und wie sieht das im Backend aus?

Hier gibt es zwei neue Wege zum Konfigurieren der Templates. Zum einen – ebenfalls auf altbekannten Pfaden – unter
System->Conguration->General->Design->Design Theme
Hier findet die Auswahl des Themes statt. Und im Gegensatz zu Magento 1 muss man nicht wissen, wie sie heißen, Magento weiß das jetzt für einen und bietet die Themes im Drop-Down an:



Schaut man sich – auch das gibt es noch – die Template-Hints an, dann sehen die Pfade nun anders aus:



In Try-and-Error-Manie wollte ich nun ein eigenes Theme erstellen. Erstmal fange ich ganz harmlos damit an, das Basis-CSS File ’styles.css‘ zu verändern.

Hierzu habe ich einen neuen Ordner angelegt:

app/design/frontend/default/mmtheme

Und in diesem – die neue – Konfigurationsdatei für Themes hinterlegt, die ‚theme.xml‘:

<design>
    <package code="default">
        <title>Default</title>
        <theme version="2.0.0.0" code="mmtheme" parent="demo" featured="1">
            <title>MM Theme</title>
            <requirements>
                <magento_version from="2.0.0.0-dev1" to="*"/>
            </requirements>
            <media>
                <preview_image>media/preview_image.jpg</preview_image>
            </media>
        </theme>
    </package>
</design>

Fernab davon, dass hier gesagt wird, wie das Theme heißt, und auf welchem es basiert (zum fallbacken), wird hier ein Image angegeben – das ist dafür da, um an einer anderen Stelle im Backend angezeigt zu werden, nämlich dort, wo auch Themes verwaltet werden (System->Design->Editor)

Aber erstmal freut es mich, dass mein Theme nun unter

System->Design->Themes

zu sehen ist:



Ich lege in meinem Theme-Ordner nun einen css-Ordner an und kopiere in diesen das styles.css und ändere es (geringfügig, geht ja nur um das Wissen, ob es klappt).



Es gibt keinen Skin-Ordner mehr. Alle Dateien, die „nach außen“ dringen dürfen, werden in einem neuen Ordner angelegt. Dem „pub“ Verzeichnis. Aber nicht vom Entwickler werden sie dort angelegt, sondern von Magento automatisiert.

In dem Moment, in dem ich nun im Backend mein neuens Theme, das nun auch in der Drop-Down-Liste auftaucht unter System->Conguration->General->Design->Design Theme auswähle, generiert Magento ein neues Verzeichnis unter „pub“.

pub/media/theme/static/frontend/default/mmtheme/

Das ist nun wirklich neu. Das CSS-File, wird nun hier veröffentlicht:

pub/media/theme/static/frontend/default/mmtheme/en_US/css/styles.css

In diesem Verzeichnis hat man dann nix zu suchen. Alles, was an Änderungen im app/design/frontend/default/mmtheme-Verzeichnis vorgenommen wird, wird hier von Magento automatisch gepublisht. Das ganze nennt sich nun „Statische Dateien“, „Static Files“.

Naja, ganz so automatisch nicht. Denn meine neuerlichen Änderungen im CSS-File waren erstmal völlig unwirksam. Diese werden (zumindest zur Zeit noch?) nur wirksam, wenn der Developer Mode an ist. Hierzu kann man in der neuen Doku von Magento 2 lesen:

„However, in order to keep optimal performance, an exception for the scheme above is implemented: modified files that are referenced in CSS only, are re-published only if Magento Developer Mode is turned on.“

Der einfache, altbekannte, Anschaltweg ist nicht mehr in der index.php zu finden, sondern in der „app/bootstrap.php“, Zeile 90:

     //if (isset($_SERVER['MAGE_IS_DEVELOPER_MODE'])) {
        Mage::setIsDeveloperMode(true);
    //}

Ihn hier enabled, wurde tatsächlich meine Änderung im CSS-File wirksam.

Und die Images?

Alles Images, die im CSS-File nicht absolut angegeben werden, werden, sofern im eigenen oder im „Mutter“-Theme vorhanden, von Magento eingesammelt und in den Image-Folder kopiert. Ich hatte in meinem CSS z.B. die „bkg_body.gif“ entfernt und diese ist tatsächlich nicht im Image-Folder zu finden.

pub/media/theme/static/frontend/default/mmtheme/en_US/images/



Und nun wollte ich wissen, ob’s denn die local.xml noch tut. Also habe ich eine angelegt und ein „test.css“ – hinzugefügt.

In dem Moment wurde die styles.css ignoriert und nur die test.css interpretiert. Also habe ich irgendwas an dem neuen Fallback noch nicht verstanden. Denn nun band ich meine styles.css und die test.css ein und alles sah aus, wie gewünscht:

<layout version="0.1.0">
    <default>
        <reference name="head">
            <action method="addCss"><file>css/styles.css</file></action>
            <action method="addCss"><file>css/test.css</file></action>
        </reference>
    </default>
</layout>

Ich habe irgendwo gelesen oder gehört, dass das neue Fallbackprinzip ein Endlos-Fallback vorsieht, so dass man seinem Theme ein Untertheme names „Frühling“ hinzufügen kann, in dem widerum „Ostern“ und „Pfingsten“ zu finden sein könnten und hier wiederum „Ostersonntag“ und „Karfreitag“ uswusf…. Das Grundprinzip hier scheint dasselbe gelbieben zu sein. Template- und Layout-Files und Skin (nun Static)-Files können in den Unterthemes verändert werden und bei Nichtvorhandensein, wird auf das nächst höhere Theme zurückgegriffen.

Nun da ich zwar weiß, dass die local.xml noch irgendwas kann, will ich mir dennoch andere Updates ansehen. Denn wo kommen die ganzen anderen Verzeichnisse in meinem pub-Folder her?

Ich nehme mir den Folder „Mage_Page“ vor. Der irgendwie vertraut klingt…

Es gibt kein „base“ Verzeichnis mehr. So. Alle (Frontend) Template- und Layout-Files, die zu Mage_Page gehören liegen nun an einer recht logisch anmutenden Stelle:

app/code/core/Mage/Page/view/frontend/

In dieser findet sich keine page.xml mehr, sondern eine layout.xml.

Die Syntax in diesen Layout-Files hat sich so halbwegs grundlegend geändert, dazu aber ein andermal mehr. Nur soviel, dass z.B. aus

<block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">

dies hier geworden ist:

<block type="Mage_Page_Block_Html" name="root" output="1" template="3columns.phtml">

Ich nehme mir also jene layout.xml Datei und kopiere sie in meinen neu angelegten Mage_Page Folder in meinem Theme:

/app/design/frontend/default/mmtheme/Mage_Page/layout.xml 

Es gibt wohl auch eine Änderung in der Block-Logik, aber auch dazu ein andermal mehr…

Zum Testen entferne ich einfach mal die Breadcrumb:

 <block type="Mage_Page_Block_Html_Breadcrumbs" name="breadcrumbs" as="breadcrumbs"/>

Und juhu, es klappt.

Zum nächsten Test kopiere ich die 3columns.phtml in meinen Mage_Page Folder, kopiere vorher die Breadcrumb wieder in mein layout-File und verschiebe nun die Breadcrumb in den Content – und auch das klappt:



So. Und nun werfe ich einen Blick in meinen E-Mail-Eingangsordner und wende mich nun wieder Magento 1 Dingen zu…. und freue mich, mich irgendwann weiter zu graben in Magento 2…

Hinterlasse einen Kommentar

Kontakt
E-Mail: office@neoshops.de
Tel.: +49 [0]151 7000 7107
Carmen Bremen
Magento Certified Developer
Magento Certified Solution Specialist
Magento Certified Frontend Developer
Magento Freelancer


Magento Certified Developer Magento Certified Solution Specialist Magento Certified Frontend Developer



Magento Stammtisch Köln
Magento Stammtisch Köln
Der nächste Kölner Magento Stammtisch findet statt am 29. April 2020. (Xing Event) Wer Interesse hat, kann sich in die Stammtisch-Gruppe auf Xing eintragen, ich sende eine Rund-E-Mail mit Details kurz vor dem Event!

Kontakt

Carmen Bremen.

In: Xing
In: Skype
In: Twitter
In: Google+
Per: Formular
Innermail: Office (t) neoshops.de
In Köln: In der Lößbörde 1, 50859 Köln
Per Handy: +49 [0]151- 7000 7107

Letzte Beiträge