Opção 1:
Elementos Gerais

Atributo CSS "lang-hide"
Seleciona-se as línguas em que o elemento não deve aparecer
lang-hide="BR-ES"
lang-hide="ES-EN"
lang-hide="BR-EN"
lang-hide="BR"
lang-hide="ES"
lang-hide="EN"
Sem "lang-hide"
lang-hide="BR-ES-EN"

Opção 2:
Elementos Gerais

Atributo CSS "lang-show"
Seleciona-se as línguas em que o elemento deve aparecer,
lang-show="EN"
lang-show="BR"
lang-show="ES"
lang-show="EN-ES"
lang-show="BR-EN"
lang-show="BR-ES"
lang-show="BR-EN-ES"
Sem "lang-show"

CMS | Blog

Atributo CSS "lang-cms"
Seleciona-se, no CMS, as línguas em que o item deve aparecer,
Articles

Sensedia Awarded 2022 Regional AWS Partner Award

APIs

API’s ou EDI’s? Saiba mais sobre essas tecnologias que se complementam no setor logístico

Indústria Farmacêutica

A modernização no setor farmacêutico habilitada por APIs

Food Sector

Entenda a jornada de digitalização no setor de foodservices

Articles

Sensedia é reconhecida como a 12ª melhor multinacional para se trabalhar no Brasil

Articles

Abrindo a Kombi: como nosso Design Team lida com processos de Research

Open Banking

PISP: casos de uso e possibilidades de implementação

Dicas
Elementos Gerais

O que são elementos gerais?

Estamos chamando de elementos gerais aqueles que não possuem mudanças dinâmicas pelo CMS, ou seja, no Webflow, são todos os elementos que não estão dentro de uma Collection List.

Como adicionar os atributos?

Ao selecionar um elemento, vá para "Element Settings" e adicione o atributo na aba de "Custom Attributes".

Exemplo:

Qual a formatação devo utilizar para os atributos?

O nome do atributo deve ser escrito da mesma forma apresentada nas sections acima.
O valor do atributo deve utilzar o seguinte padrão:
• LETRAS MAIÚSCULAS para os idiomas;
• Idiomas escritos como "BR", "ES" ou "EN";
• Para inserir 2 ou 3 idiomas, separá-los por hífen, sem espaços.

Quais idiomas são aceitos?

Os idiomas configurados no script são Inglês, Português e Espanhol.

Diferença entre "lang-show" e "lang-hide"

O atributo "lang-show" deve ser utilizado quando deseja especificar em qual idioma o elemento deve aparecer.
Já o atributo "lang-hide" faz o contrário, ele deve ser utilizado quando precisar ocultar o elemento em um determinado idioma.

Dicas
CMS | Blog

Como adicionar os atributos?

Dentro do CMS do blog ("Blog Posts"), selecione o(s) idioma(s) do post.

Exemplo:

Como selecionar os três idiomas?

Para evitar um excesso de execuções do código, não adicionamos a opção de selecionar os três idiomas. Portanto, ao deixar o campo de seleção desmarcado, o código considerará que o post faz parte de todos os idiomas.

Código não está funcionando?

O código identifica os idiomas a partir do atributo lang-cms que está logo abaixo do Collection Item em um embed adicionado pela Novos Conceitos.
Certifique-se que esse elemento está presente.

Se o erro persistir, entre em contato pra escalerecermos dúvidas ou resolvermos problemas/bugs.

Scripts
Códigos

HEAD

<!-- Novos Conceitos Script -->
<script>
 /*
  * SCRIPT utilizando o atributo "lang-hide"
  */
 let url = window.location.hostname;
 let css = ""
 switch(url.substring(0,2)){
   case "br":
     css = '[lang-hide*="BR"] { display: none !important;}';
     break;
   case "es":
     css = '[lang-hide*="ES"] { display: none !important;}';
     break;
   default:
     css = '[lang-hide*="EN"] { display: none !important;}';
     break;
 }  let style = document.createElement('style');
 style.type = 'text/css';
 style.innerHTML = css;
 document.getElementsByTagName('head')[0].appendChild(style);  /*
  * SCRIPT utilizando o atributo "lang-show"
  */  css = ""
 switch(url.substring(0,2)){
   case "br":
     css = '[lang-show*="ES"]:not([lang-show*="BR"]),[lang-show*="EN"]:not([lang-show*="BR"]) { display: none !important;}';
     break;
   case "es":
     css = '[lang-show*="BR"]:not([lang-show*="ES"]),[lang-show*="EN"]:not([lang-show*="ES"]) { display: none !important;}';
     break;
   default:
     css = '[lang-show*="BR"]:not([lang-show*="EN"]),[lang-show*="ES"]:not([lang-show*="EN"]) { display: none !important;}';
     break;
 }  let style2 = document.createElement('style');
 style2.type = 'text/css';
 style2.innerHTML = css;
 document.getElementsByTagName('head')[0].appendChild(style2);</script>
<!-- Fim Novos Conceitos Script -->

FOOTER

<!-- Novos Conceitos Script -->
<script>
/*
* SCRIPT utilizando o atributo "lang-cms"
*/
 let url3 = window.location.hostname;
 switch(url3.substring(0,2)){
   case "br":
     $('[lang-cms*="ES"]:not([lang-cms*="BR"]),[lang-cms*="EN"]:not([lang-cms*="BR"])').parent().parent().css("display", "none");
     break;
   case "es":
     $('[lang-cms*="BR"]:not([lang-cms*="ES"]),[lang-cms*="EN"]:not([lang-cms*="ES"])').parent().parent().css("display", "none");
     break;
   default:
     $('[lang-cms*="BR"]:not([lang-cms*="EN"]),[lang-cms*="ES"]:not([lang-cms*="EN"])').parent().parent().css("display", "none");
     break;
 }
</script>
<!-- Fim Novos Conceitos Script -->

BLOG POST TEMPLATE | HEAD

<!-- Novos Conceitos Script -->
<script>  
let css_blog = "";  
switch("{{wf {&quot;path&quot;:&quot;selecionar-idioma&quot;,&quot;type&quot;:&quot;Option&quot;\} }}"){    
case "BR":    
css_blog = '#wg-es{ display: none !important;} #wg-en{ display: none !important;}'          
break;    
case "ES":    
css_blog = '#wg-br{ display: none !important;} #wg-en{ display: none !important;}'    
break;    
case "EN":    
css_blog = '#wg-es{ display: none !important;} #wg-br{ display: none !important;}';    
break;    
case "BR-ES":    
css_blog = '#wg-en { display: none !important;}';  
break;    
case "BR-EN":    
css_blog = '#wg-es { display: none !important;}';    
break;    
case "ES-EN":    
css_blog = '#wg-br { display: none !important;}';  
break;    
default:    
// Do Nothing    
break;  }  

let style_blog = document.createElement('style');  
style_blog.type = 'text/css';  
style_blog.innerHTML = css_blog;  
document.getElementsByTagName('head')[0].appendChild(style_blog);
</script>
<!--Fim Novos Conceitos Script -->