TYPO3 Ländermenü mit CSS Sprites

Im Blogbeitrag auf webstandard.kulando.de „CSS Sprite – Ladegeschwindigkeit optimieren und HTTP-Requests verringern“ habe ich beschrieben, wie man die Ladegeschwindigkeit durch den Einsatz von zusammengefügten Bildern optimieren kann. Diesen Quell-Code nehmen wir als Ausgangsbasis um die Länder- oder Sprachauswahl in TYPO3 umzusetzen.

Sprachen in TYPO3 anlegen

In TYPO3 müssen zuerst die verschiedenen Sprachen als Datensätze auf der Rootebene angelegt werden. Wir verwenden hier den Single-Tree-Ansatz für die Sprachwahl, nachlesen kann man das unter: http://typo3.org/documentation/tips-tricks/multi-language-sites-in-typo3 (Englisch).

Für das Tutorial habe ich zu der default-Sprache Englisch noch 4 weitere Sprachen eingerichtet. Die Bezeichner des Menüs legen wir im root-template in den Typoscript-Constants an:

text {
 lang0 = Groß Britannien
 lang1 = Italien
 lang2 = Deutschland
 lang3 = Frankreich
 lang4 = Spanien

 langId0 = gb
 langId1 = it
 langId2 = de
 langId3 = fr
 langId4 = es
}

Zudem müssen einige Parameter im Typoscript-Setup für die richtige Ausgabe der Sprache eingerichtet werden.

#default-Sprache Groß Britannien (englisch)
config {
 uniqueLinkVars = 1
 linkVars = L(1-4)
 sys_language_uid = 0
 sys_language_overlay = 1
 sys_language_mode = content_fallback
 language = en
 locale_all = en_GB.UTF-8
 htmlTag_langKey = en
}

Desweiteren müssen dann für die weiteren Sprachen Typoscript-Conditions im Setup angelegt werden.

#Italien
[globalVar = GP:L = 1]
config {
 htmlTag_langKey = it
 sys_language_uid = 1
 language = it
 locale_all = it_IT
}
# Überschreiben des aktuellen Menüpunktes, wenn Sprache ausgewählt - muss natürlich aufs eigene System angepasst werden
page.10.subparts.languageMenu.1.ACT.linkWrap = <strong class="flags" id="{$text.langId1}"> |</strong>
[global]

#Deutschland
[globalVar = GP:L = 2]
config {
 htmlTag_langKey = de
 sys_language_uid = 2
 language = de
 locale_all = de_DE
}
page.10.subparts.languageMenu.1.ACT.linkWrap = <strong class="flags" id="{$text.langId2}"> |</strong>
[global]

#Frankreich
[globalVar = GP:L = 3]
...
[global]

#Spanien
[globalVar = GP:L = 4]
...
[global]

Länderauswahl mit Typoscript erstellen

Das Menü ist eine Spezialform vom Typ „language“. An das HMENU müssen die Web-Site-Sprache IDs bei value eingetragen werden (die default-Sprache 0 & die weiteren Sprach-IDs die angelegt wurden, bzw. angezeigt werden sollen). Hier das Typoscript im Ganzen:

lib.flagmenu = HMENU
lib.flagmenu {
 #Spezialform von HMENU - language
 special = language
 #Web-Site-Sprache IDs der zu verwendenden Datensätze
 special.value = 0,1,2,3,4

 1 = TMENU
 1 {
  wrap = <ul class="flagmenu">|</ul>
  noBlur = 1
  NO {
   #die Bezeichner werden mithilfe der Konstanten neu generiert
   #der Optionsplit "||" trennt die Menüpunkte voneinander
   stdWrap.cObject = TEXT
   stdWrap.cObject.value = {$text.lang0} || {$text.lang1} || {$text.lang2} || {$text.lang3} || {$text.lang4}

   allWrap = <li>|</li>
   #zu den Links werden Parameter über die dataWrap Funktion eingefügt – die Klasse „flags“ sowie die eindeutige Link-ID
   ATagParams.dataWrap = class="flags" id="{$text.langId0}"| || class="flags" id="{$text.langId1}"| || class="flags" id="{$text.langId2}"| || class="flags" id="{$text.langId3}"| || class="flags" id="{$text.langId4}"|
  }

  #Aktiver Zustand
  ACT < .NO
  ACT {
   allWrap = <li class="active">|</li>
   #aktive Sprachen werden nicht verlinkt
   doNotLinkIt = 1
   #der Bezeichner wird mit strong gewrappt
   linkWrap = <strong class="flags" id="{$contentpage.langId0}">|</strong>
  }

  #Spezialfall – wenn Übersetzung nicht vorhanden
  #die Generierung des Menüpunktes wird „entfernt“
  USERDEF1 < .NO
  USERDEF1 {
   #keinen Wrap
   allWrap = |
   #Bezeichner auf leer setzen
   stdWrap.cObject.value =
   #keinen Link erzeugen
   doNotLinkIt = 1
  }
 }
}

Das fertige Menü könnte so aussehen

Fazit:

Für ein Sprachauswahl bietet TYPO3 über die Spezialform des HMENUs mittlerweile eine gute Möglichkeit per Typoscript ein Menü zu generieren. Es sind keine zusätzlichen PHP-Skripte oder Extensions mehr nötig. Durch CSS und Optionsplit im Typoscript kann man auch verschiedene Flaggen zu den Links einfügen, die auch auf Ladezeit der Website optimiert sind.

Dieser Artikel ist die Kurzform meines Original-Tutorial aus dem TYPO3-Magazin TY-MA 03. Im Artikel sind auch einige Tipps zur Einrichtung der Sprachen im TYPO3 Backend beschrieben.
Das TYPO3-PDF-Magazin kann man direkt auf http://ty-ma.de bestellen.