top of page

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].

Wix Data Languages example

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".

Wix Data Labels example

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 WixShowPilgrimsbo - Email: hello@pilgrimsbo.com | hello@wixshow.com
Marco Pecchy | MP Classes - Email: marcopecchy@gmail.com  |  WhatsApp: +55 11 94767-7727

The Wix Show by Andreas Kviby
MP Classes - You Become When You Learn
Wix Code - Creation Without Limits
bottom of page