Switch between available languages with just 1 click
Complete the layout and modification of the pages on your site
Before applying the codes you need to edit the layout of your site pages with the primary (native) language.
In my case it is Brazilian Portuguese, but you can choose any language to be the default and configure so that the translations in other languages are secondary.
With the page layout ready, copy all the text in your native language to any text editor.
Titles, descriptions, paragraphs and button texts should be copied and transformed into plain text.
Replicate and make the appropriate translations to be pasted into the Database later.
This method does not require duplication of pages on your site, however...
If you need to keep formatting texts with varying type properties, paragraphs with different color, bold text, italics and underlines, duplicating the pages is required.
In case of presentations where the content does not require varied formatting, that is, the texts and their formatting do not suffer variations in their titles, paragraphs and buttons, the method shown below is ideal.
Application of codes:
In the Wix editor, enable the Developer Tools in the Top Menu [Code].
Make sure the "Site Structure" tab in the left corner of your editor is open, there you will see 4 main directories;
Pages, Public, Backend and Database.
Click on "Public" and then on [Add a new file]...
Rename the new file named: pageWalker (the extension ".js" is already default), just keep.
Delete all default codes from the document and paste the text below:
// 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);
}
})
}
Try to keep the formatting above and make sure that the entire code fills in at least 18 lines.
Afterwards, click on "Backend" and then on [Add a new Web Module]...
Rename the new file with the name: languageService (the extension ".jsw" is already default), just keep.
Delete all default codes from the document and paste the text below, except for the "ID return" that is in red in the code below and should be replaced after you have set the languages in your 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
}
})
}
Try to keep the formatting above and make sure that the entire code fills in at least 36 lines.
Now it's time to create two collections in the "Database", click [Add new collection]...
In the "Create a Database Collection" window, create a collection named: Languages, and just below the permissions leave the default that is Site Content.
In the first column titled "Title" you will define the languages you want to include in your site, add more lines by clicking on the [+] sign below the numbers and define a name for the languages like: Portuguese, Italiano and English.
Then click the [+] sign next to the Title column and add a column;
In the Field Name type: "Abbreviation" and in the Field type leave it as "Text".
Fill in the "Abbreviation" column with only two letters, eg: pt, it, en.
To view the ID column, enable it in the top menu [Visible fields].
The collection in your Database should look that way, obviously with their respective languages.
The other collection you must create is Labels, click the [+] sign on the right side of the "Database" heading, and then click [New Collection].
In the "Create a Database Collection" window, create a collection with the name: Labels, and just below the permissions leave in the default that is Site Content.
The first column is named "Title", click the [+] sign next to the Title column and add a column named "PageId", the Field Type is; "Text".
Click the [+] sign on the right side of the PageId column again and add another named column: "LabelId" and Field Type; "Text".
And finally a last column with the name: "Language", but with the Field Type; "Reference", just below
"Referenced Collection", choose; "Language".
The collection in your Database should have this appearance, obviously with their respective texts and languages.
To complete the implementation of codes, you must configure the functions of insertion of all codes presented so far. The configuration is very simple:
Click the arrow in the lower right corner [↗︎] and open the code session for your page.
In the "Page" tab, delete the default codes from the document and paste the text below, changing names only in red fields if necessary.
Example: If your page name is; "page1", keep the same text.
If you have replaced the name, change them to the same one that is in its corresponding page.
Right after the "handleLanguage" attribute: comma separated pages name, we have the languages, those that were configured there in the Database, in the "Title" column remember?
Enter them as you defined there in the Database, for example: "Portuguese", "English" and "Italiano".
The "onReady" function defines the main language, ie in the example below the Brazilian Portuguese is configured.
The "export function" functions define the language from the click on any object with "_click event".
Check out the example below:
// 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");
}
Try to keep the above formatting and write the names of pages and languages correctly.
Watch the video and learn how to apply the codes for instant translation
Credits and Acknowledgments
Development and Creation:
Andreas Kviby - The WixShow - Web Developer for more than 20 years on several platforms, after discovering the Wix Code has had its life transformed and was surprised with the facilities that the platform offers.
Today he teaches courses aimed at developing websites on the Wix platform.
Artistic Direction and Reproduction of the content:
Marco Pecchy - He has worked as a Designer for more than 25 years with experience in various segments in the areas of prepress, visual communication, web and multimedia. He currently works with marketing and design consulting for digital entrepreneurs, specializing in the Wix Platform and Wix Code enthusiast.
Contacts:
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