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.
| Application | Anglais | Arabe |
|---|---|---|
| Site public | /en/… | /ar/… |
| Tableau de bord de l'agence | /en/… | /ar/… |
| API | Accept-Language: en | Accept-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.
| Application | Namespaces |
|---|---|
| Site public | agency, amenities, common, compare, contact, home, layouts, privacy, properties, property, saved, viewing |
| Tableau de bord de l'agence | ai-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.jsonapparaî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/amenitiessur le site,messages/dashboard/domaindans le tableau de bord.
Ce que l'API traduit
- Les messages d'erreur et le
messaged'une écriture réussie reviennent dans la langue de l'en-têteAccept-Language.ar-AEcompte 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/etar/, 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/.
- Ajoutez le code à
localesdanssrc/config/i18n.tset danssrc/proxy.ts. - Copiez chaque
messages/<namespace>/en.jsondans un fichier nommé d'après le nouveau code, et traduisez les valeurs. - Si la langue s'écrit de droite à gauche, étendez
directionOfdanssrc/config/i18n.ts, qui ne connaît quear. - Ajoutez ses textes à
nameetdescriptiondanssrc/config/brand.config.ts. - 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 entreenetar. Cherchez"ar"danssrc/et traitez aussi le nouveau code à ces endroits.
Ajouter une langue au tableau de bord
- Ajoutez le code à
localesdanssrc/config/locales.ts(et àRTL_LOCALESsi elle s'écrit de droite à gauche) et danssrc/proxy.ts. Une langue ajoutée à cet endroit ajoute aussi son onglet à chaque champ conservé en plusieurs langues. - Copiez chaque
messages/**/en.jsondans un fichier nommé d'après le nouveau code, et traduisez les valeurs. - Cherchez
"ar"danssrc/pour les quelques endroits qui nomment encore directement les deux langues. - 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.