Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 18

Eine Einführung in Magentos Layout-XML: Magento-Layouts im Griff

    Eine Einführung in Magentos Layout-XML: Magento-Layouts im Griff

Magento besitzt ein sehr leistungsfähiges und flexibles Templating-System. Vielen Magento-Einsteigern fällt aber besonders der Umgang mit den dabei zum Einsatz kommenden Layout-XML-Dateien nicht leicht. Dieser Artikel vermittelt das Grundwissen, um Layout-Updates in eigenen Magento-Projekten umsetzen zu können.

Alle modernen Webanwendungen bieten Template-Systeme an, durch die sich die Programmlogik und die Darstellung von Inhalten trennen lassen. Dabei kommen die verschiedensten Systeme zum Einsatz. Ein prominenter Vertreter ist Smarty, das von vielen Open-Source-Projekten eingesetzt wird. Bei Magento [1] wird PHP direkt als Template-Engine verwendet. Alle Systeme haben gemeinsam, dass die HTML-Blöcke für die Darstellung in einzelne Template-Dateien ausgelagert sind, in denen die Applikation die Platzhalter durch die Inhalte ersetzt.

Die Programmlogik setzt die Template-Blöcke so zusammen, wie sie für den jeweiligen Fall gebraucht werden. Die meisten Webentwickler haben damit reichlich Erfahrung.

Grundsätzliches zu Magento-Themes

Bei Magento liegen die Template-Dateien in „app/design/frontend/default/THEME/template“. „THEME“ wird dabei durch das in der Konfiguration festgelegte Layout-Theme ersetzt, standardmäßig ist das „default“. Änderungen sollten Sie nie direkt in „default“ durchführen, da die Anpassungen beim nächsten Magento-Update überschrieben werden könnten. Sie sollten also ein neues Theme anlegen, indem Sie „app/design/frontend/default/default“ nach „app/desgn/frontend/default/meintheme“ kopieren und im Admin-Interface unter System > Konfiguration > Gestaltung > Themes > Standard „meintheme“ eintragen.

Soweit gibt es noch keinen Unterschied zu anderen Template-Systemen, bei denen direkt im Code steht, welche Datei zum Formatieren der Ausgabe verwendet wird. Das kann in etwa so aussehen:

Direkte Verknüpfung von Code und Template

$template = 'templates/product/list.tmpl';
$html = $this->process($template);

Listing 1

Jetzt zu der Besonderheit bei Magento: Im Code steht statt des Namens der Datei ein Platzhalter für das Template.

Code in Magento

$blockName = 'product.list';
$html = $this->getChildHtml($blockName);

Listing 2

Welche Datei für den Platzhalter verwendet werden soll, wird durch den Inhalt der Layout-XML-Dateien bestimmt.

Ein Layout-XML-Block in Magento

<block type=“catalog/product_list“ name=“product.list“ template=“catalog/product/list.phtml“ />

Listing 3

Magento unterscheidet also zwischen Templates (PHP-Dateien mit der Endung .phtml) und den Layout-Dateien mit dem XML.

Das „type“-Attribut legt fest, welche Klasse den Block rendert. Vor dem Slash wird das Modul angegeben, dahinter der Pfad innerhalb des Blockverzeichnisses des Moduls. So eröffnen sich zahlreiche Möglichkeiten:

  • Ändern der zu verwendenden Template-Dateien
  • Ändern der Ausgabeposition von HTML-Blöcken
  • Hinzufügen und Entfernen von HTML-Blöcken
  • Daten zu der Ausgabe von anderen Modulen hinzufügen oder entfernen (z. B. Links in der Haupt-Navigation)
  • Hinzufügen von CSS- und JavaScript-Dateien
  • Ändern der Klasse für den Code-Block
  • Anpassung einzelner Kategorien und CMS-Seiten im Backend

Die Anpassungen sind möglich, ohne dass Sie Core-Code verändern müssen. Bei konsequenter Nutzung bleibt das System so trotz weitreichender Anpassungen upgradefähig.

Bitte beachte unsere Community-Richtlinien

3 Reaktionen
TB

Das beste Tutorial das ich bis jetzt im Netz gefunden habe *daumen hoch*

Till Heß

Super Artikel! Hätte es den doch gegeben als ich das erste mal die xml Datein von Magento angepasst habe ;-)

mathiasschopmans

Super! Endlich mal ein guter Einstieg. ;)

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst