O seletor front end de línguas.
Existem dois scripts no plugin: vtex-i18n.js e vtex-locale-selector.js. Sendo o segundo dependente do primeiro.
O vtex-i18n.js é responsável pelo locale, countryCode e currency do site. Enquanto o vtex-locale-selector.js cuida do plugin i18next.
Diferente do vtex-locale-selector.js, o vtex-i18n.js é iniciado automaticamente, não necessitando de nenhuma instanciação ou script extra.
O locale tem seu default definido na seguinte ordem de ocorrência:
<!-- Atributo lang da tag html -->
<html lang="en-US">
<!-- Tag meta com language -->
<meta name="language" content="en-US"/>
<!-- Fallback para pt-BR -->O countryCode irá setar como default :
<!-- Tag meta com country -->
<meta name="country" content="USA"/>
<!-- Fallback para BRA -->Dependência: jQuery.
Troca a língua corrente.
| Param | tipo | exemplo | descrição |
|---|---|---|---|
| locale | string | "en-US" |
Locale da língua a ser usada. |
Retorna o locale corrente.
Seta uma função de callback ao trocar a língua.
| Param | tipo | exemplo | descrição |
|---|---|---|---|
| callback | function ou string | função ou "vtex.i18n.update" |
Caso seja do tipo function, o callback chamará a função passando como parametro o novo locale. Caso seja do tipo string, assume-se que será chamado um canal do Radio.Ex: para o parametro do tipo string vtex.i18n.update, um possível callback a ser chamado seria: radio('vtex.i18n.update').broadcast('pt-BR') |
Troca o countryCode a ser usado pela função vtex.i18n.getCurrencySymbol
| Param | tipo | exemplo | descrição |
|---|---|---|---|
| countryCode | string | "USA" |
countryCode do país. |
Retorna o countryCode corrente.
Seta uma função de callback ao trocar o countryCode.
| Param | tipo | exemplo | descrição |
|---|---|---|---|
| callback | function ou string | função ou "vtex.countryCode.update" |
Caso seja do tipo function, o callback chamará a função passando como parametro o novo countryCode. Caso seja do tipo string, assume-se que será chamado um canal do Radio.Ex: para o parametro do tipo string vtex.countryCode.update, um possível callback a ser chamado seria: radio('vtex.countryCode.update').broadcast('ARG') |
Retorna o símbolo monetário do país.
| Param | tipo | exemplo | descrição |
|---|---|---|---|
| countryCode | string | "ARG" (opcional) |
Tem como default o valor de vtex.i18n.getCountryCode ou pelo countryCode passado como parametro. |
Dependências: vtex-i18n.js, jQuery, Select2, i18next.
Primeiramente carregue todas as dependências. Em seguida, carregue seus arquivos de translations. Você pode encontrar um exemplo do formato a ser seguido em /src/coffee/translation-en-US.coffee.
Agora é só inicar o plugin no evento de $(document).ready() do jQuery com a função vtex.i18n.init().
Para traduzir um elemento na página, adicione o atributo data-i18n com o valor da chave do arquivo de translation. Por exemplo:
<p data-i18n="chave"></p>Caso queira traduzir um atributo do elemento HTML, como o atributo title, alt ou placeholder. Use o seguinte formato:
<a data-i18n="[title]chave"></a>Caso não queira ter um select para o usuário final trocar de língua, apenas não inclua o elemento com o id #vtex-locale-selector, tudo continuará a funcionar normalmente. Ou seja, você ainda poderá usar a API por Javascript.
Inicia o plugin.
Podendo ser extensível com a biblioteca de pub/sub Radio.js.
VTEX - 2013