Smarty-Modifier: “myClass” für xt:Commerce

Manchmal braucht man eine individuelle CSS-Klasse für einige Elemente, um sie im Template über das Stylesheet direkt “ansprechen” zu können. Da man die HTML-Ausgabe der meisten Template-Tags nicht ohne Weiteres ändern kann, ist für diese Aufgaben meistens der “replace”-Modifier geeignet. Das wird bloß manchmal etwas unübersichtlich, und außerdem können so einige Fehler (wie Beispielsweise ein doppelte class-Attribute) nicht automatisch abgefangen werden

 

Kurzbeschreibung

  • Erweitert beliebige Smarty-Tags um die gewünschte CSS-Klassenbezeichnung
  • Wenn das Smarty-Tag mehrere (verschachtelte) HTML-Tags ausgibt, wird nur dem äußeren Tag die Klasse zugewiesen
  • Hat der auszugebende HTML-Code bereits eine CSS-Klasse, wird kein zusätzliches class-Attribut erzeugt
  • Der Code wird außerdem daraufhin untersucht, ob die gewünschte Klasse nicht vielleicht schon zugewiesen ist
  • Getestet mit: xt:Commerce 3.04, SP 2.1 - Modifier dürfte aber unabhängig von der Version sein

 

Download

» myClass_10.zip (Version 1.0, 21. August 2007)

 

Kurzanleitung

  1. Legen Sie einen zusätzlichen PlugIn-Ordner für Ihr Template fest
    (Eine Anleitung dazu finden Sie » hier …)
  2. Speichern Sie die entpackte Datei in diesem Ordner ab
  3. Danach kann der Modifier im Template benutzt werden

 

Code-Beispiele 


// 1) Hinzufügen der kompletten CSS-Markierung bei einfachen Tags

// Ausgabe von {$IRGENDWAS}
<img src="http://xy.de/img/bild.jpg" />
// Ausgabe von {$IRGENDWAS|myClass:'test'}
<img class="test" src="http://xy.de/img/bild.jpg" />

// 2) Keine doppelten class-Attribute

// Ausgabe von {$IRGENDWAS}
<img class="bild" src="http://xy.de/img/bild.jpg" />
// Ausgabe von {$IRGENDWAS|myClass:'test'}
<img class="test bild" src="http://xy.de/img/bild.jpg" />

// 3) Keine doppelten Klassen-Namen

// Ausgabe von {$IRGENDWAS}
<img class="test" src="http://xy.de/img/bild.jpg" />
// Ausgabe von {$IRGENDWAS|myClass:'test'}
<img class="test" src="http://xy.de/img/bild.jpg" />

// 4) Bei verschachtelten Tags wird das äußere geändert

// Ausgabe von {$IRGENDWAS}
<a href="#"><img src="http://xy.de/img/bild.jpg" /></a>
// Ausgabe von {$IRGENDWAS|myClass:'test'}
<a class="test" href="#"><img src="http://xy.de/img/bild.jpg" /></a>