Idiomas

Los idiomas incluidos

Inglés y árabe, en las tres aplicaciones. El árabe dispone toda la interfaz de derecha a izquierda, con sus propias fuentes en la tienda.

El inglés es el idioma por defecto. Los productos y las categorías se guardan con un nombre y una descripción en ambos idiomas, que se introducen uno al lado del otro en el panel.

Cómo se elige el idioma

• El idioma es la primera parte de la dirección. Una ruta sin idioma va a /en; no se detecta el idioma del navegador.
• El selector de idioma cambia esa parte de la dirección y mantiene la página.
• En la tienda, la dirección del texto se fija antes del primer pintado, así que una página en árabe nunca aparece un instante de izquierda a derecha.
• Ambos frontends envían a la API el idioma de la página, 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.

• Una clave que falta en ar.json aparece como un error de mensaje ausente en la parte árabe, así que mantén los dos archivos coordinados.
• Las etiquetas de la barra lateral del panel son la excepción: están escritas en inglés y en árabe en src/layouts/dashboard/sidebar/config/navigationData.ts.
• El texto entre llaves {curly} lo rellena la aplicación, como {brand}. Conserva esas palabras tal cual en ambos idiomas.

Las etiquetas en árabe de las propias aplicaciones

Cuando escribas sobre la tienda en árabe, usa las etiquetas que muestran sus pantallas:

La página de roles y la pestaña de ajustes llaman al personal المشرفين, mientras que la barra lateral dice المسؤولين. Elige una palabra y cambia la otra en messages/dashboard/settings/ si la diferencia te importa.

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-SA cuenta como árabe; cualquier idioma que la API no tenga recurre al inglés.
• Sus textos son archivos JSON en back-end/src/i18n/translations/en/ y ar/, uno por área: admin, auth, category, common, countries, order, product, project, roles, settings, tasks, users.
• Los productos y las categorías vuelven con ambos idiomas, como { "en": "…", "ar": "…" }, y el frontend elige uno.

Añade un idioma a la tienda

Los dos idiomas están escritos en varios archivos, así que añadir un tercero toca cada uno de ellos. Las rutas están dentro de storefront/.

1. 01

   Añade el código del idioma

   Añádelo a las listas de idiomas de src/config/i18n.ts, src/proxy.ts, src/app/[locale]/layout.tsx y src/components/LanguageSwitcher.tsx, y a src/lib/seo/ogLocales.ts.
2. 02

   Traduce los mensajes

   Copia en.json a <code>.json en cada una de las 12 carpetas de messages/ y traduce los valores.
3. 03

   Configura la dirección del texto

   Para un idioma de derecha a izquierda, añádelo a RTL_LOCALES en src/app/layout.tsx y a src/hooks/locale/useDirection.ts.
4. 04

   Amplía la marca y el manifiesto

   src/config/brand.config.ts y src/app/[locale]/manifest.ts tienen un valor en y uno ar por texto: añade el tuyo. Busca "en" | "ar" en src/features/ y amplía también esos tipos.
5. 05

   Añade una fuente para su sistema de escritura

   Si el idioma necesita letras que no tienen las fuentes incluidas, añade una fuente al enlace de Google Fonts en src/app/layout.tsx y úsala en src/styles/base.css.

Añade un idioma al panel de administración

Las rutas están dentro de admin-dashboard/.

1. 01

   Añade el código del idioma

   Añádelo a las listas de idiomas de src/config/i18n.ts, src/proxy.ts, src/app/[locale]/layout.tsx y src/components/LanguageSwitcher.tsx.
2. 02

   Traduce los mensajes

   Añade un <code>.json junto a cada en.json dentro de messages/, incluidas las carpetas de messages/dashboard/.
3. 03

   Traduce la barra lateral

   Añade tu idioma a cada etiqueta de src/layouts/dashboard/sidebar/config/navigationData.ts, y a los textos de src/config/brand.config.ts y src/app/[locale]/manifest.ts.
4. 04

   Configura la dirección del texto

   Para un idioma de derecha a izquierda, añádelo a src/hooks/locale/useDirection.ts.

Añade un idioma a la API

1. 01

   Añade el código del idioma

   Añádelo a supportedLocales en back-end/src/i18n/i18n.service.ts.
2. 02

   Traduce los mensajes

   Copia back-end/src/i18n/translations/en/ a una carpeta con el nombre del código y traduce los valores. Una clave que omitas recurre al inglés.