Mehrsprachige Hyvä-Shops: Store Views, Flaggen und Übersetzungen

Viele europäische Magento-Shops verkaufen in mehr als einer Sprache. Der Wechsel zu Hyvä ändert nichts daran, wie Magento damit umgeht, wohl aber daran, wo ein Teil der Arbeit anfällt.

Unser Hyvä-Demo-Shop läuft mit einer englischen und einer deutschen Store View und einem Sprachumschalter mit Flaggen. In diesem Beitrag zeigen wir, wie wir das eingerichtet haben und worauf Sie achten sollten.

Store Views bleiben die Grundlage

Hyvä ist ein Frontend-Theme. Websites, Stores und Store Views funktionieren genau wie in jeder Magento-2-Installation.

Jede Sprache erhält eine eigene Store View mit eigenem Gebietsschema, eingestellt unter Stores > Configuration > General > Locale Options.

Produktnamen, Beschreibungen, Kategorieinhalte, CMS-Seiten und URL-Schlüssel lassen sich pro Store View festlegen. Das Theme entscheidet nur, wie diese Inhalte dargestellt werden.

Wenn Sie zusätzlich in mehreren Währungen oder Ländern verkaufen, ist die Website- und Store-Struktur für Preise, Steuern und Zahlungsarten entscheidend. Unser Beitrag zum internationalen Checkout in Hyvä behandelt diese Seite.

Legen Sie die URL-Struktur früh fest

Für Sprachversionen gibt es zwei gängige Muster:

• Store-Code in der URL, zum Beispiel /en/ und /de/ auf einer Domain. Das ist einfach zu betreiben, und Sie behalten ein Zertifikat und eine CDN-Zone.
• Separate Domains oder Subdomains pro Land. Das kann zu Shops passen, die in jedem Markt eine starke lokale Marke haben.

Beides funktioniert mit Hyvä. Wichtig ist, dass Sie sich vor dem Launch entscheiden, denn spätere URL-Änderungen bedeuten Weiterleitungen und eine Phase der Unsicherheit bei Suchmaschinen.

Wofür Sie sich auch entscheiden: Verknüpfen Sie die Sprachversionen per hreflang miteinander. Magento gibt standardmäßig keine hreflang-Tags aus, dafür brauchen Sie also ein Modul oder einen kleinen individuellen Block. Die SEO-Seite behandeln wir in Hyvä-SEO: sauberes Markup, strukturierte Daten, effizientes Crawling.

Übersetzungen gehören ins Theme

Magento-Übersetzungen stammen aus CSV-Dateien in Modulen, Sprachpaketen und dem Theme. In einem Hyvä-Shop legen wir shopspezifische Formulierungen im Child-Theme ab:

app/design/frontend/Vendor/hyva-child/i18n/de_DE.csv
"Add to Cart","In den Warenkorb"
"Proceed to Checkout","Zur Kasse"
"Delivery in 2-3 working days","Lieferung in 2-3 Werktagen"

Theme-Übersetzungen werden nach den Modul-Übersetzungen angewendet und sind daher der richtige Ort für Ihre eigene Tonalität.

Um Strings zu finden, die noch übersetzt werden müssen, sammeln Sie die Phrasen aus Ihrem Theme und gleichen sie mit der CSV ab:

bin/magento i18n:collect-phrases app/design/frontend/Vendor/hyva-child

Bedenken Sie: Ein Sprachpaket liefert Ihnen eine Grundlage, nicht Ihre Markenstimme. Formulierungen in Checkout, Warenkorb und Kundenkonto prüfen wir immer von Hand.

Strings in Alpine.js-Komponenten

Hyvä-Komponenten werden in Alpine.js geschrieben, oft innerhalb von PHTML-Templates. Das macht die Übersetzung einfacher als in den Knockout-Templates von Luma, weil der Text meist von PHP gerendert wird.

Wird ein String in JavaScript benötigt, rendern Sie ihn über die Übersetzungsfunktion von Magento und escapen Sie ihn für JavaScript:

<div x-data="{ added: '<?= $escaper->escapeJs(__('Added to your basket')) ?>' }">
    ...
</div>

Vermeiden Sie fest codierte englische Strings in Alpine.js-Komponenten. Sie gehen im Review leicht unter und tauchen auf deutschen Seiten auf, sobald ein Kunde etwas anklickt.

Statische Inhalte müssen außerdem für jedes verwendete Gebietsschema deployt werden, sonst fehlen für eine Sprache einige Dateien:

bin/magento setup:static-content:deploy -f en_GB de_DE

