Internacionalización (I18N)

Configura y agrega nuevos idiomas a tus widgets.

Los Widgets de este catalogo vienen con i18n por defecto en 2 lenguajes, español e inglés, 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 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

Tip

Para saber más sobre internacionalización y vue-i18n, ver 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 Plantillas del sitio. La podemos declarar en Views --> 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. Por ejemplo, si queremos agregar portugués de Brasil, agrega pt-BR.json:

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

Atención

La estructura del archivo de idioma tiene que ser un objeto json:

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 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;
}