Idiomas

Cómo funciona el restaurante en inglés y en á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 dispone toda la interfaz de derecha a izquierda, con IBM Plex Sans Arabic en el sitio web, y las cifras se mantienen en dígitos latinos en los dos idiomas.

Aplicación	Inglés	Árabe
Sitio web de pedidos	`/en/…`	`/ar/…`
Panel del personal	`/en/…`	`/ar/…`
API	`Accept-Language: en`	`Accept-Language: ar`

El inglés es el idioma por defecto. Los platos, las categorías, el combo, las cocinas y las secciones de la página de inicio se guardan con cada texto en los dos idiomas, que se introducen uno junto al otro en el panel, y la carga de datos rellena el árabe de todos ellos.

Cómo se elige el idioma

El idioma es la primera parte de la dirección. Una ruta sin idioma lleva a /en.
El selector de idioma cambia esa parte de la dirección y mantiene la página.
En el sitio web, la dirección se define antes del primer pintado, así que una página en árabe nunca parpadea de izquierda a derecha.
Los dos frontends envían el idioma de la página a la API, así que sus mensajes vuelven en el mismo idioma. Un pedido recuerda el idioma en el que se hizo.

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 de pedidos	`account`, `auth`, `cart`, `checkout`, `common`, `home`, `layouts`, `legal`, `locations`, `seo`, `store`, `support`, `tracking`, `wishlist`
Panel del personal	`ai-assistant`, `auth`, `common`, `dashboard` (con una carpeta por página), `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 la barra lateral del panel también son mensajes, bajo nav en messages/dashboard/en.json y ar.json.

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.
Los errores que ve un cliente, como una cocina cerrada, salen como claves del tipo errors.kitchen_closed, y el sitio web muestra su propia frase para cada uno.
Sus propios textos son archivos JSON en back-end/src/i18n/translations/en/ y ar/, uno por área: admin, auth, category, common, mail, order, product, roles, settings, users. El correo para restablecer la contraseña está en mail.
Los platos y los demás registros del menú vuelven con los dos 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 locales en src/config/i18n.ts, en src/proxy.ts y en src/app/[locale]/layout.tsx.
Copia cada messages/<namespace>/en.json a un archivo con el nombre del nuevo código y traduce los valores.
Si el idioma se escribe de derecha a izquierda, amplía la comprobación de dirección en src/app/layout.tsx, que solo conoce ar.
Añade el nuevo código a src/components/LanguageSwitcher.tsx, y sus textos a src/config/brand.config.ts, que contiene los nombres y el título de la página de inicio en en y ar.
Los componentes que eligen un texto del menú según el idioma, como los resultados de búsqueda, la barra de categorías y el mapa de cocinas, eligen entre en y ar. Busca "ar" en src/ y gestiona allí también el nuevo código.

Añade un idioma al panel

Añade el código a locales en src/config/i18n.ts, src/proxy.ts y src/app/[locale]/layout.tsx, y a las listas de idiomas de src/components/LanguageSwitcher.tsx, del menú de usuario y del ajuste Language.
Copia cada messages/**/en.json a un archivo con el nombre del nuevo código y traduce los valores.
Los formularios introducen cada texto del menú en inglés y en árabe, uno junto al otro (src/components/ui/LanguageTabs.tsx y los campos bilingües). Un tercer idioma ahí también necesita que la API lo guarde.

Añade un idioma a la API

La API conoce en y ar en back-end/src/i18n/i18n.service.ts y en las comprobaciones de pedidos y de contacto. Añade allí el nuevo código, copia src/i18n/translations/en/ a una carpeta con su nombre y traduce los archivos. Los registros del menú guardan un par { en, ar }, así que un tercer idioma en los datos supone un cambio en esos registros y en la carga de datos.