# Internacionalización (I18N)

Los Widgets de este catalogo vienen con i18n por defecto en 2 lenguajes, español e ingles, y con la posibilidad de agregar los idiomas que necesites de manera fácil y rápida.

Para manejar la internacionalización en los Widgets usamos el paquete Vue I18n (opens new window) instalado mediante el plugin vue-cli-plugin-i18n (opens new window), pueden revisar su documentación aquí (opens new window). Al instalar con el plugin se crea una carpeta para los idiomas llamada locales y un archivo de configuración llamado i18n.js.



 

 
 
 

├── src/
│   ├── App.vue
│   ├── i18n.js
│   ├── main.js
│   ├── locales/
│   │   ├── en-US.json
│   │   └── es-CL.json

Nota

Para saber mas sobre internacionalización y vue-i18n les recomiendo revisar este curso gratuito Internationalization with vue-i18n (opens new window) de VueSchool (opens new window)

# Configuración

En el archivo de configuración obtendremos el idioma del sitio que tenemos en la plataforma




 






 




import Vue from 'vue';
import VueI18n from 'vue-i18n';

const LANG = window.liquid ? window.liquid.lang : 'es-CL';

Vue.use(VueI18n);

//... more code

export default new VueI18n({
  locale: LANG,
  fallbackLocale: 'es-CL',
  messages: loadLocaleMessages(),
});

La variable liquid.lang la tenemos que crear en la plataforma, en la sección Templates del sitio. La podemos declarar en Views --s> Custom --> Javascript --> theme

window.liquid = {
 lang: '{{@site.language}}' === 'en' ? 'en-US' : 'es-CL'
};

# Agregar un idioma

Para agregar un idioma nuevo al sitio, simplemente creamos un archivo JSON en la carpeta locales donde su nombre es el código del idioma a añadir.




 


├── src/
│   ├── locales/
│   │   ├── en-US.json
│   │   ├── pt-BR.json <-- nuevo idioma
│   │   └── es-CL.json

La estructura del archivo de idioma es un objeto json:

{
  "key1": "this is message1", // basic
  "nested": { // nested
    "message1": "this is nested message1"
  },
  "errors": [ // array
    "this is 0 error code message",
    {  // object in array
      "internal1": "this is internal 1 error message"
    },
    [  // array in array
      "this is nested array error 1"
    ]
  ]
},

# I18n y validación de formularios

Los Widgets del catalogo traen por defecto un validador de formularios llamado VeeValidate (opens new window) y para poder localizar los mensajes de error que el validador nos muestra tenemos que hacer una pequeña modificación al archivo de configuración de i18n.

  1. Importamos los mensajes de error en el/los idiomas que necesitamos
  2. En la función loadLocaleMessages agregamos los mensajes del validador en el idioma que corresponde
  3. Retornamos el objeto messages modificado
// 1
import esCL from 'vee-validate/dist/locale/es.json';
import enUS from 'vee-validate/dist/locale/en.json';
function loadLocaleMessages() {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i);
  const messages = {};
  locales.keys().forEach((key) => {...});
  // 2
  messages['es-CL'] = {
    ...messages['es-CL'],
    validations: esCL.messages,
  };
  // 2
  messages['en-US'] = {
    ...messages['en-US'],
    validations: enUS.messages,
  };
  // 3
  return messages;
}