CSS und JavaScript in eine CMS-Seite oder Kategorie-Seite einbinden

Soll die Startseite oder eine kundenoptimierte Landeseite ein spezielles Design bekommen, muss ein eigenes CSS und ggf. JavaScript eingebunden werden. Dies ist mit einem XML-Code im Seiten-Layout möglich:
<reference name="head">
  <action method="addCss">
    <stylesheet>css/landing-page.css</stylesheet>
  </action>

 <action method="addJs">
   <script>custom/landing-page.js</script>
  </action>
</reference>
Dieser XML-Code produziert die folgenden Code-Zeilen im Head-Bereich:
<script type="text/javascript"
src="http://magento-trainer.de/magento/js/custom/landing-page.js">
</script>

<link rel="stylesheet" type="text/css"
href="http://magento-trainer.de/magento/skin/frontend/
 default/mytheme/css/landing-page.css" media="all" />
Zu beachten ist dass die relative Pfadangabe verschieden interpretiert wird: Während das JavaScript ist in das globale JS-Verzeichnis zu kopieren ist, gehört die CSS-Datei in das Theme-Verzeichnis.

7 Gedanken zu „CSS und JavaScript in eine CMS-Seite oder Kategorie-Seite einbinden“

  1. Vielleicht noch als Ergänzung:
    Der XML-Code kann beim Bearbeiten von Produkten, Kategorien und CMS-Seiten im Magento-Admin-Bereich eingestellt werden. Unter „Gestaltung“ gibt es hier den Punkt „Eigenes Layout-Update“, wo der hier aufgeführte XML-Code eingefügt werden kann.

    Es gibt übrigens auch eine Möglichkeit, JS-Dateien aus dem Skin-Verzeichnis einzubinden:

    skin_jsjs/landing-page.js

    1. Mit unter “Gestaltung” > “Eigenes Layout-Update” ist bei 1.7 „Design“ > „Eigene Gestaltung“ und hier dann „XML für Layoutänderung“ gemeint?

  2. Hallo. Danke für den wertvollen Tipp. Gibt es eine Möglichkeit auch eine CSS Datei einzubinden die außerhalb des Theme Verzeichnis liegt, bzw. kann man irgendwie einen absoluten Pfad angeben?

    1. Mit dieser im Sinne von Magento „sauberen“ Methode ist das nicht möglich. Diese Methode ist deshalb sauber, weil wenn die Option „CSS Zusammenfassen“ aktiviert wird, Magento alle so hinzugefügte CSS-Dateien zu einer kombiniert. Darüberhinaus besteht die Möglichkeit die Datei über den üblichen HTML-Tag in der entsprechenden phtml-Datei einzubinden.

Schreibe einen Kommentar

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