Die Auswahl der Sprachen ist bei Magento eher bescheiden ausgefallen. Dann wollen wir in diesem Tutorial den Language-Switcher etwas tunen.

Das Ergbnis soll eine Sprachauswahl wie in unserem Demoshop http://www.demo-store.de sein. Diese Tutorial besteht allerdings aus zwei Teilen. Teil 1 beschreibt die Verwendung der Datei Flags.phtml, die im Umfang von Magento enthalten ist. In Teil 2 entwickeln wir unsere eigene Sprachauswahl unter Verwendung von jQuery für die Animationen.

Teil 1

Wenn Sie sich durch die Template-Files wühlen, dann finden Sie irgendwann die Datei flags.phtml im Verzeichnis app/design/forntend/[Ihr Interface]/[Ihr Theme]/template/page/switch.

<?php if(count($this->getStores())>1): ?>
<div class="language-switcher">
    <label for="select-language"><?php echo $this->__('Your Language') ?>: </label>
    <select id="select-language" class="flag" onchange="window.location.href=this.value">
    <?php foreach ($this->getStores() as $_lang): ?>
        <?php $_selected = ($_lang->getId() == $this->getCurrentStoreId()) ? 'selected="selected"' : '' ?>
        <option style="background-image:url('<?php echo $this->getSkinUrl('images/flag_'.$_lang->getCode().'.gif') ?>');" value="<?php echo $_lang->getCurrentUrl() ?>" <?php echo $_selected ?>>
        <?php echo $this->htmlEscape($_lang->getName()) ?></option>
    <?php endforeach; ?>
    </select>
</div>
<?php endif; ?>

Um dieses Template zu aktivieren, müssen wir ein Änderung in der Datei app/design/forntend/[Ihr Interface]/[Ihr Theme]/layout/page.xml vornehmen. Suchen Sie in dieser Datei die Zeile

<block type="page/switch" name="store_language" as="store_language" template="page/switch/languages.phtml"/>

und ersetzen Sie page/switch/languages.phtml mit page/switch/flags.phtml.

In Ihr Skin unter skin/forntend/[Ihr Interface]/[Ihr Theme]/images, kopieren Sie die drei Flaggen:

 flag_default.gif
 flag_german.gif
 flag_french.gif

Danach sollte die Auswahl der Sprachen die Flaggen beinhalten.

Teil 2

Nun haben wir zwar Flaggen in unserer Sprachauswahl, aber der Knaller ist das nicht! Mein Vorstellung ist eine Sprachauswahl mit Bildern, ohne Listenfeld. Die Bilder sollen beim Mouse-Over animiert sein, und die aktive Sprache soll ein anderes Bild als die inaktive Sprache anzeigen.
Dafür erstelle ich mir mein eigenes Template mxperts_flags.phtml. Kopiere Sie diese Datei in das Verzeichnis app/design/frontend/[Ihr INterface]/[Ihr Theme]/template/page/switch.

<?php if(count($this->getStores())>1): ?>
  <div class="language-switcher" style="float:right;">
    <div style="float:right; margin-right:-15px;">
      <ul class="flags">
        <?php foreach ($this->getStores() as $_lang): ?>
        <?php
          $_selected = ($_lang->getId() == $this->getCurrentStoreId()) ? '_selected' : '';
          $_img = $this->getSkinUrl('images/flags/'.$_lang->getCode().$_selected.'.png');
          $_url = $_lang->getCurrentUrl();
          $_title = $_lang->getName();
          echo '<li><A title="'.$_title.'" href="'.$_url.'"><IMG src="'.$_img.'"></a></li>';
        ?>
        <?php endforeach; ?>
      </ul>
    </div>

    <div style="float:right;">
      <?php
        echo $this->__('Your Language').':';
      ?>
    </div>
  </div>
<?php endif; ?>

In der catalog.xml nach folgendem Code suchen:

<block type="page/switch" name="store_language" as="store_language" template="page/switch/languages.phtml"/>

und ersetzen mit

<block type="page/switch" name="store_language" as="store_language" template="page/switch/mxperts_flags.phtml"/>

Nun fehlt uns noch die Formatierung per CSS. Dies wird unter dem Namen jquery.language.switch.css in den Ordner skin/frontend/[Ihr Interface]/[Ihr Theme]/css/ kopiert.

ul.flags {
	float: left;
	list-style: none;
	margin: 0; padding: 0 10px 0 10px;
/*	width: 360px; */
}
ul.flags li {
  background: none;
	margin: 0;
  padding: 2px;
	float: left;
	position: relative;
	width: 24px;
	height: 18px;
}
ul.flags li img {
	width: 24px; height: 18px;
	padding: 0px;
/*	background: #f0f0f0; */
	position: absolute;
	left: 0; top: 0;
	-ms-interpolation-mode: bicubic;
}

ul.thumb li img.hover {
	background:url(../images/flags/thumb_bg.png) no-repeat center center;
	border: none;
}

Die Animation erstellen wir mittels jQuery. Installieren Sie dazu zuerst unsere Erweiterung jQuery Base.

jQuery(document).ready(function(){

  jQuery("ul.flags li").hover(function() {

	  jQuery(this).css({'z-index' : '10'});

    jQuery(this).find('img').addClass("hover").stop().animate({
			marginTop: '-4px',
			marginLeft: '-4px',
			width: '34px',
			height: '26px',
			padding: '0px'
		}, 200);

	} , function() {
	  jQuery(this).css({'z-index' : '0'});
	  jQuery(this).find('img').removeClass("hover").stop().animate({
			marginTop: '-5px',
			marginLeft: '-5px',
			width: '38px',
			height: '29px',
			padding: '0px'
		}, 100)
		.animate({
			marginTop: '0',
			marginLeft: '0',
			width: '24px',
			height: '18px',
			padding: '0'
		}, 400);
  });
});

Diese Datei wird als skin/frontend/[Ihr Interface]/[Ihr Theme]/js/jquery.language.switch.js gespeichert.

Nun müssen wir die CSS- und Javascript-Datei in den Header eintragen. Der Vorteil von jQuery-Base ist, dass man dies sehr einfach über das Backend administrieren kann.

Die Bildaten werden aus dem Sprachcode abgeleitet. Zum Beispiel: default.png, german.png. Die ausgewählte Sprache enthält in der Datei den Präfix _selected. Die Bilddaten kopieren Sie in den Ordner skin/frontend/[Ihr Interface]/[Ihr Theme]/images/flags.

Das Ergebnis sehen Sie in unserem Demoshop http://www.demo-store.de.