Langues

Les langues livrées

Anglais et arabe, dans les trois applications. L'arabe dispose toute l'interface de droite à gauche, avec ses propres polices sur la boutique.

L'anglais est la langue par défaut. Les produits et les catégories sont enregistrés avec un nom et une description dans les deux langues, saisis côte à côte dans le tableau de bord.

Comment la langue est choisie

• La langue est la première partie de l'adresse. Un chemin sans langue redirige vers /en ; la langue du navigateur n'est pas détectée.
• Le sélecteur de langue remplace cette partie de l'adresse et reste sur la même page.
• Sur la boutique, le sens d'écriture est défini avant le premier affichage : une page arabe ne clignote donc jamais de gauche à droite.
• Les deux frontends envoient la langue de la page à l'API, pour que ses messages reviennent dans la même langue.

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 s'affiche comme une erreur de message manquant côté arabe : gardez donc les deux fichiers alignés.
• Les libellés de la barre latérale du tableau de bord admin font exception : ils sont écrits en anglais et en arabe dans src/layouts/dashboard/sidebar/config/navigationData.ts.
• Le texte entre accolades {curly} est rempli par l'application, comme {brand}. Gardez ces mots tels quels dans les deux langues.

Les libellés arabes des applications

Quand vous écrivez sur la boutique en arabe, utilisez les libellés affichés par ses écrans :

La page des rôles et l'onglet des paramètres appellent le personnel المشرفين là où la barre latérale dit المسؤولين. Choisissez un mot et changez l'autre dans messages/dashboard/settings/ si la différence compte pour vous.

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.
• Ses textes sont des fichiers JSON dans back-end/src/i18n/translations/en/ et ar/, un par domaine : admin, auth, category, common, countries, order, product, project, roles, settings, tasks, users.
• Les produits et les catégories reviennent dans les deux langues, sous la forme { "en": "…", "ar": "…" }, et le frontend choisit l'une d'elles.

Ajouter une langue à la boutique

Les deux langues sont inscrites dans plusieurs fichiers : en ajouter une troisième touche donc chacun d'eux. Les chemins se trouvent dans storefront/.

1. 01

   Ajoutez le code de langue

   Ajoutez-le aux listes de langues dans src/config/i18n.ts, src/proxy.ts, src/app/[locale]/layout.tsx et src/components/LanguageSwitcher.tsx, ainsi qu'à src/lib/seo/ogLocales.ts.
2. 02

   Traduisez les messages

   Copiez en.json vers <code>.json dans chacun des 12 dossiers sous messages/ et traduisez les valeurs.
3. 03

   Définissez le sens d'écriture

   Pour une langue de droite à gauche, ajoutez-la à RTL_LOCALES dans src/app/layout.tsx et à src/hooks/locale/useDirection.ts.
4. 04

   Étendez la marque et le manifest

   src/config/brand.config.ts et src/app/[locale]/manifest.ts contiennent une valeur en et une valeur ar par texte : ajoutez la vôtre. Cherchez "en" | "ar" dans src/features/ et étendez aussi ces types.
5. 05

   Ajoutez une police pour son écriture

   Si la langue a besoin de lettres absentes des polices livrées, ajoutez une police au lien Google Fonts dans src/app/layout.tsx et utilisez-la dans src/styles/base.css.

Ajouter une langue au tableau de bord admin

Les chemins se trouvent dans admin-dashboard/.

1. 01

   Ajoutez le code de langue

   Ajoutez-le aux listes de langues dans src/config/i18n.ts, src/proxy.ts, src/app/[locale]/layout.tsx et src/components/LanguageSwitcher.tsx.
2. 02

   Traduisez les messages

   Ajoutez un <code>.json à côté de chaque en.json sous messages/, y compris dans les dossiers de messages/dashboard/.
3. 03

   Traduisez la barre latérale

   Ajoutez votre langue à chaque libellé de src/layouts/dashboard/sidebar/config/navigationData.ts, ainsi qu'aux textes de src/config/brand.config.ts et src/app/[locale]/manifest.ts.
4. 04

   Définissez le sens d'écriture

   Pour une langue de droite à gauche, ajoutez-la à src/hooks/locale/useDirection.ts.

Ajouter une langue à l'API

1. 01

   Ajoutez le code de langue

   Ajoutez-le à supportedLocales dans back-end/src/i18n/i18n.service.ts.
2. 02

   Traduisez les messages

   Copiez back-end/src/i18n/translations/en/ vers un dossier portant le nom du code et traduisez les valeurs. Une clé que vous omettez se replie sur l'anglais.