FOL9000

Einer Magento-CMS-Seite eine zusätzliche CSS-Klasse oder neue Attribute zuweisen

von | Keine Kommentare

Für Magento-CMS-Seiten wird im Editor des Backends nur der Text geschrieben, der innerhalb des body-Tags und weiterer Elemente der Seitenstruktur landet. Den body-Tag selbst und die gesamte restliche Seitenstruktur (head, Header, Footer, Spalten, etc.) fügt Magento selbst hinzu. So praktisch das normalerweise ist: möchte man dem Body einer Seite eine spezielle CSS-Klasse oder ein zusätzliches Attribut zuweisen, geht dass deshalb erstmal nicht.

Magento sieht aber vor, dass für jede Seite Design und XML-Layout gesondert geändert werden können. Mit dem folgenden XML-Snippet kann für eine Magento-CMS-Seite eine zusätzliche Body-Klasse zugewiesen werden:

<reference name="root">
  <action method="addBodyClass"><classname>meine-zusaetzliche-css-klasse</classname></action>
</reference>

Einzugeben ist der XML-Code unter Design→Seiten Layout: XML für Layoutänderung

Für Attribute scheint es nichts entsprechendes zu geben. Schaut man sich einmal ein wenig um, werden deshalb Lösungen mit eigenen Extensions vorgeschlagen. Das ist mir zu umständlich und zu unübersichtlich. Wenn ich etwas simples wie die Zuweisung eines neuen Attributs für eine Seite irgendwo in einer Extension ‚versteckt‘ habe, kann ich schon voraussehen, dass ich irgendwann vergesse und übersehe, wie ich das genau gemacht habe. Mir ist eine Lösung lieber, bei der alles an einem Platz ist, selbst wenns mal nicht super-elegant ist. Auf die Dauer scheint mir das — ganz subjektiv — wartungsfreundlicher.

Viele werden ohnehin jQuery benutzen und in Magento 2 ist es das Default-JavaScript-Framework. Warum also kein kleines jQuery-Script direkt in den Text der CMS-Seite setzen? Dann hat man die Angaben zu zusätzlichen Attributen immer im Überblick und läuft nicht Gefahr, irgendwann mal was zu übersehen, was man vor Monaten mal irgendwo definiert hat.

Folgenden Code könnte man so im Text der CMS-Seite einsetzen:

<script>
jQuery(document).ready(function(){
  jQuery("body").attr("lari","fari");
  jQuery("body").attr("schubbi", '');
});
</script>

Die erste Zeile fügt das Attribut ‚lari mit dem Wert ‚fari‘ ein, die zweite Zeile ein leeres Attribut ’schubbi‘. Das Resultat sähe also so aus:

<body lari="fari" schubbi>

Muss man nicht nur Attribute, sondern auch die Klasse(n) ändern, wäre es für meinen Geschmack besser, das ebenfalls auf diese Weise zu erledigen (mit addClass oder removeClass und nicht gesondert in XML wie oben beschrieben. Dann wäre auch hier alles an einem Ort. Ist aber wieder Geschmackssache.

Noch zwei kleine Hinweise:

In der Quelltext-Ansicht in Chrome werden die mit jQuery eingefügten Attribute nicht angezeigt, im Quelltext der Developer-Tools aber schon.

Und: Google scheint das JavaScript nicht auszuführen. Auf diese Weise mit jQuery hinzugefügte Attribute werden von Google nicht erkannt.

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.