Aller à l'article
Aniq-UI

VelraLangues

Langues

Comment l'agence fonctionne en anglais et en arabe, comment modifier un texte, et quoi changer pour ajouter une langue.

Pour le pack Full Stack

Les langues livrées

Anglais et arabe, dans les trois applications. L'arabe dispose toute l'interface de droite à gauche, avec des polices arabes pour le texte et les titres, et les chiffres et les prix restent en chiffres latins dans les deux langues.

ApplicationAnglaisArabe
Site public/en/…/ar/…
Tableau de bord de l'agence/en/…/ar/…
APIAccept-Language: enAccept-Language: ar

L'anglais est la langue par défaut. Le titre, la description courte, la description, la ville et les textes SEO d'un bien, ainsi que le nom et la description d'un quartier, sont stockés dans les deux langues et saisis côte à côte dans le tableau de bord ; l'anglais est obligatoire, l'arabe peut suivre plus tard. Le seed remplit l'arabe pour l'agence de démonstration.

Comment la langue est choisie

  • La langue est la première partie de l'adresse. Un chemin sans langue va vers /en (la racine du tableau de bord va vers /en/dashboard).
  • Le menu de langue remplace cette partie de l'adresse et garde la page.
  • Les deux frontends envoient la langue de la page à l'API, ses messages reviennent donc 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.

ApplicationNamespaces
Site publicagency, amenities, common, compare, contact, home, layouts, privacy, properties, property, saved, viewing
Tableau de bord de l'agenceai-assistant, auth, common, dashboard (avec un dossier par page : domain, leads, overview, properties, property-editor, settings, studio, viewings), demo-credentials, layouts
  • 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 des équipements, des types de bien et des statuts sont aussi des messages : messages/amenities sur le site, messages/dashboard/domain dans le tableau de bord.

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-AE compte comme de l'arabe ; toute langue que l'API n'a pas retombe sur l'anglais.
  • Ses propres textes sont des fichiers JSON dans back-end/src/i18n/translations/en/ et ar/, un par domaine : admin, auth, common, lead, neighborhood, property, roles, settings, viewing.
  • Les biens et les quartiers 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 et dans src/proxy.ts.
  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 directionOf dans src/config/i18n.ts, qui ne connaît que ar.
  4. Ajoutez ses textes à name et description dans src/config/brand.config.ts.
  5. Le code qui choisit un texte stocké selon la langue, comme src/lib/utils/pickLocalized.ts, le format de la date et de l'heure de la demande de visite et du calendrier, choisit entre en et ar. Cherchez "ar" dans src/ et traitez aussi le nouveau code à ces endroits.

Ajouter une langue au tableau de bord

  1. Ajoutez le code à locales dans src/config/locales.ts (et à RTL_LOCALES si elle s'écrit de droite à gauche) et dans src/proxy.ts. Une langue ajoutée à cet endroit ajoute aussi son onglet à chaque champ conservé en plusieurs langues.
  2. Copiez chaque messages/**/en.json dans un fichier nommé d'après le nouveau code, et traduisez les valeurs.
  3. Cherchez "ar" dans src/ pour les quelques endroits qui nomment encore directement les deux langues.
  4. Une troisième langue dans les textes stockés demande aussi que l'API l'accepte.

Ajouter une langue à l'API

L'API connaît en et ar dans back-end/src/i18n/i18n.service.ts. Ajoutez-y le nouveau code, copiez src/i18n/translations/en/ dans un dossier portant son nom et traduisez les fichiers. Les textes stockés sont une paire { en, ar }, validée par src/common/dto/localized.dto.ts : une troisième langue dans les données demande donc de modifier ces classes, les entités et le seed.

Bloqué sur une étape ?

Trouvez une solution avant de tout recommencer.

Dépannage

Préférences des Cookies

Nous utilisons des cookies pour améliorer votre expérience de navigation, analyser le trafic du site et personnaliser le contenu. En cliquant sur "Accepter Tout", vous consentez à notre utilisation des cookies pour l'analyse et la publicité personnalisée.