JavaScript und CSS über das Layout-XML-Code hinzufügen

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>
Dieser Beitrag wurde unter Entwicklung veröffentlicht. Setze ein Lesezeichen auf den Permalink.

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *