Sprachen, Übersetzungen und Verwendung im Website-Code.
Translations steuern mehrsprachige Texte einer Website. Pro Website werden Sprachen, Standardsprache, Standard-Translations und eigene Translation-Keys gepflegt. Dadurch können Website-Texte, Checkout-Begriffe und eigene Komponenten sprachabhängig ausgegeben werden.
Translations befinden sich im simplebis-manager unter Webseiten. Dort eine Website öffnen und Einstellungen > Translations verwenden. Die Ansicht zeigt Sprachen, Default Translations und Custom Translations.
Deutsch mit dem Key de ist als Systemsprache vorgesehen. Weitere Sprachen werden mit einem eindeutigen Key und einem Namen angelegt, zum Beispiel en für Englisch. Eine Sprache kann als Standardsprache verwendet werden. Die Standardsprache und die Systemsprache können nicht entfernt werden.
Default Translations sind von simplebis vorgegebene Schlüssel, zum Beispiel für Login, Account, Checkout oder Fehlermeldungen. Diese Werte können pro Sprache überschrieben und bei Bedarf wieder auf den Standard zurückgesetzt werden.
Custom Translations sind eigene Schlüssel für individuelle Website- oder Komponenten-Texte. Ein Eintrag besteht aus Key und Translation. Custom Translations können gespeichert, geändert oder entfernt werden.
In Code-Seiten und Code-Komponenten steht die Übersetzungsfunktion als _ und zusätzlich als api._ zur Verfügung. Der aktive Sprach-Key steht in api.language. Die vollständigen Translation-Daten stehen in api.translations, unter anderem mit language, default_language, languages, values und defaults.
Die Funktion _('translation.key') gibt zuerst einen gepflegten Wert der aktiven Sprache zurück. Wenn kein überschriebenes Translation vorhanden ist, wird ein Standardwert verwendet. Wenn auch kein Standardwert existiert, wird der Translation-Key selbst zurückgegeben. Dadurch bleiben fehlende Übersetzungen sichtbar.
Beispiel für eine Server-Code-Komponente oder Code-Seite:
const React = require("react");
const { Link } = require("@webtypen/webframez-react/navigation");
exports.default = async function AccountTeaser({ _, api }) {
return React.createElement(
"section",
{ className: "account-teaser", lang: api.language },
React.createElement("h2", null, _("account.teaser.title")),
React.createElement("p", null, _("account.teaser.text")),
React.createElement(
Link,
{ to: "/account" },
api._("account"),
),
);
};
Beispiel für eine Client-Komponente:
const React = require("react");
exports.default = function LanguageBadge({ api }) {
return React.createElement(
"span",
{ className: "language-badge" },
api._("website.language") + ": " + api.language,
);
};
Die verwendeten Keys, zum Beispiel account.teaser.title, account.teaser.text oder website.language, werden im Manager unter Webseiten > Website öffnen > Einstellungen > Translations als Custom Translations gepflegt.
In Website-Komponenten sollten feste Texte nach Möglichkeit über Translation-Keys ausgegeben werden. Texte, die in mehreren Komponenten oder im Checkout vorkommen, bleiben dadurch zentral pflegbar. Neue Keys sollten eindeutig benannt werden, zum Beispiel mit einem fachlichen Präfix wie home.hero.title, checkout.notice oder account.teaser.text.