Flaggen für die Sprachauswahl

Erstellt von Johannes Teitge in Code-Snippets, Design & Templates, Home, Modul-Entwicklung, Tipps, jQuery am 08 12th, 2009 | 14 Kommentare

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.
flags_screen_01

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.
flags_screen_02

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.

14 Kommentare to “Flaggen für die Sprachauswahl”

magento-user sagt:

12. August 2009 um 02:15

Eine Klasse was Ihr da macht.

Ich finde es wirklich sehr schade dass Ihr kein eigenes Thema habt, sondern mit default Theme arbeitet. Das nutzt doch keiner. Einer der XY Theme hat, ist recht verwirt und ratlos wenn was nicht geht, man hat keinen Support. Mit eine eigene fortgeschrittene Theme wo alles beschriebene implementiert ist (z.B. auf http://www.demo-store.de) würdet Ihr viel mehr interessierte erreichen. Aber, das ist evtl. nicht das Ziel Liebe Grüße

Zum Antworten anmelden
ds_1984 sagt:

12. August 2009 um 07:47

Hallo magento-user,
dass ist ein interessantes Thema was du da ansprichst wir überlegen auch schon seit geraumer Zeit hin -und her (Eigenes Theme ja/nein).

Es ist so wir müssen ja neben einer Internetverbindung & einer Magento-Installation eine gewisse Basis voraussetzen & diese heißt nun einmal “default Theme”, selbst bei modern Theme oder alleine schon dem Blue Skin wäre die Hürde für einige schon wieder zu hoch ein extra Design zu installieren - daher default, es ist immer im Standard-Lieferumfang enthalten.

Was Support angeht, wo steht denn geschrieben das wir die Tutorials kostenfrei supporten???

Hört doch bitte mal auf immer nur die Hand aufzuhalten! Wenn wir uns in den Kommentaren auf der Seite & den Tutorials selbst engagieren, dann ist das schon deutlich mehr wie die meisten für die Community tun, glaub mal.

“Mehr interessierte erreichen” - ich denke das tun wir bei 500 Besuchern am Tag, insbesondere wenn man sich vor Augen hält das sogar Partner zu unseren Besuchern zählen, die Seite noch recht jung ist & dieses Thema selbst nur ein Nischen-Publikum anspricht.

Wir werden aber wenn deutliches Interesse besteht mal ein eigenes Theme im Rahmen mehrerer Workshops / Tutorials von A-Z durchspielen. Da sollte dann für jeden etwas dabei sein denken wir.

Liebe Grüße - Daniel

Zum Antworten anmelden
Johannes Teitge sagt:

12. August 2009 um 08:21

@ds_1984: Ich kann mich Daniel nur anschließen.

Ich möchte auch noch einmal in aller Deutlichkeit zum Ausdruck bringen, dass wir hier keinen Gratis Support machen können. Viele missverstehen dass, da so viele Anfragen für Support uns erreichen. Die meisten gehen davon aus, dass wir erstens gratis und zweitens schon gestern antworten.

Nur um einmal zu verdeutlichen welcher Aufwand hinter Mxperts.de steckt. Nach der täglichen Arbeit, das ist meistens ab 18:00 Uhr, sitzen Daniel und ich oft bis 1:00 bis 2:00 Uhr Nachts an neuen Beiträgen, oder wir führen Diskussionen, schmieden neue Pläne für Magento und Mxperts. Die tägliche Erfahrung, die Daniel und ich mit Magento machen, fließt kostenfrei für alles Leser bei Mxperts ein.

Wer Support für seinen Shop möchte kann diesen über info@mxperts.de anfordern. Wir machen gerne ein entsprechendes Angebot, aber gratis kann das nicht erfolgen. Letztens wurde mir von einem User unterstellt wir würden von Varien finanziert - auch das ist nicht der Fall!

Viele Grüße
Johannes Teitge

Zum Antworten anmelden
fenta23 sagt:

12. August 2009 um 18:28

Hallo Mxperts,
ich muss mich hier in aller Deutlichkeit für die umfangreichen Tutorials und Module bedanken. Ohne diese Seite würde ich vor einigen Rätseln stehen. Nach 2 Monaten intensiv-Magento-nerding mit diversen Neuinstallationen, Serverkonfigurationen und codefrigeleien bin ich bestimmt erst am Anfang was Magento angeht das wissen was ich dabei erworben hab, fusst aber größtenteils auf Mxperts.
Macht weiter so, lasst euch nicht von unqualifizierten Kommentaren ablenken.

Viele Grüße,
Michael Pfütze

Zum Antworten anmelden
magento-user sagt:

12. August 2009 um 23:35

Hallo zusammen,
wie nehme ich die Deutsche Flagge raus und baue dort Schweizer Flagge ein? Habe default Theme, es klappt aber irgendwie nicht… Vielen Dank

Zum Antworten anmelden
david74 sagt:

17. September 2009 um 10:54

Sorry, das klingt wahrscheinlich blöd, aber ich frag mal:
Du schreibst “In der catalog.xml, tragen Sie auch die mxperts_flags.phtml ein.”
Was heisst das - was genau trage ich wo in der catalog.xml ein?
Besten Dank!

Zum Antworten anmelden
Andi sagt:

23. September 2009 um 15:20

Sehr schöner Artikel - würd ich auch wahnsinnig gerne umsetzen.

Aber wie david74 schon andeutete, dass mit der catalog.xml ist absolut unverständlich. Sorry.

Zum Antworten anmelden
Johannes Teitge sagt:

23. September 2009 um 19:41

Sorry, dass es etwas länger gedauert hat, aber ich war 3 Tage unterwegs und habe zudem im Moment sehr viel zu tun. Deshalb schaffe ich es zur Zeit nicht täglich reinzuschauen. Ich bekomme ja von Mxperts leider noch kein Gehalt
Aber ich habe das Tutorial was den catalog.xml Part angeht etwas erweitert.

Viele Grüße
Dscho

Zum Antworten anmelden
Andi sagt:

24. September 2009 um 01:56

Hi Johannes,

tausend Dank! Freut mich sehr, dass Du so schnell die Ergänzung gemacht hast! Großartig!

Schöne Grüße
Andi

Zum Antworten anmelden
taiwi sagt:

7. Oktober 2009 um 15:14

Also im aktuellen Magento und modern theme geht es nicht.

In der catalog.xml gibt es gar kein blog Eintrag für die Sprache.. Beim durchsuchen des gesamten Magento Verzeichnisses habe ich nur die Zeile in der page.xml gefunden aber damit ändert sich nichts.

Irgendeine Idee…

Gruß
Taiwi

Zum Antworten anmelden
HolDenWagenHarry sagt:

27. Dezember 2009 um 01:19

Leider kann auch ich nicht den Code “template=”page/switch/languages.phtml”/>” in der catalog.xml finden

Grüße,
HolDenWagenHarry

Zum Antworten anmelden
taiwi sagt:

10. Februar 2010 um 10:03

Danke für deine Antwort verstehe ich natürlich hoffe dennoch das es vielleicht jemanden gibt der die Flaggen schon im Modern Theme eingebaut hat..

Danke nochmal

Gruß
Taiwi

Zum Antworten anmelden
cominaction sagt:

25. März 2010 um 20:19

Hallo,

für alle die das Problem haben das sie folgenden Code nicht in der catalog.xml finden können:

Ich denke das es ein Tippfehler ist! Ich habe dieses in der page.xml geändert und es funzt so!

Vllt hilft euch weiter

Grüße und mxperts, macht weiter so! Hut ab Hut ab für eure Arbeit!

cominaction

Zum Antworten anmelden
Johannes Teitge sagt:

8. Februar 2010 um 15:24

Hallo,

wir nutzen deshalb das Default-Theme, weil dieses bei der Standard-Installation mitgeliefert wird. Leider können wir aus zeitlichen Gründen nicht auf verschiedene Themes eingehen,da bezüglich Themes die Meinungen sehr verschieden sind. Bitte nicht falsch verstehen - aber Mxperts ist kein Support-Forum, sondern lediglich eine nicht kommerzielle Plattform auf der wir einige unserer Ergebnisse zur Verfügung stellen. Bitte auch mal die Anmerkung in der Fußzeile lesen. Support erhält man eher im offiziellen Magento-Forum oder auf http://www.magenity.de.

Viele Grüße
Johannes Teitge

Zum Antworten anmelden

Kommentar erstellen

You must be logged in to post a comment.

Bitte beachten: Mxperts.de ist kein Supportforum sondern eine Informationsplattform, deshalb benutzt für Diskussionen das deutsche Forum von Magento. (Fragen/Kommentare zu den Tutorials ausgeschlossen). Außerdem gebe ich keinen kostenlosen Support zu Magento. Leider haben das einige Leser in letzter Zeit falsch Verstanden und ich bitte um Euer Verständnis. Ich denke diese Plattform ist von unserer Seite aus schon genügend Gratis-Leistung.

Letzte Artikel

Letzte Kommentare

ds_1984 bei Erweiterung: Mxperts - NoRegion
mister_tt bei Erweiterung: Mxperts - NoRegion
ds_1984 bei Erweiterung: Mxperts - NoRegion
mister_tt bei Erweiterung: Mxperts - NoRegion
eren bei Bewegtes Bild (Slide,Fade,Zoom)
JoernBernd bei Neue Version Mxperts Invoice 1.0.8
Tobi bei Erweiterung: Mxperts Tooltip
Bali4you bei Personalisierter Browsertitel
itintouch bei Magento-Shop nur als Katalog: Teil 4 - Zubehör, UpSelling, Produktoptionen & Layered Nav
cbatik bei Eigene Layouts in Magento CMS integrieren