Layout XML kann im Backend von Magento in Kategorien, Produkten und CMS-Seiten verwendet werden. XML-Code wird jeweils in das Feld Custom Layout Update im Register Design eingegeben. Das eingegebene Layout-XML-Code gilt dann für das bearbeitete Produkt, die Kategorie oder die CMS-Seite.
Zum Bearbeiten des globalen Layouts sollte in Magento die eigene local.xml im Layout-Verzeichnis app/design/frontend/default/mytheme des aktuellen Themes mytheme angelegt und bearbeitet werden. Alle Befehle müssen sich innerhalb des Knotens layout befinden:
<?xml version="1.0"?> <layout version="0.1.0"> ... </layout>
Im Backend der der Layout-XML-Code ohne diesen Knoten verwendet.
In app/design/frontend/base/default/layout/page.xml ist der Block mit dem Namen head definiert und gibt die Inhalte des HTML-Bereichs <head> aus. Mit der Block-Methode addItem() kann diesem Bereich ein JavaScript oder CSS hinzugefügt werden. Die Methode erwartet zwei Parameter: Pfad-Typ und den Dateinamen relativ zum Pfad-Typ.
Vordefinierte Pfad-Typen:
- js: js/*.js
- skin_js: skin/*/*.js
- js_css: js/*.css
- skin_css: skin/*/*.css
Quelle: Mage_Page_Block_Html_Head::getCssJsHtml()
Es sind noch weitere Alias-Methoden definiert, die jeweils addItem() mit einem bestimmten Pfad-Typ aufrufen. Folgende Alias-Methoden sind in Mage_Page_Block_Html_Head vorhanden:
- addCss: ruft addItem mit dem type=skin_css
- addJs: ruft addItem mit dem type=js
- addCssIe: ruft addItem mit dem type=skin_css und dem parameter IE
- addJsIe: ruft addItem mit dem type=js und dem parameter IE
Die local.xml, die dem HTML-Bereich <head> custom.css aus dem Verzeichnis skin/frontend/default/mytheme/css hinzufügt, würde wie folgt aussehen:
<?xml version="1.0"?>
<layout version="0.1.0">
<default>
<reference name="head">
<action method="addItem">
<param1>skin_css</param1>
<param2>css/custom.css</param2>
</action>
</reference>
</default>
</layout>
Alternativ kann die Alias-Methode addCss verwendet werden:
<?xml version="1.0"?>
<layout version="0.1.0">
<default>
<reference name="head">
<action method="addCss">
<param1>css/custom.css</param1>
</action>
</reference>
</default>
</layout>
Die beiden Layout-XML-Codes führen zum gleichen Ergebnis; Sie fügen dem HTML-Bereich <head> auf allen von Magento generierten Seiten die folgende Zeile hinzu:
<head> ... <link rel="stylesheet" type="text/css" href="http://domain.tld/skin/frontend/default/mytheme/css/custom.css" media="all" /> ... </head>
Die Alias-Methode addCssIe würde diese Zeilen erzeugen:
<head> ... <!--[if IE]> <link rel="stylesheet" type="text/css" href="http://domain.tld/skin/frontend/default/mytheme/css/custom.css" media="all" /> <![endif]--> ... </head>
Layout-Handles definieren den Kontext, in dem die Layout-Befehle gelten sollen. Das in den Beispielen verwendete Layout-Handle default bezieht sich auf alle Seiten. Neben diesem werden die folgende Handles bei Magento mit zusätzlichem Layout-Code erweitert:
- catalog_product_view – Alle Produkt-Detailseiten
- catalog_category_default – Alle Kategorien
- catalog_category_layered – Alle Ankerkategorien
- cms_index_defaultindex – Startseite
Mit dem folgenden Layout-XML-Code kann allen Produkt-Detailseiten ein JavaScript aus dem Skin-Verzeichnis des aktuellen Themes mytheme hinzugefügt werden:
<?xml version="1.0"?>
<layout version="0.1.0">
<catalog_product_view>
<reference name="head">
<action method="addItem">
<param1>skin_js</param1>
<param2>js/custom.js</param2>
</action>
</reference>
</catalog_product_view>
</layout>
Das Ergebnis wäre die folgende Zeile im HTML-Bereich <head> auf jeder Produktseite:
<head> ... <link rel="stylesheet" type="text/css" href="http://domain.tld/skin/frontend/default/mytheme/js/custom.js" media="all" /> ... </head>