top of page

Passa tra le lingue disponibili con 1 solo clic

Completa il layout e la modifica delle pagine sul tuo sito

Prima di applicare i codici è necessario modificare il layout delle pagine del sito con la lingua principale (nativa).
Nel mio caso è
Portoghese Brasiliano, ma puoi scegliere qualsiasi lingua come precedentemente impostate e configurarla in modo che le traduzioni in altre lingue siano secondarie.
 

Con il layout di pagina pronto, copia tutto il testo nella tua lingua nativa per qualsiasi editor di testo.
Titoli, descrizioni, paragrafi e testi dei pulsanti devono essere copiati e trasformati in testo normale.
Replicare e rendere le traduzioni appropriate da incollare nel
Database in un secondo momento.

Questo metodo non richiede la duplicazione di pagine sul tuo sito, tuttavia...

Se è necessario mantenere la formattazione dei testi con proprietà di tipo variabili, paragrafi con colori diversi, testo in grassetto, corsivo e sottotitoli, è necessario duplicare le pagine.
 

In caso di presentazioni in cui il contenuto non richiede una formattazione varia, vale a dire che i testi e la loro formattazione non subiscono variazioni nei titoli, nei paragrafi e nei pulsanti, il metodo mostrato di seguito è l'ideale.

Applicazione di codici:

Nell'editor Wix, abilitare gli Strumenti per Sviluppatori nel Menu Principale [Codice].
Assicurati che la scheda "
Site Structure" nell'angolo sinistro del tuo editor sia aperta, lì vedrai 4 directory principali; Page, Public, Backend e Database.
 

Fai clic su "Public" e poi su [Add a new file]... 
Rinomina il nuovo file chiamato:
pageWalker (l'estensione ".js" è già precedentemente impostate), continua semplicemente. Elimina tutti i codici predefiniti dal documento e incolla il testo seguente:

// 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);

        }

    })

}

Prova a mantenere la formattazione sopra e assicurati che l'intero codice si riempia almeno di 18 righe.

Successivamente, fare clic su "Backend" e quindi su [Add a new Web Module]...
Rinominare il nuovo file con il nome:
languageService (l'estensione ".jsw" è già predefinita), continua semplicemente.
 
Eliminare tutti i codici predefiniti dal documento e incollare il testo sottostante, ad eccezione del "
ID return" che è in rosso nel codice sottostante e deve essere sostituito dopo aver impostato le lingue nel Database:

// 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
        }
    })
}

Cerca di mantenere la formattazione sopra e assicurati che l'intero codice riempia almeno 36 righe.

Ora è il momento di creare due raccolte nel "Database", fare clic su [Add new collection]...
Nella finestra "Create a Database Collection", crea una raccolta denominata:
Languages, e appena sotto le autorizzazioni lascia il predefinito che è Contenuto del sito.
 
Nella prima colonna intitolata "
Title" definirai le lingue che vuoi includere nel tuo sito, aggiungi più linee cliccando sul segno [+] sotto i numeri e definisci un nome per le lingue come: Portuguese, Italiano e English.
 

Quindi fare clic sul segno [+] accanto alla colonna Title e aggiungere una colonna;
Scrivi nel Nome del Campo: "
Abbreviation" e nel Campo Tipo lascia come "Text".
Compila la colonna "Abbreviation" con solo due lettere, ad esempio: pt, it, en.
Per visualizzare la colonna ID, attivarla nel menu in alto [Campi visibili].

Wix Data Languages example

La raccolta nel tuo database dovrebbe apparire in questo modo, ovviamente con le rispettive lingue.

L'altra raccolta che è necessario creare è Labels, fare clic sul segno [+] sul lato destro dell'intestazione "Database", quindi fare clic su [New Collection].
Nella finestra "Create a Database Colletion", crea una raccolta con il nome:
Labels, e appena sotto le autorizzazioni lascia nel predefinito che è Contenuto del sito.
 
La prima colonna è denominata "
Title", fai clic sul segno [+] accanto alla colonna Title e aggiungi una colonna denominata "PageId", il tipo di campo è; "Text".
Fare clic nuovamente sul segno [
+] sul lato destro della colonna PageId e aggiungere un'altra colonna denominata: "LabelId" e Tipo di Campo; "Text".
 

E infine un'ultima colonna con il nome: "Language", ma con il Tipo de Campo; "Riferimento", appena sotto "Referenced Collection", scegliere; "Language".

Wix Data Labels example

La raccolta nel tuo Database dovrebbe avere questo aspetto, ovviamente con i rispettivi testi e lingue.

Per completare l'implementazione dei codici, è necessario configurare le funzioni di inserimento di tutti i codici presentati finora. La configurazione è molto semplice:
 

Fai clic sulla freccia nell'angolo in basso a destra [↗︎] e apri la sessione di codice per la tua pagina.
Nella scheda "
Page", elimina i codici predefiniti dal documento e incolla il testo sottostante, cambiando i nomi solo nei campi rossi se necessario.
 

Esempio: se il nome della tua pagina è; "page1", mantieni lo stesso testo.
Se hai sostituito il nome, cambialo in quello che è nella sua pagina corrispondente.

 

Subito dopo l'attributo "handleLanguage": nome di pagine separate da virgola, abbiamo le lingue, quelle che sono state configurate nel Database, nella colonna "Title" ricordi?
Inseriscili come li hai definiti nel Database, ad esempio: "Portuguese", "English" e "Italiano".

 

La funzione "onReady" definisce la lingua principale, cioè nell'esempio sotto è configurato il Portoghese Brasiliano.
Le funzioni "
export function" definiscono la lingua dal clic su qualsiasi oggetto con "_click event".


Guarda l'esempio qui sotto:

// 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");
}

Cerca di mantenere la suddetta formattazione e scrivi correttamente i nomi delle pagine e delle lingue.

Guarda il video e impara come applicare i codici per la traduzione istantanea

Crediti e Ringraziamenti

Sviluppo e Creazione:

Andreas Kviby - The WixShow - Web Developer da oltre 20 anni su diverse piattaforme, dopo aver scoperto che il codice Wix ha avuto la sua vita trasformata, è rimasto sorpreso dalle strutture offerte dalla piattaforma.
Oggi tiene corsi per lo sviluppo di siti web sulla piattaforma Wix.


Direzione Artistica e Riproduzione del Contenuto:

Marco Pecchy - Ha lavorato come designer per oltre 25 anni con esperienza in vari segmenti nei settori della prestampa, della comunicazione visiva, del web e multimediale. Attualmente lavora con la consulenza di marketing e design per imprenditori digitali, specializzandosi nella piattaforma Wix e appassionato di codice Wix.
 

Contatti:

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