Vitrine para módulo internacional

É preciso adaptar a vitrine da loja para suportar o carregamento de mais de um idioma. Iremos listar algumas sugestões de alterações, no entanto é importante atentar-se às características do seu projeto. De forma geral, dividimos as alterações em dois cenários :

Conteúdos: utilizamos uma condicional if para selecionar o conteúdo que normalmente é cadastrado em posições diferentes, como banners e menus. Para alterar esses conteúdos recomendamos que você revise as páginas da loja nos arquivos liquid do projeto, para garantir que todos os textos estão nos idiomas desejados.
Informações de produto utilizamos uma condicional ìf combinada com um marcador de separação nos textos de diferentes idiomas, como|ou[idioma]. Nesses casos separamos os textos (split) pelo marcador utilizado no cadastro dos textos no Admin, como por exemplo no cadastro de descrição de produto.

Você também precisa adaptar a vitrine para seleção de idioma.

🚧
Nos itens a seguir sugerimos uma ordem para as alterações no front-end da loja que você está desenvolvendo. No entanto, é importante que você atente-se às alterações no front-end que dependem do projeto da loja: se é uma loja a partir de um template, se é uma loja toda customizada, ou se as alterações serão feitas em uma loja virtual que já foi lançada. Confira as sugestões de alterações e adapte para o cenário do seu projeto.

Seleção de idioma

A princípio é preciso criar uma forma de seleção de idioma para navegação na loja. Há diferentes formas de disponibilizar a seleção de idioma na vitrine: um botão de seleção no header da loja, uma página inicial de seleção de idioma, ou um pop-up de seleção. Independente da forma de seleção que você pretende utilizar na sua loja, é importante atentar-se que idioma deve ser armazenado na variável language. Para que isso aconteça é necessário adicionar o parâmetro language na URL da loja.

A plataforma utiliza a variável language para alterar o idioma da vitrine e no final da compra direcionar o pedido para o pagamento internacional. A variável pode receber os idiomas: português (pt-br), inglês (en), alemão (de) e espanhol (es).

📘
Por default o valor da variável language é pt-br.

No exemplo abaixo temos um arquivo liquid que verifica o idioma selecionado e disponibiliza um botão de alteração de idioma. Note que a mudança do idioma ocorre pela URL da loja. Caso a vitrine esteja em inglês, o botão para mudança para português adicionar o trecho /?language=pt-br na URL da loja.


<div class="language">
<div class="select">
  {% if language == 'en' %}
    <a href="/?language=pt-br">
      BRA
    </a>
  {% else %}
    <a href="/?language=en">
      INTL
    </a>
  {% endif %}
</div>
</div>

Conteúdos

Banners

A posição dos banners da vitrine da loja dependem do projeto de customização do front-end da loja. O lojista cadastra os banners de acordo com as orientações de cadastro que o desenvolvedor do projeto disponibiliza para o lojista. De forma geral, o desenvolvedor no final do projeto constrói as orientações de cadastro para o lojista para que o cadastro de banners sejam de acordo com as disposições que eles possuem na vitrine.

❗
Se você está alterando o código de uma loja já lançada, confira as orientações de cadastro que a loja já possui. Lembre-se de alterar as orientações de cadastro no final das alterações front-end do módulo internacional. O lojista precisa das instruções de como cadastrar as posições de banners em mais de um idioma.

Para o módulo internacional é preciso adaptar o código front-end do projeto para que o lojista possa cadastrar e disponibilizar banners em diferentes idiomas. Vamos exemplificar como alterar as páginas ou seções que possuem banners no front-end.

Exemplo 1

{% 
  assign position_banner_principal = "contato-informacoes"
  if language == "en"
    assign position_banner_principal = position_banner_principal | append: "-en"
%}

Nesse exemplo há dois banners que ficarão disponíveis visualmente no mesmo lugar da vitrine, de acordo com o idioma. O banner principal tem a posição contato-informacoes quando a loja está em português, no entanto quando a loja estiver em inglês o mesmo banner terá a posição contato-informacoes-en.

Exemplo 2

{% assign banner_position_2 = 'sobre-imagem-texto-1' %}
{% assign banner_position_3 = 'sobre-imagem-texto-2' %}
{% assign banner_position_4 = 'sobre-imagem-final' %}
{% assign banner_position_5 = 'sobre-texto-final' %}
{% assign banner_position_6 = 'sobre-item-final' %}

{% unless language == 'pt-BR' %}
  {% assign banner_position_2 = banner_position_2 | append: '_' | append: language %}
  {% assign banner_position_3 = banner_position_3 | append: '_' | append: language %}
  {% assign banner_position_4 = banner_position_4 | append: '_' | append: language %}
  {% assign banner_position_5 = banner_position_5 | append: '_' | append: language %}
  {% assign banner_position_6 = banner_position_6 | append: '_' | append: language %}
{% endunless %}

Nesse segundo exemplo o código altera a posição do banner de acordo com o idioma que está na variável language. Se a loja possui mais de dois idiomas, a posição dos idiomas segue a quantidade de idiomas que a vitrine tem.

Note que nos dois exemplos utilizamos um padrão para nomear as posições de banners. O que diferencia os idiomas no banner é a sigla no final do nome de cada posição. Utilizamos esse padrão para auxiliar tanto para o cadastro e banners e para o código de seleção do banner:

