Langues

Les langues livrées

Anglais et arabe, dans les trois applications. L'arabe dispose toute l'interface de droite à gauche, avec IBM Plex Sans Arabic sur le site, et les chiffres restent en chiffres latins dans les deux langues.

L'anglais est la langue par défaut. Les plats, les catégories, le menu combiné, les cuisines et les sections de la page d'accueil sont enregistrés avec chaque texte dans les deux langues, saisis côte à côte dans le tableau de bord, et les données de démonstration remplissent l'arabe pour tous.

Comment la langue est choisie

• La langue est la première partie de l'adresse. Un chemin sans langue mène à /en.
• Le sélecteur de langue remplace cette partie de l'adresse et reste sur la même page.
• Sur le site, la direction est définie avant le premier affichage, donc une page arabe ne s'affiche jamais brièvement de gauche à droite.
• Les deux frontends envoient la langue de la page à l'API, pour que ses messages reviennent dans la même langue. Une commande garde en mémoire la langue dans laquelle elle a été passée.

Modifier un texte

Chaque mot visible se trouve dans messages/<namespace>/en.json et ar.json, dans le dossier de chaque frontend. Changez la valeur, gardez la clé, et faites la modification dans les deux fichiers.

• Une clé absente de ar.json apparaît comme un message manquant côté arabe : gardez donc les deux fichiers synchronisés.
• Le texte entre accolades {curly} est rempli par l'application, comme {count} ou {name}. Gardez ces mots tels quels dans les deux langues.
• Les libellés de la barre latérale du tableau de bord sont aussi des messages, sous nav dans messages/dashboard/en.json et ar.json.

Ce que l'API traduit

• Les messages d'erreur et le message d'une écriture réussie reviennent dans la langue de l'en-tête Accept-Language. ar-SA compte comme de l'arabe ; toute langue que l'API ne possède pas se replie sur l'anglais.
• Les erreurs qu'un client voit, comme une cuisine fermée, sont envoyées sous forme de clés comme errors.kitchen_closed, et le site affiche sa propre phrase pour chacune.
• Ses propres textes sont des fichiers JSON dans back-end/src/i18n/translations/en/ et ar/, un par zone : admin, auth, category, common, mail, order, product, roles, settings, users. L'e-mail de réinitialisation du mot de passe est dans mail.
• Les plats et les autres éléments du menu reviennent avec les deux langues, sous la forme { "en": "…", "ar": "…" }, et le frontend en choisit une.

Ajouter une langue au site

Les deux langues sont inscrites dans quelques fichiers, donc en ajouter une troisième touche chacun d'eux. Les chemins sont dans storefront/.

1. Ajoutez le code à locales dans src/config/i18n.ts, dans src/proxy.ts et dans src/app/[locale]/layout.tsx.
2. Copiez chaque messages/<namespace>/en.json dans un fichier nommé d'après le nouveau code, et traduisez les valeurs.
3. Si la langue s'écrit de droite à gauche, étendez la vérification de direction dans src/app/layout.tsx, qui ne connaît que ar.
4. Ajoutez le nouveau code à src/components/LanguageSwitcher.tsx, et ses textes à src/config/brand.config.ts, qui contient les noms et le titre de la page d'accueil en en et en ar.
5. Les composants qui choisissent un texte du menu selon la langue, comme les résultats de recherche, la barre des catégories et la carte des cuisines, choisissent entre en et ar. Cherchez "ar" dans src/ et gérez aussi le nouveau code à ces endroits.

Ajouter une langue au tableau de bord

1. Ajoutez le code à locales dans src/config/i18n.ts, src/proxy.ts et src/app/[locale]/layout.tsx, ainsi qu'aux listes de langues dans src/components/LanguageSwitcher.tsx, le menu utilisateur et le réglage Language.
2. Copiez chaque messages/**/en.json dans un fichier nommé d'après le nouveau code, et traduisez les valeurs.
3. Les formulaires saisissent chaque texte du menu en anglais et en arabe côte à côte (src/components/ui/LanguageTabs.tsx et les champs bilingues). Une troisième langue à cet endroit demande aussi que l'API la stocke.

Ajouter une langue à l'API

L'API connaît en et ar dans back-end/src/i18n/i18n.service.ts et dans les vérifications des commandes et du contact. Ajoutez-y le nouveau code, copiez src/i18n/translations/en/ dans un dossier nommé d'après lui, et traduisez les fichiers. Les éléments du menu stockent une paire { en, ar } : une troisième langue dans les données demande donc de modifier ces éléments et les données de démonstration.