Idiomas
Cómo funciona la agencia en inglés y árabe, cómo cambiar cualquier texto y qué cambiar para añadir un idioma.
Para el paquete Full Stack
Los idiomas incluidos
Inglés y árabe, en las tres aplicaciones. El árabe coloca toda la interfaz de derecha a izquierda, con tipografías árabes para el texto y los títulos, y las cifras y los precios se mantienen en dígitos latinos en ambos idiomas.
| Aplicación | Inglés | Árabe |
|---|---|---|
| Sitio web público | /en/… | /ar/… |
| Panel de la agencia | /en/… | /ar/… |
| API | Accept-Language: en | Accept-Language: ar |
El inglés es el idioma por defecto. El título, la descripción corta, la descripción, la ciudad y los textos SEO de una propiedad, y el nombre y la descripción de un barrio, se guardan en ambos idiomas y se introducen lado a lado en el panel; el inglés es obligatorio, y el árabe puede venir después. La carga inicial rellena el árabe de la agencia de demostración.
Cómo se elige el idioma
- El idioma es la primera parte de la dirección. Una ruta sin él va a
/en(la raíz del panel va a/en/dashboard). - El menú de idioma cambia esa parte de la dirección y mantiene la página.
- Ambos frontends envían el idioma de la página a la API, así que sus mensajes vuelven en el mismo idioma.
Cambia un texto
Cada palabra visible está en messages/<namespace>/en.json y ar.json, en la carpeta de cada frontend. Cambia el valor, conserva la clave y cámbialo en ambos archivos.
| Aplicación | Espacios de nombres |
|---|---|
| Sitio web público | agency, amenities, common, compare, contact, home, layouts, privacy, properties, property, saved, viewing |
| Panel de la agencia | ai-assistant, auth, common, dashboard (con una carpeta por página: domain, leads, overview, properties, property-editor, settings, studio, viewings), demo-credentials, layouts |
- Una clave que falta en
ar.jsonaparece como mensaje ausente en la versión árabe, así que mantén los dos archivos sincronizados. - El texto entre llaves
{curly}lo rellena la aplicación, por ejemplo{count}o{name}. Mantén esas palabras tal cual en los dos idiomas. - Las etiquetas de comodidades, tipos de propiedad y estados también son mensajes:
messages/amenitiesen el sitio web,messages/dashboard/domainen el panel.
Qué traduce la API
- Los mensajes de error y el
messagede una escritura correcta vuelven en el idioma de la cabeceraAccept-Language.ar-AEcuenta como árabe; cualquier idioma que la API no tenga vuelve al inglés. - Sus propios textos son archivos JSON en
back-end/src/i18n/translations/en/yar/, uno por área:admin,auth,common,lead,neighborhood,property,roles,settings,viewing. - Las propiedades y los barrios vuelven con ambos idiomas, como
{ "en": "…", "ar": "…" }, y el frontend elige uno.
Añade un idioma al sitio web
Los dos idiomas están escritos en unos pocos archivos, así que añadir un tercero afecta a cada uno de ellos. Las rutas están dentro de storefront/.
- Añade el código a
localesensrc/config/i18n.tsy ensrc/proxy.ts. - Copia cada
messages/<namespace>/en.jsona un archivo con el nombre del nuevo código y traduce los valores. - Si el idioma se escribe de derecha a izquierda, amplía
directionOfensrc/config/i18n.ts, que solo conocear. - Añade sus textos a
nameydescriptionensrc/config/brand.config.ts. - El código que elige un texto guardado según el idioma, como
src/lib/utils/pickLocalized.ts, el formato de fecha y hora de la solicitud de visita y el calendario, elige entreenyar. Busca ensrc/el texto"ar"y trata también allí el nuevo código.
Añade un idioma al panel
- Añade el código a
localesensrc/config/locales.ts(y aRTL_LOCALESsi se escribe de derecha a izquierda) y ensrc/proxy.ts. Un idioma añadido ahí también añade su pestaña a cada campo que se guarda en varios idiomas. - Copia cada
messages/**/en.jsona un archivo con el nombre del nuevo código y traduce los valores. - Busca en
src/el texto"ar"para encontrar los pocos lugares que aún nombran directamente los dos idiomas. - Un tercer idioma en los textos guardados también necesita que la API lo acepte.
Añade un idioma a la API
La API conoce en y ar en back-end/src/i18n/i18n.service.ts. Añade allí el nuevo código, copia src/i18n/translations/en/ a una carpeta con su nombre y traduce los archivos. Los textos guardados son un par { en, ar }, validado por src/common/dto/localized.dto.ts, así que un tercer idioma en los datos es un cambio en esas clases, en las entidades y en la carga inicial.