In den meisten Magento-Vorlagen ist die Sprachauswahl wie üblich über ein Dropdown-Menü möglich. Lassen Sie uns einen Blick auf eine Möglichkeit werfen, das Aussehen unserer Website zu verbessern und sie für Besucher attraktiver zu machen. Im folgenden Beispiel zeige ich Ihnen, wie Sie einen mehrsprachigen Shop einrichten und das Standardmenü für die Sprachauswahl durch Flaggensymbole ersetzen können.
Schritt 1:
Zunächst müssen wir mehrere Speicheransichten erstellen. Jede Ansicht wird eine eigene Sprache darstellen. Wir gehen zu Verwaltung->System->Speicher verwalten. Hier können Sie zusätzliche Ansichten speichern. Klicken Sie auf die Schaltfläche "Store View erstellen". Im nächsten Fenster müssen Sie die 4 erforderlichen Einstellungen vornehmen. Wählen Sie im Feld "Geschäft" Ihr Geschäft aus. Geben Sie dann in das Feld "Name" den Namen der Sprache ein, z. B. "Englisch". Das Feld "Code" ist die ID, die wir in unserer Selektorlogik verwenden werden. Füllen Sie es für dieses Beispiel mit dem Wert "en". Für das Statusfeld sollte "Aktiviert" ausgewählt werden. Wenn Sie möchten, können Sie das Feld "Bestellung" ausfüllen. Klicken Sie auf die Schaltfläche Speicheransicht speichern. Jetzt haben wir eine zusätzliche Shop-Ansicht. Versuchen Sie, eine weitere Ansicht mit dem Code "de" oder einer anderen Sprache mit denselben Verfahren hinzuzufügen.
Schritt 2:
Gehen Sie jetzt zu Verwaltung->System->Konfiguration. Oben links auf der Seite sehen Sie den Shop-Selektor:
In diesem Menü finden Sie Ihre Ansichten speichern. Wählen Sie eine davon aus, zum Beispiel "Englisch". Klicken Sie dann auf die Registerkarte "Allgemein". Wählen Sie auf der Seite mit den allgemeinen Einstellungen die Registerkarte "Gebietsschemaoptionen". Die erste Option auf dieser Registerkarte ist "Gebietsschema". Deaktivieren Sie das Kontrollkästchen "Website verwenden", um es zu aktivieren, und wählen Sie "Englisch" aus der Liste. Klicken Sie nun oben auf der Seite auf "Save Config". Wählen Sie "Locale" für eine weitere Ansichten speichern ebenfalls.
Schritt 3:
Als Nächstes müssen wir die Flaggen der Länder finden, die wir brauchen. Sie können die Flaggen von jeder beliebigen Quelle herunterladen (z. B. Wikipedia oder Google images). Alle Flaggen müssen die gleiche Größe, das gleiche Format und die gleiche Endung haben (*.jpg, *.png, *.gif oder andere). Die Bildnamen müssen mit den Codes für Ansichten speicherndie Sie zuvor bei der Erstellung der Ansichten speichernwie z. B. en.png, de.png, usw. Sobald Sie die Flaggenbilder heruntergeladen und umbenannt haben, müssen Sie sie in den Skin-Ordner Ihrer Vorlage legen. Meine Vorlage heißt zum Beispiel "Shopper" - ich muss in das Verzeichnis /skin/frontend/default/shopper/images gehen und dort ein neues Verzeichnis mit dem Namen "flags" erstellen und alle Dateien dort ablegen. Es sollte ähnlich aussehen: [Speicherpfad]/skin/frontend/default/shopper/images/flags/.
Schritt 4:
In diesem Schritt müssen wir den Code für die Sprachauswahl bearbeiten. Wir gehen zu [Speicherpfad]/app/design/frontend/default/[Ihre Vorlage]/template/page/switch/ . Dort finden wir die Datei "languages.phtml". Wenn es keine solche Datei gibt, müssen wir sie von hier kopieren [Speicherpfad]/app/design/frontend/base/default/template/page/switch/ . Laden Sie diese Datei auf Ihren Computer herunter und speichern Sie sie für alle Fälle irgendwo ab. Öffnen Sie die Datei dann mit Ihrem bevorzugten Editor und fügen Sie den folgenden Code ein:
1 2 3 4 5 6 7 8 9 10 11 | <?php wenn(zählen($his->getStores())>1): ?<div Klasse="Formular-Sprache"> <div Klasse="langs-wrapper"> <?php foreach ($his->getStores() als $_lang): ?> <?php wenn ($_lang->getCode() != 'Standard'): ?> <a Klasse="lang-flag" href="getCurrentUrl() . '?___store=' . $_lang->getCode();?>"><img src="getSkinUrl('images/flags/' . $_lang->getCode() . '.png');?>" alt=""></a> <?php endif;?> <?php endforeach;?> </div></div><?php endif;?> |
Der letzte Schritt besteht darin, die Flaggen an den gewünschten Stellen sichtbar zu machen. Öffnen Sie die Datei styles.css die sich in в [Speicherpfad]/skin/frontend/default/[Ihr tnemplate]/css/styles.css und bearbeiten Sie die Flaggenstile entsprechend den Anforderungen Ihres Projekts. In meinem Beispiel sehen die Stile wie folgt aus.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .langs-wrapper { Höhe: 15px;}.lang-flag { Breite: 16px; Höhe: 12px; Schwimmer: rechts; margin-left: 10px; Grenze: 1px solide Banner;}.lang-flag:hover { Grenze: 1px solide #FFF;} |
Id. Jetzt müssen wir, wie immer, den Cache leeren, unsere Hände waschen und auf die Schaltfläche "Aktualisieren" auf Ihrer Benutzeroberfläche klicken, um die Änderungen zu sehen. Wenn Sie keine Änderungen sehen, dann haben Sie etwas falsch gemacht. Das häufigste Problem ist eine fehlende Sprachauswahl im Layout-Teil der Vorlage.Öffnen Sie die Datei [Speicherpfad]/app/design/frontend/default/[Ihre Vorlage]/layout/page.xml und suchen Sie nach "Sprachen". Sie sollten etwas Ähnliches finden:
1 | <Block Typ="Seite/Schalter" Name="store_language" als="store_language" Vorlage="page/switch/languages.phtml"/> |
Wenn es einen solchen Teil nicht gibt, sollten Sie ihn in den Abschnitt "Kopfzeile". Wenn alles richtig gemacht wird, wird so etwas passieren:
Der in diesem Artikel verwendete Code wurde von mir unter realen Bedingungen heruntergeladen und funktioniert, wenn alles richtig ausgeführt wird.
Viel Glück!
Quelle: CUC