Ein Sprachumschalter mit Flaggen

Magento bringt bereits einen Store-Umschalter mit. In unserem Demo-Shop haben wir dessen Template im Child-Theme angepasst, sodass neben jeder Sprache eine Flagge erscheint.

Flaggen sind ein schneller visueller Hinweis, stehen aber für Länder, nicht für Sprachen. Deutsch etwa wird in mehreren Ländern gesprochen.

Deshalb zeigen wir neben der Flagge immer auch den Namen der Sprache als Text. Das hilft auch Nutzern von Screenreadern, die sonst nichts Brauchbares hören würden.

Der Umschalter sollte Besucher zur selben Seite in der anderen Sprache führen, sofern es sie gibt, und nicht zurück zur Startseite. Magento erledigt das, wenn die URL-Schlüssel pro Store View gesetzt sind.

Checkout und E-Mails brauchen eine eigene Prüfung

Im Checkout schaden unübersetzte Texte am meisten. Im Hyvä Checkout, der auf Magewire basiert, stammen die Beschriftungen aus PHP-Templates und denselben Übersetzungsdateien wie im übrigen Shop.

Zahlungs- und Versandmodule bringen oft eigene Formulierungen mit. Prüfen Sie daher jede angebotene Methode in jeder Sprache.

Transaktions-E-Mails werden ebenfalls pro Store View konfiguriert. Stellen Sie sicher, dass jede Store View die richtigen E-Mail-Templates und Absenderangaben verwendet.

Inhalte pro Sprache, nicht nur Übersetzung

Übersetzungsdateien decken die Oberfläche ab. Produktdaten, Kategorietexte, CMS-Seiten und Banner sind Inhalte und brauchen einen eigenen Plan.

Legen Sie früh fest, wer jede Sprache schreibt und prüft und welche Inhalte über Store Views hinweg geteilt werden. Startseiten-Banner brauchen oft andere Bilder pro Markt, nicht nur andere Texte.

Stolpersteine, auf die wir gestoßen sind

• Store-View-spezifische Übersetzungen. Eine Phrase, die an einer Stelle übersetzt ist, kann in einem anderen Kontext trotzdem unübersetzt erscheinen. Wir testen echte Seiten pro Store View, statt uns allein auf die CSV zu verlassen.
• Gecachte Seiten in der falschen Sprache. Full-Page-Cache und CDN-Regeln müssen Store Views sauber trennen. Mehr dazu in Full-Page-Caching für einen Hyvä-Shop mit Cloudflare.
• Fehlende Gebietsschemata im Static Deploy. Ein einziges vergessenes Gebietsschema im Deploy-Skript reicht, um eine Sprache zu beschädigen.
• Inhalte nur im Default-Scope gepflegt. Existiert ein CMS-Block nur für eine Store View, zeigt die andere Sprache an dieser Stelle eine leere Fläche.

Eine kurze Launch-Checkliste

1. Eine Store View pro Sprache, mit dem richtigen Gebietsschema.
2. URL-Struktur festgelegt und hreflang geplant.
3. Theme-CSV-Dateien für jedes Gebietsschema vollständig.
4. Keine fest codierten Strings in Alpine.js-Komponenten.
5. Statische Inhalte für jedes Gebietsschema deployt.
6. Der Umschalter zeigt Sprachnamen und bleibt auf der aktuellen Seite.
7. Checkout, Kontoseiten und E-Mails in jeder Sprache getestet.

FAQ

Unterstützt Hyvä mehrere Sprachen?

Ja. Hyvä nutzt die Standard-Store-Views, Locales und Übersetzungsdateien von Magento. Mehrsprachige Shops funktionieren also wie mit jedem anderen Magento-2-Theme.

Werden Luma-Übersetzungen in Hyvä weiterverwendet?

Übersetzungen aus Modulen und Sprachpaketen gelten weiterhin. Strings, die in Luma-Theme-Templates oder Knockout-Dateien lagen, müssen geprüft werden, weil Hyvä diese Templates ersetzt.

Sollte ich Flaggen im Sprachumschalter verwenden?

Flaggen sind als visueller Hinweis in Ordnung, zeigen Sie aber immer auch den Sprachnamen als Text an. Flaggen stehen für Länder, und viele Sprachen werden in mehr als einem Land gesprochen.

Sie planen einen mehrsprachigen Hyvä-Shop oder möchten einen von Luma umziehen? Werfen Sie einen Blick auf unsere Hyvä-Theme-Entwicklung oder kontaktieren Sie uns.