Añadir traducciones
Introducción
Otro caso, que seguro nos vamos a encontrar durante el desarrollo de un proyecto, es que necesitaremos mostrar mensajes nuevos con sus correspondientes traducciones.
Añadir un mensaje a un componente nuevo
Estamos creando un componente nuevo que necesita mostrar el siguiente mensaje:
El producto seleccionado solo está disponible para recogida en tienda
1. Crear el mensaje y sus traducciones
Tendremos que crear el mensaje y sus traducciones en los ficheros de internacionalización de la aplicación.
Primero añadiremos el identificador del mensaje en el types.ts:
...
'productPage.homeAvailability':string
'productPage.onlineStock':string
'productPage.noOnlineStock':string
'productPage.downloadDataSheet':string
'productPage.productInfo':string
'productPage.productExtraInfo':string
'productPage.relatedProducts':string
'productPage.upsellProducts':string
'productPage.ourSuggestions':string
'productPage.sale': string
'productPage.ref': string
+ 'productPage.availableOnlyStorePickup': string,
...Después deberemos añadir la traducción en todos los locales de la tienda.
...
'productPage.homeAvailability': 'Disponible a domicilio:',
'productPage.onlineStock': 'En existencia online',
'productPage.noOnlineStock': 'Sin Existencia online',
'productPage.downloadDataSheet': 'Descargar ficha técnica',
'productPage.productInfo': 'Información del producto',
'productPage.productExtraInfo': 'Información adicional',
'productPage.relatedProducts': 'Productos relacionados',
'productPage.upsellProducts': 'Otros productos que te pueden interesar',
'productPage.ourSuggestions': 'Nuestras sugerencias',
'productPage.sale': 'Oferta',
'productPage.ref': 'Ref',
+ 'productPage.availableOnlyStorePickup': 'El producto seleccionado solo está disponible para recogida en tienda',
...2. Mostrar el mensaje en el componente
Lo primero que deberemos hacer es importar el hook useI18n para tener acceso al método que nos permitirá mostrar el mensaje traducido.
Luego usaremos el identificador que hemos creado en types.ts para mostrar el mensaje en nuestro componente.
import useI18n from '@/i18n/hooks/useI18n'
export default function PickupMessage ({
product
}) {
const { t } = useI18n()
return (
<>
{product.onlyStorePickup &&
<p>{t('productPage.availableOnlyStorePickup')}</p>
}
</>
)
}