Como exibir conteúdos dependendo do idioma do site

Como funciona

Você pode segmentar o conteúdo e exibir blocos específicos somente para os usuários que visualizam a página em determinados idiomas por meio de um código HTML personalizado. Você pode usar uma solução existente ou adicionar seu próprio código.

Como obtê-lo

Usando uma solução existente

1. Abra seu projeto na Conta de Distribuidor.
2. Na barra lateral, clique em Site Builder.
3. Clique em Abrir Site Builder.
4. No bloco Cabeçalho, configure o componente Traduções.
5. Selecione o(s) idioma(s) nos quais você deseja ocultar blocos específicos.
6. Insira o seguinte código para o bloco de Código personalizado:

<script>
  (function () {
    var blockArray = [
      {
        blockName: '.block--packs',
        blockNumber: 0
      },
      {
        blockName: '.block--description',
        blockNumber: 0
      }
    ];

    function removeBlock() {
      setTimeout(function () {
        blockArray.map(function (block) {
          return document.querySelectorAll(block.blockName)[block.blockNumber];
        })
          .forEach(function (element) {
            element && element.remove();
          });
      }, 0);
    }

    removeBlock();
  })();
</script>

7. Na matriz blockArray, modifique os seguintes parâmetros para cada bloco que você deseja ocultar dos usuários para o idioma escolhido:
   • blockName — o nome da classe CSS do bloco. As opções possíveis são:
     • .block--header (o bloco Cabeçalho)
     • .block--hero (o bloco Chamada para ação)
     • .block--html (o bloco Código personalizado)
     • .block--packs (o bloco Pacotes)
     • .block--description (o bloco Descrição)
     • .block--gallery (o bloco Galeria)
     • .block--requirements (o bloco Requisitos de sistema)
     • .block--faq (o bloco FAQs)
     • .block--embed (o bloco Widgets de mídia social)
     • .block--news (o bloco Notícias)
     • .block--footer (o bloco Rodapé)
   • blockNumber — o número de sequência do bloco. O valor mínimo é 0.
8. Clique em Pré-visualizar para ver suas alterações.

Assista ao vídeo tutorial desta instrução:

Como adicionar seu próprio código

1. No Builder, clique em Adicionar bloco e escolha Código personalizado.

2. Insira seu próprio código no bloco.

Links úteis