Guias e Tutoriais
Deixe seu feedback

Vitrine para módulo internacional

Como alterar o front-end da loja para suportar o módulo internacional

Suggest Edits

É 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 três 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 if 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.
  • Componentes utilizamos uma condicional if no liquid e no javascript dos componentes para adaptar os textos estáticos e as posições de banners, de acordo com a linguage.

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 salientar que as alterações variam de acordo com o contexto de cada loja: se a mesma foi gerada a partir de um template, se é totalmente 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

Será necessário criar uma forma de seleção de idioma para navegação na loja. É possível implementar de diferentes formas: um botão de seleção no header, uma página inicial contendo os seletores para cada idioma, ou um pop-up de seleção. Independente da forma escolhida, é 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 mesmo. Note que a mudança do idioma ocorre pela URL da loja. Caso a vitrine esteja em inglês, o botão para português adicionará o trecho /?language=pt-BR na URL da loja.

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

Conteúdos

Banners

A posição dos banners da vitrine 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.

❗

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 após concluir as 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, permitindo que o lojista cadastre e disponibilize banners em diferentes idiomas. Vamos exemplificar como as posições de banners podem ser definidas.

Exemplo 1

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

Nesse exemplo acima 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, ele terá a posição contato-informacoes-en.

Exemplo 2

{% assign banner_position_2 = 'sobre-imagem-texto-1' | append: '-' | append: language | remove: '-pt-BR' %}
{% assign banner_position_3 = 'sobre-imagem-texto-2' | append: '-' | append: language | remove: '-pt-BR' %}
{% assign banner_position_4 = 'sobre-imagem-final' | append: '-' | append: language | remove: '-pt-BR' %}
{% assign banner_position_5 = 'sobre-texto-final' | append: '-' | append: language | remove: '-pt-BR' %}
{% assign banner_position_6 = 'sobre-item-final' | append: '-' | append: language | remove: '-pt-BR' %}

Nesse exemplo dois, o código altera a posição do banner de acordo com o idioma que está na variável language. Se o idioma for pt-BR, o trecho -pt-BR é removido da posição, não impactado no cadastro regular de banners. Esse modelo permite que a posição do banner se adeque a mais de um idioma, pois ela recebe, de maneira dinâmica, a sigla do idioma.

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 de cada posição.

🚧

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

De maneira geral, a mudança de idioma no front-end, para os banners, precisa de uma condicional para alteração do conteúdo. É importante atentar-se para a seleção correta de acordo com o idioma. Se você utiliza de um template base para customização confira no artigo de organização de arquivos quais são os arquivos liquid que utilizam banners em sua construção.

📘

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 necessitam de uma posição em seu cadastro. Dessa forma, recomendamos seguir o mesmo padrão: adicionando a variável language e removendo o sufixo adicionado quando a linguagem for pt-BR.

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

{% assign menu_position = 'principal' | append: '-' | append: language | remove: '-pt-BR' %}

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 sua URL 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.

Conteúdos estáticos

Além de ser necessário adaptar os cadastros de banners, menus, produtos, etc., ainda é necessário realizar a adaptação de todo o conteúdo estático do site, ou seja, textos que existem no front e que não dependem de cadastros. Alguns deles são: aria-label para os elementos<a> e <button>, títulos definidos no atributo title dos elementos html, textos padrões dos botões de compra, mensagens de respostas, exibidas através de interações com formulários e, por fim, scripts que possuem conteúdos em pt-BR.

{% assign button_available_label = 'Adicionar produto ao carrinho'%}
{% assign button_available_text = 'Comprar'%}

{% if language == 'en' %}
  {% assign button_available_label = 'Add product to cart'%}
  {% assign button_available_text = 'Buy'%}
{% endif %}

<button aria-label="{{ button_available_label }}" class="button-default -outlined" type="button">
  <span class="text">{{ button_available_text }}</span>
