Weitere Flaggen im Template definieren

Weitere Flaggen im Template definieren

Alle Templates beinhalten standardmäßig nur zwei Flaggen für deutsch und englisch. Möchte man seinen Shop um weitere Sprachen erweitern, so kommt man um eine Anpassung des CSS-Codes nicht herum.

Etwas Hintergrundwissen…

Beim Einbinden einer weiteren Sprache erzeugt der JTL-Shop im Frontend einen neuen Eintrag mit einer neuen CSS-Anweisung.

  1. <a class="link_lang ger"...
Die Abkürzung „ger„, „eng“ usw. steht für den ISO, eine Normung für Namen von Sprachen und kann über CSS-Anweisung wie folgt angeprochen werden:
  1. .link_lang.ger {
  2.     background: url("../base/images/flags/ger.png") left center no-repeat;
  3.     padding-left: 20px;
  4. }
  5. /* oder für Englisch */
  6. .link_lang.eng {
  7.     background: url("../base/images/flags/eng.png") left center no-repeat;
  8.     padding-left: 20px;
  9. }

Eine neue CSS-Anweisung definieren

Nehmen wir an, wir möchten im Shop polnische Sprache anzeigen und müssen die polnische Flagge einbinden. So kann die CSS-Anweisung wie folgt aussehen:

  1. .link_lang.pol {
  2.     background: url("../base/images/flags/pol.png") left center no-repeat;
  3.     padding-left: 20px;
  4. }

In welcher Datei speichert man den CSS-Code?

Der CSS-Code sollte im Child-Template abgelegt werden und zwar in der CSS-Datei des gewählten Themes.

  1. /templates/DeinChildTemplate/themes/DeinTheme/style.css

  2. /* oder, kann je nach Template varieren */
  3. /templates/DeinChildTemplate/themes/DeinTheme/theme.css

Die Grafik mit der Flagge

Bitte kopiere zuerst die Grafik mit der Flagge in den Ordner deines Child-Templates (sollte den Ordner nicht geben, lege ihn an). Die Grafik sollte 16×12 px groß sein und die Erweiterung PNG haben.

  1. /templates/DeinChildTemplate/base/images/flags/