Alterne entre os idiomas disponíveis com apenas 1 clique
Conclua o layout e a edição das páginas do seu site
Antes de aplicar os códigos você precisa editar o layout das páginas do seu site com o idioma principal (nativo).
No meu caso é o Português do Brasil, mas você pode escolher qualquer idioma para ser o padrão e configurar para que as traduções em outros idiomas sejam secundárias.
Com o layout das páginas pronto, copie todo o texto no seu idioma nativo para um editor de texto qualquer.
Títulos, descrições, parágrafos e textos dos botões devem ser copiados e transformados em texto plano.
Replique e faça as devidas traduções para serem colados no Banco de Dados posteriormente.
Este método dispensa a duplicação das páginas do seu site, porém...
Se precisar manter a formatação dos textos com propriedades variadas do tipo, parágrafos com cores diferenciadas, textos em negrito, itálico e underlines, a duplicação das páginas será necessária.
Em caso de apresentações onde o conteúdo não exige formatação variada, ou seja, os textos e sua formatação não sofrem variações em seus títulos, parágrafos e botões, o método demonstrado abaixo é o ideal.
Aplicação dos códigos:
No editor Wix, habilite as Ferramentas de Desenvolvedores no Menu Superior [Código].
Verifique se a aba "Site Structure" do canto esquerdo do seu editor está aberta, lá você vai ver 4 diretórios principais; Pages, Public, Backend e Banco de Dados.
Clique em "Public" e depois em [Add a new file]...
Renomeie o novo arquivo com o nome: pageWalker (a extensão ".js" já é padrão), é só manter.
Apague todos os códigos default do documento e cole o texto abaixo:
// Filename: public/pageWalker.js
//
import {translateLabel} from 'backend/languageService'; // LanguageService
export function handleLanguage(startingId,pageId,language) {
let myChildren = $w("#"+startingId).children;
myChildren.forEach(async (child) => {
if (child.type === "$w.Text") {
$w("#"+child.id).text = await translateLabel(pageId, $w("#"+child.id).id,language, $w("#"+child.id).text);
} else if (child.type === "$w.Button") {
$w("#"+child.id).label = await translateLabel(pageId, $w("#"+child.id).id,language, $w("#"+child.id).label);
}
if( $w("#"+child.id).children) {
handleLanguage(child.id,pageId,language);
}
})
}
Procure manter a formatação acima e verifique se todo o código preenche no mínimo 18 linhas.
Logo após, clique em "Backend" e depois em [Add a new Web Module]...
Renomeie o novo arquivo com o nome: languageService (a extensão ".jsw" já é padrão), é só manter.
Apague todos os códigos default do documento e cole o texto abaixo, com excessão do "ID return" que está em vermelho no código abaixo e deverá ser substituído depois que você configurar os idiomas no seu Banco de Dados:
// Filename: backend/languageService.jsw (web modules need to have a .jsw extension)
import wixData from 'wix-data';
//import {translateLabel} from 'backend/languageService';
export async function translateLabel(pageId,labelKey, language,fallbackText) {
let langId = await getLanguageId(language);
return wixData.query("Labels")
.eq("pageId", pageId)
.eq("labelId", labelKey)
.eq("language", langId)
.limit(1)
.find()
.then((results) => {
if (results.totalCount>0) {
return results.items[0].title;
} else {
// Not found, return fallback text
console.log("USE FALLBACK FOR: " + labelKey + " on page " + pageId);
return fallbackText;
}
})
}
export function getLanguageId(language) {
return wixData.query("Languages")
.eq("title", language)
.limit(1)
.find()
.then((results) => {
if (results.totalCount > 0) {
return results.items[0]._id;
} else {
console.log("CANT FIND LANGUAGE!");
return "53d12b0f-7eba-4e44-8f8f-d479cf474b16"; // This is the ID for Default Language as fallback if no language was found
}
})
}
Procure manter a formatação acima e verifique se todo o código preenche no mínimo 36 linhas.
Agora é hora de criar duas coleções no "Banco de Dados", clique em [Add new collection]...
Na janela "Create a Database Collection", crie uma coleção com o nome: Languages, e logo abaixo nas permissões deixe na padrão que é Conteúdo do Site.
Na primeira coluna de nome "Title" você vai definir os idiomas que deseja incluir no seu site, adicione mais linhas clicando no sinal de [+] abaixo dos números e defina um nome para os idiomas como: Portuguese, Italiano e English.
Depois clique no sinal de [+] ao lado da coluna Title e adicione uma coluna;
No Nome do Campo escreva: "Abbreviation" e no tipo de Campo deixe como "Text".
Preencha a coluna "Abbreviation" com apenas duas letras, exemplo: pt, it, en.
Para ver a coluna ID, habilite-a no menu superior [Campos visíveis].
A coleção no seu Banco de Dados deve ter essa aparência, obviamente com os seus respectivos idiomas.
A outra coleção que você deve criar é a Labels, clique no sinal de [+] do lado direito do título "Banco de Dados", depois clique em [New Collection].
Na janela "Create a Database Collection", crie uma coleção com o nome: Labels, e logo abaixo nas permissões deixe na padrão que é Conteúdo do Site.
A primeira coluna é a de nome "Title", clique no sinal de [+] ao lado da coluna Title e adicione uma coluna com o nome: "PageId", o Tipo de Campo é; "Text".
Clique novamente no sinal de [+] do lado direito da coluna PageId e adicione outra coluna com nome: "LabelId" e o Tipo de Campo; "Text".
E por fim uma última coluna com o nome: "Language", porém com o Tipo de Campo; "Referência", logo abaixo em "Referenced Collection", escolha; "Language".
A coleção no seu Banco de Dados deve ter essa aparência, obviamente com os seus respectivos textos e idiomas.
Pra finalizar a implementação de códigos é necessário que você configure as funções de inserção de todos os códigos apresentados até agora. A configuração é bem simples:
Clique na seta do canto inferior direito [↗︎] e abra a sessão de códigos da sua página.
Na aba "Page" apague os códigos default do documento e cole o texto abaixo fazendo a alteração de nomes somente nos campos em vermelho se necessário.
Exemplo: se o nome da sua página for: "page1", mantenha o mesmo texto.
Caso tenha substituído o nome, troque-os para o mesmo que está na sua página correspondente.
Logo após o atributo "handleLanguage": nome das páginas separados por vírgula, temos os idiomas, aqueles que foram configurados lá no Banco de Dados, na coluna "Title" lembra?
Digite-os conforme você definiu lá no Banco de Dados, exemplo: "Portuguese", "English" e "Italiano".
A função "onReady" define o idioma principal, ou seja, no exemplo abaixo está configurado o Português do Brasil.
As funções "export function" definem o idioma a partir do clique em qualquer objeto com "_click event".
Confira no exemplo abaixo:
// To use the functions on your pages just do as below
import {handleLanguage} from 'public/pageWalker'; // LanguageService
$w.onReady(function () {
//Send starting Element ID, Page ID and Language name
handleLanguage("page1", "page1", "Portuguese");
});
// If you have buttons to change language do it like this
export function portuguese_click(event, $w) {
handleLanguage("page1", "page1", "Portuguese");
}
// If you have buttons to change language do it like this
export function english_click(event, $w) {
handleLanguage("page1", "page1", "English");
}
// If you have buttons to change language do it like this
export function italiano_click(event, $w) {
handleLanguage("page1", "page1", "Italiano");
}
Procure manter a formatação acima e escreva o nome das páginas e dos idiomas corretamente.
Assista ao vídeo e saiba como aplicar os códigos para a tradução instantânea
Créditos e Agradecimentos
Desenvolvimento e Criação:
Andreas Kviby - The WixShow - Desenvolvedor Web há mais de 20 anos em diversas plataformas, depois que descobriu o Wix Code teve sua vida transformada e se surpreendeu com as facilidades que a plataforma oferece.
Hoje ministra cursos voltados para o desenvolvimento de sites na plataforma Wix.
Direção Artística e Reprodução do conteúdo:
Marco Pecchy - Atua como Designer há mais de 25 anos com experiência em diversos segmentos na área de pré-impressão, comunicação visual, web e multimídia. Atualmente trabalha com consultoria de marketing e design para empreendedores digitais, especializado na Plataforma Wix e entusiasta do Wix Code.
Contatos:
Andreas Kviby | The WixShow | Pilgrimsbo - Email: hello@pilgrimsbo.com | hello@wixshow.com
Marco Pecchy | MP Classes - Email: marcopecchy@gmail.com | WhatsApp: +55 11 94767-7727