</button>

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 cadastra os nomes dos produtos em cada idioma disponibilizado. Utiliza-se o mesmo campo para nomes em diferentes idiomas, separando-os por 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, a diferenciação dos idiomas é feita 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 '[english]' %}
  {% assign product_description = product.description | split: '[english]' | first %}
  {% if language == 'en' %}
    {% assign product_description = product.description | split: '[english]' | last %}
  {% endif %}
{% endif %

  • Nos atributos do produto: A separação dos atributos em idiomas diferentes é feita utilizando uma vírgula ,, Branco, White | #fff. O exemplo abaixo mostra como realizar essa separação:
{% assign display_value = attribute %}
{% if attribute contains ',' %}
  {% assign value_blocks = attribute | split: ',' %}
  {% assign display_value = value_blocks[0] %}
  {% if language == 'en' %}
    {% assign display_value = value_blocks[1] %}
  {% endif %}
{% endif %}
  • Nome dos atributos: Pode ser necessário realizar a tradução dos nomes do atributos para outro idioma. Uma das formas de realizar essa tradução é utilizar uma condicional if e mudar o nome de acordo com o language.
{% assign attr_name = attributes_name[0] %}
{% if language != 'pt-BR' %}
  {% if attr_name == 'Cores' or attr_name == 'cores' %}
    {% assign attr_name = 'Colors' %}
  {% endif %}
{% endif %}

  • Ordenação de atributos: Além de realizar a separação dos atributos em diferentes idiomas, também pode ser necessário ordená-los. Essa ordenação é feita no _attributes.liquid, realizando um split no valor do atributo e criando a ordem customizada.
 {% assign value_to_check = value %}
 {% if value contains ',' %}
   {% assign value_to_check = value | split: ',' | first %}
 {% endif %}

{% case value_to_check %}
  {% when 'PP' %}
    {% assign sort = 1 %}
  {% when 'XS' %}
    {% assign sort = 1 %}
{% endcase %}

As alterações para o idioma na página do produto devem ser realizadas nos arquivos liquid referentes ao produto. Lembre-se, na presença de mais conteúdos/seções na página, como produtos relacionados, banners ou compre junto, as posições, tags e textos estáticos também deverão ser adaptados.

{% assign tag_medidas_type = 'guia-de-medidas' | append: '-' | append: language | remove: '-pt-BR' %}
{% assign group_shop_type = 'compre-junto' | append: '-' | append: language | remove: '-pt-BR' %}
{% assign related_type = 'relacionado' | append: '-' | append: language | remove: '-pt-BR' %}
{% assign related_default_type = 'categoria' | append: '-' | append: language | remove: '-pt-BR' %}

{% assign tag_medidas = product.tags | where: 'type', tag_medidas_type | first %}
{% assign group_shop = product.tags | where: 'type', group_shop_type | first %}

{% assign relacionado =  product.tags | where: 'type', related_type | first %}
{% unless relacionado %}
  {% assign relacionado =  product.tags | where: 'type', related_default_type | first %}
{% endunless %}

Componentes

Preço

Para habilitar o preço internacional, é necessário enviar o parâmetro language para o componente de preço. É importante destacar que o parâmetro deve ser null quando a linguagem for pt-BR, possibilitando assim, que o preço em Reais seja carregado. É necessário aplicar a alteração em todos os arquivos que utilizam o componente de preço. Exemplo abaixo:

{% assign price_language = nil %}

{% if language != 'pt-BR' %}
  {% assign price_language = language %}
{% endif %}

{% capture price_settings %}
  {
    "productId": {{ product.id }},
    "showInstallmentsWithoutInterest": true,
    "showInstallmentsWithInterest": false,
    "mode": "medium",
    "language": "{{ price_language }}",
    "htmlTag": "p"
  }
{% endcapture %}

Carrinho

É necessário adaptar o nome do carrinho, bem como qualquer outro título definido na inicialização do componente. A adaptação é feita em dois arquivos, no _cart_drawer.liquid e no cartDrawer.js. A definição do nome da tag de produtos sugeridos é opcional, de acordo com a necessidade da loja.

{% assign position = 'frete-gratis' | append: '-' | append: language | remove: '-pt-BR' %}

const titleCart = window.language != 'pt-BR' ? 'Shopping cart' : 'Carrinho de compras';

Filtros

No componente de filtros, a adaptação é feita conforme o necessário. Os pontos para verificação são: nome dos atributos, tags de categoria e ordenação de tamanhos.

const category_tag = window.language == 'en' ? 'categoria-en' : 'categoria';
const category_title = window.language == 'en' ? 'Category' : 'Categoria';

Popup newsletter

Para o componente de newsletter, algumas adaptações para troca de idioma também são necessárias. O texto do botão e os placeholders dos inputs devem ser alterados de acordo com a necessidade. A posição do banner do componente também necessita de tratamento.

{% assign position_newsletter = 'newsletter-popup' | append: '-' | append: language | remove: '-pt-BR' %}

{% load_banners position: position_newsletter limit: 1 %}

let textButtonSubmit = window.language == 'en' ? 'Submit' : 'Enviar';
let placeholderEmail = window.language == 'en' ? 'Enter your email' : 'Digite seu e-mail';

const componentNewsletterPopup = new Vnda.Component.NewsletterPopup({
  textBtnSubmit: textButtonSubmit,
  classBtnSubmit: 'button-newsletter',
  placeholders: {
    email: placeholderEmail,
  },
});

Updated 16 days ago

What’s Next