Instruction file imported from AlvaroMarcha/onlineshop-template (.github/instructions/i18n.instructions.md). Copyright stays with the author.

i18n — onlineshop-template

Ficheros de traducción

• Ubicación: src/assets/i18n/
• Idiomas: es.json (defecto) · en.json
• Formato: JSON anidado con claves en dot-notation

{
  "section": {
    "sub_section": {
      "key": "Texto traducido"
    }
  }
}

Regla OBLIGATORIA

Toda cadena visible al usuario debe tener una clave en AMBOS es.json Y en.json.
❌ Nunca hardcodear texto en templates o TypeScript — siempre usar claves i18n.

Nomenclatura de claves

• Lowercase con guiones bajos para espacios: my_key_name
• Agrupadas por feature/sección: cart.add_button, shop.filter_label
• Descriptivas pero concisas: auth.password_reset_sent no auth.msg3
• Ejemplos del proyecto:

  header.home  |  cart.total  |  auth.login_button
  shop.add_to_cart  |  product.reviews_title  |  global.error_generic
  

Uso en templates

<!-- Pipe (preferido para texto estático) -->
<span>{{ 'header.home' | translate }}</span>

<!-- En atributos -->
<p-button [label]="'cart.add_button' | translate" />
<input [placeholder]="'auth.email_placeholder' | translate" />

<!-- Con parámetros dinámicos -->
<span>{{ 'cart.items_count' | translate: { count: itemCount } }}</span>

Uso en TypeScript

// Clave única
const label = await this.lang.tOne('header.home');

// Múltiples claves de golpe (batch — preferido en ngOnInit)
const t = await this.lang.tMany(['header.home', 'header.shop', 'cart.total']);
this.menuItems = [{ label: t['header.home'] }, ...];

// Cambiar idioma
this.lang.changeLanguage('en');

Proceso para añadir nuevas traducciones

1. Añadir la clave a es.json con el texto en español.
2. Añadir la misma clave a en.json con el texto en inglés.
3. Usar la clave en el template o componente.
4. ❌ Nunca añadir a solo un fichero de idioma.

Estructura de claves recomendada por sección

global.*          → mensajes genéricos (error_generic, success, cancel, confirm)
header.*          → navegación principal
footer.*          → pie de página
auth.*            → login, registro, recuperación de contraseña
shop.*            → listado de productos, filtros
product.*         → detalle de producto, reseñas
cart.*            → carrito de compra
profile.*         → perfil de usuario
admin.*           → panel de administración