Posição em português: banner_position_2
Posição em inglês: banner_position_2_en
Posição em português: position_banner_principal
Posição em inglês: position_banner_principal-en

🚧
Lembre-se de sempre utilizar o mesmo padrão para todos os banners e menus da loja: utilize- ou _.

De maneira geral a mudança de idioma no front-end para banners precisa de uma condicional para alteração do conteúdo. Nesses casos de banners em mais de um idioma, o front-end precisa selecionar o banner correto para cada idioma. Aqui é importante você deve atentar-se para as páginas que contém banners e como você precisa selecionar o banner correto. Se você utiliza de um template base para customização confira no artigo de organização de arquivos quais são arquivos liquid que possuem banners.

📘
Esse formato de seleção de conteúdo também pode ser usado em menus, tags e páginas institucionais.

Menus

Similarmente aos banners, os menus também são conteúdo s que são cadastrados por posição. Por isso, recomendamos alterar os menus da mesma forma que os banners: utilizando uma condicional na variável language.

Veja no exemplo abaixo a seleção do menu em uma vitrine que possui dois idiomas:

{% assign hide_logo_class = '' %}
{% assign menu_position = 'principal' %}

{% unless language == 'pt-BR' %}
  {% assign menu_position = menu_position | append: '-' | append: language %}
{% endunless %}

Páginas institucionais

Há duas formas de utilizar as páginas institucionais em mais de um idioma:

Criando páginas diferentes: uma página para cada idioma, e cada página com uma URLs específica. Dessa forma, você direciona a URL na vitrine de acordo com o idioma em language.
Utilizando de conteúdo(como em banners e menus), para selecionar o texto desejado de acordo com o idioma.

Textos estáticos

Lembre de atualizar todos os textos estáticos da vitrine para todos os idiomas disponíveis. Veja no exemplo abaixo com ficaria em caso de dois idiomas na página de login:

{% assign text_password = 'Senha' %}
{% assign text_check_password = 'Confirme a senha' %}
{% assign text_password_flavor = 'Insira aqui sua senha' %}
{% assign text_forgot = 'Esqueci minha senha' %}
{% assign text_enter_flavor = 'Entrar na minha conta' %}
{% assign text_login = 'Entrar' %}
{% assign text_return_login = 'Voltar para o login' %}
{% assign text_recover_password = 'Recuperar senha' %}
{% assign text_not_registered = 'Ainda não tenho cadastro' %}
{% assign text_name = 'Nome' %}
{% assign text_last_name = 'Sobrenome' %}
{% assign text_submit = 'Cadastrar' %}

{% if language == 'en' %}
  {% assign text_password = 'Password' %}
  {% assign text_check_password = 'Confirm password' %}
  {% assign text_password_flavor = 'Your password here' %}
  {% assign text_forgot = 'Forgot password' %}
  {% assign text_enter_flavor = 'Login to your account' %}
  {% assign text_login = 'Login' %}
  {% assign text_return_login = 'Return to login' %}
  {% assign text_recover_password = 'Recover password' %}
  {% assign text_not_registered = 'Not registered yet' %}
  {% assign text_name = 'Name' %}
  {% assign text_last_name = 'Last name' %}
  {% assign text_submit = 'Register' %}
{% endif %}

Informações de produto

A diferenciação entre os idiomas na página de produto utiliza do modelo de cadastro do produto internacional. Utilizamos split de conteúdo de acordo com as informações do produto:

No nome do produto: a loja cadastrar os nomes dos produtos em cada idioma da vitrine. Utiliza-se o mesmo campo para os nomes em diferentes idiomas, separando-os uma barra vertical (pipe) |. Por exemplo, uma loja que possui a vitrine em português e inglês:
Nome do produto: Sunga Amarração Printed | Swim Brief Lashing Printed.
Nas alterações front-end você utiliza um split para separar os dois nomes e selecionar o nome de cada idioma:
```
  {% if product.name contains '|' %}
    {% assign product_name = product.name | split: '|' | first | strip %}
    {% if language == 'en' %}
      {% assign product_name = product.name | split: '|' | last | strip %}
    {% endif %}
  {% endif %}
```

Na descrição do produto: na descrição do produto diferencia os dois idiomas utilizando o nome da língua entre colchetes: [english], [spanish], [german], etc. Utilizaremos esse modelo de separação do conteúdo na descrição para o split no front-end:

{% if product.description contains '[idioma]' %}
  {% assign product_description = product.description | split: '[idioma]' | first %}
  {% if language == 'en' %}
    {% assign product_description = product.description | split: '[idioma]' | last %}
  {% endif %}
{% endif %

Nos atributos do produto: diferenciamo tamanhos em idiomas diferentes como no nome do produto, utilizando barra vertical (pipe) |:

No caso em que as alterações do front-end ocorrem pelo split, consideramos esse conteúdo como dinâmico.

As alterações para o idioma na página do produto deve ser nos arquivos liquid referentes ao produto. Lembre-se que se a página do produto houver mais conteúdo, como produtos relacionados e pop-up de cadastro para produtos indisponíveis, você também precisará alterar esses arquivos.

{% if related_tag != blank %}
  {% render 'partials/product/related_products', tag: related_tag.name, current_product: current_product, language: language %}
{% endif %}