Ir al artículo
Aniq-UI

VelraIdiomas

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ónInglésÁrabe
Sitio web público/en/…/ar/…
Panel de la agencia/en/…/ar/…
APIAccept-Language: enAccept-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ónEspacios de nombres
Sitio web públicoagency, amenities, common, compare, contact, home, layouts, privacy, properties, property, saved, viewing
Panel de la agenciaai-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.json aparece 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/amenities en el sitio web, messages/dashboard/domain en el panel.

Qué traduce la API

  • Los mensajes de error y el message de una escritura correcta vuelven en el idioma de la cabecera Accept-Language. ar-AE cuenta 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/ y ar/, 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/.

  1. Añade el código a locales en src/config/i18n.ts y en src/proxy.ts.
  2. Copia cada messages/<namespace>/en.json a un archivo con el nombre del nuevo código y traduce los valores.
  3. Si el idioma se escribe de derecha a izquierda, amplía directionOf en src/config/i18n.ts, que solo conoce ar.
  4. Añade sus textos a name y description en src/config/brand.config.ts.
  5. 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 entre en y ar. Busca en src/ el texto "ar" y trata también allí el nuevo código.

Añade un idioma al panel

  1. Añade el código a locales en src/config/locales.ts (y a RTL_LOCALES si se escribe de derecha a izquierda) y en src/proxy.ts. Un idioma añadido ahí también añade su pestaña a cada campo que se guarda en varios idiomas.
  2. Copia cada messages/**/en.json a un archivo con el nombre del nuevo código y traduce los valores.
  3. Busca en src/ el texto "ar" para encontrar los pocos lugares que aún nombran directamente los dos idiomas.
  4. 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.

¿Te atascaste en un paso?

Busca una solución antes de empezar de nuevo.

Solución de problemas

Preferencias de Cookies

Utilizamos cookies para mejorar tu experiencia de navegación, analizar el tráfico del sitio y personalizar el contenido. Al hacer clic en "Aceptar Todo", consientes nuestro uso de cookies para análisis y publicidad personalizada.