Weitere Länderflaggen für den Sprachwechsel hinzufügen

Einleitung

Im Standard sind für den Sprachwechsel die Flaggen für Deutschland, Großbritannien, die Niederlade, Frankreich, Spanien und Italien hinterlegt. Um weitere Flaggen für die Auswahl bereitzustellen, sind 2 Theme-Anpassungen nötig.

Wichtig: Bitte beachte, dass Du keine Anpassungen an den Standard-Themes "Bare" und "Responsive" vornehmen solltest, sondern diese immer in Deinem eignen Theme durchführst.

Wie Du ein eigenes Theme erstellen kannst, wird Dir hier beschrieben Theme Manger - Theme erstellen

Achtung! Die hier zur Verfügung gestellten Informationen wurden zum Zeitpunkt der Veröffentlichung dieses Artikels getestet, können sich zwischenzeitlich aber geändert haben. Die Durchführung dieses Tutorials geschieht auf eigene Gefahr! Lege Dir vor der Durchführung ein Backup an, sodass Du dieses im Zweifel zurückspielen kannst. Beachte, dass es sich hier um Anpassungen von Shopware handelt und der Inhalt dieses Tutorials daher nicht offiziell supportet wird!

Anpassungen

ico-flags.png

In dieser Datei sind die einzelnen Flaggen zusammengefasst und diese befindet sich im Verzeichnis "/themes/Frontend/Responsive/frontend/_public/src/img". Die einzelnen Flagge haben eine Größe von 14 x 11 px. Mit einem Bildearbeitungprogramm kann nun unterhalb der existierenden Flaggen eine oder mehrere Flagge(n) hinzugefügt werden.

Die angepasste Datei kannst du dann direkt in Dein Theme an dieser Stelle einfügen: /themes/Frontend/DEINTHEME/frontend/_public/src/img/ico-flags.png

flags.less

Die Datei flags.less enthält die Informationen, an welchen Koordinaten innerhlab der ico-flags.png die einzelnen Länderflaggen positioniert sind. Die Datei befindet sich im Verzeichnis "/themes/Frontend/Responsive/frontend/_public/src/less/_components" und wird nun um die Informationen für die vorher der ico-flags.png hinzugefügten Flaggen ergänzt. Den ISO-Code für die jeweiligen Länder findest Du z.B. im Backend unter "Einstellungen > Grundeinstellungen > Shopeinstellungen > Lokalisierungen". Es ist wichtig, dass der ISO-Code, der unter Lokalisierungen angegeben ist, genauso in der flags.less hinterlegt wird, da die Zuordnung der Flagge über die Lokalisierung erfolgt.

In Deinem Theme speicherst du die angepasste Datei unter: /themes/Frontend/DEINTHEME/frontend/_public/src/less/_components/flags.less

Beispiel

Exemplarisch ist hier die Erweiterung für Schweden aufgeführt

ico-flags.png:

flags.less:

 
/*
Language Flags
==================================================
Displays a country flag the size of 14px x 11px used for language selections purposes.
*/
 
.language--flag {
    .unitize-height(11);
    .unitize-width(14);
    background: url("../../img/ico-flags.png") no-repeat 0 0;
    display: inline-block;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
 
    // We need to work with pixels here
    &.de_DE { background-position: 0 0; }
    &.en_GB { background-position: 0 -11px; }
    &.nl_NL { background-position: 0 -22px; }
    &.fr_FR { background-position: 0 -33px; }
    &.es_ES { background-position: 0 -44px; }
    &.it_IT { background-position: 0 -55px; }
    &.sv_SE { background-position: 0 -66px; }
}
 

Weitere interessante Artikel:

Tutorial: Einrichten von Sprach- & Subshops

Vorwort In diesem Tutorial erklären wir Dir, wie Du Subshops anlegen kannst. Wir gehen hier nicht näher auf die Bedeutung der einzelnen Konfigurationen ein, da dies im folgenden Artikel ausführlich beschrieben wird: '''Shopeinstellungen'''...

weiterlesen
€ 1,00

Preise inkl. gesetzlicher
MwSt. + Versandkosten*