Objective: operating a multi-lingual menu, i.e. only displaying those menu (sub)items that pertain to (sub)pages of a given language.
The present WIX multi-lingual menu solution has several drawbacks, especially but not exclusively when used on a mobile platform. A prototype build with that solution has been systematically rejected by prospective customers, unfortunately.
A similar “lightbox” based solution on YouTube has been equally prototyped but the same negative reaction has been experienced unfortunately.
An estimated 70% of prospects (Europe, Canada, Africa) had to be reoriented to a non-WIX platform because of this multi-lingual requirement.
I looked at WIX code hoping to find a way to profile dynamically the standard horizontal menu whose (sub)elements are presently all derived from all the (sub)pages added to a site.
There are in theory several ways to proceed. However, implementation-wise, I found no means to solve this using WIX code: in particular how to access the (sub)children of a horizontal menu on “ViewportEnter or on a button/drop down language choice”, in order (1) to show() / hide() or collapse() specific (sub)children in the menu and (2) to retain the user choice across multiple pages.
Note that you can also create one DB collection for all pages. In this case, you should add a new column with the page to which the element is associated with.
Using the wix-storage API to save the last language chosen by the site visitor and translate the page to the relevant language on the onReady function.
import {local} from 'wix-storage';
import wixData from 'wix-data';
$w.onReady(function () {
let lang = local.getItem('siteLangPref');
if (!lang) {
lang = 'english';
}
traslateAll(lang);
});
Using the wix-data API to get the collection records ( query ) and translate components:
Note that changing the component text depends on its type. For example, changing a button’s text is by changing its label whereas changing a Text Box text is by changing its text. Therefore, you should check the component’s type as demonstrated above.
Creating an onClick event for each language button and call the translate with the relevant language:
export function hebrewButton_click(event) {
const lang = 'hebrew';
local.setItem("siteLangPref", lang);
traslateAll(lang);
}
export function englishButton_click(event) {
const lang = 'english';
local.setItem("siteLangPref", lang);
traslateAll(lang);
}
First, a very big thank you for this fully documented solution. Certainly, a step in the good direction. In fact, it is of enormous help to understand how to use a database, in connection with front-end elements, not just form data fields.
Now comes the hard part: I do not want buttons. Why? Because of these reasons:
A site comprises a set of pages (main menu) themselves made up of a hierarchy (2 to 3 deep) of subpages (submenus).
A mobile view of pseudo-(sub)menu button items displayed on a smartphone is just not workable, real estate-wise
Smartphone users have become accustomed to the hamburger-way of menu handling. This is now a de-facto standard.
The “classical” WIX solution proposes an equivalent ergonomic (i.e. button-oriented) solution. This has been rejected by all prospects to whom I have presented it. It has been the only reason why I am not using (and cannot use) WIX for multi-lingual sites.
Therefore, before posting my request, I actually prototyped a not-so-sophisticated attempt as yours … and noticed that the (sub)menu items of a horizontal menu element did not have accessibility. This is what prompted my forum request.
So, bottom-line, do you have any hints about how I could enhance your most valuable solution within the realm of a genuine horizontal menu?
Choosing buttons or other elements is a matter of design. You can choose any other element.
Another option is creating a sidebar menu and instead of adding a menu to the lightbox, you can add buttons to it. Note that by default, your lightbox does not appear on your mobile site, however you can change it as explained here .
Since there’s no option to change the labels of menu element, we recommend adding buttons instead.
Be aware that you can also hide some of the elements on the mobile editor:
So basically, you can add some elements to the desktop version and hide them on the mobile version of your site. Moreover, as mentioned above, you can check whether a site visitor is using a mobile browser using code by using the Wix-Window API .
I have explored (and tested) very carefully each of the proposed options put forward in your last reply. They confirm my attempts during the past few years in failing to provide an adequate answer to customer requirements as explained in my initial post entry.
Hence, for the time being, I will regretfully stick with multi-lingual sites implemented on alternative platforms.
Your precious example code will however not be lost for very different purposes.
Hi Tal,
Thank you very much for your solution It works very well. I have a 3 languages webpage and thanks to this solution, I don’t have to multiply the pages anymore.
Unfortunately there is a still an issue I can’t solve when there are differents links to connect to a same button according to the language selected.
When the language is english for exemple the onclick button must be linked to an Url different from the same onclick button for french language.
I just added the code below after yours. It works for one language but I don’t know how to do it for the 2 more languages
import wixLocation from ‘wix-location’; (at the top of the page)
The solution mentioned above is that the page is basically like a template and each of the components are connected to the DB collection.
Therefore, the URL should be the same for both English and French. The language displayed on the page is determined based on the code: local.setItem(“siteLangPref”, lang); of the onReady function of the page.
Hi tal,
I did understand very well that it works like a template and it works very well as I said before. But what I need is the link from the same button to be able to connect to 3 different external webpages according to the language selected at first; Because the first webpage that has to be connected is in English, the second one in French and last one in Spanish, So , when an user click on the menu-button it will be connected to the relevant webpage according to the language selected at first. I hope my explanation is clearer
You can create an onClick event for the relevant button, check what is the site language preference and redirect to the relevant page:
export function menu4_click(event) {
let lang = local.getItem('siteLangPref');
if (lang === 'English') {
wixLocation.to("https://wixsite.com/test/boutique-en-ligne");
}
if (lang === 'French'){
wixLocation.to("https://wixsite.com/test/boutique-fr-ligne")
}
}
Hello again Tal,
I was wondering if it could be possible to link the preference language to the user’s language setting in its browser instead of using the last language chosen by the site visitor . it’s important as my shop online application translates automatically in the language setting in the browser.
I saw there is a function Locale in the module Wix-window but I don’t know how to integrate it in the code you gave above.
If you can help me, thank you very much in advance
Using the wixLocation.to function depends if it is an external URL or a page within the site. I recommend checking out the documentation here .
As for using the locale option instead, you can do the following:
import wixWindow from 'wix-window';
import {local} from 'wix-storage';
import wixData from 'wix-data';
$w.onReady(function () {
let locale = wixWindow.locale;
let lang = local.getItem('siteLangPref');
if (!lang) {
//using the locale in case the user hasn't chosen the relevant
// language
if (locale === "fr"){
lang = 'french';
}
else{
lang = 'english';
}
}
traslateAll(lang);
});
Hello Tal,
Thank you for your answer. I tried the code but it doesn’t work. When you connect for the first time to the website the page keep blank even if the language is set in the browser.
But, actually What I need is the same kind of translation in both applications. I use Ecwid. So I would like my website to be displayed in the language set in the browser. because Ecwid translate that way automatically .
My webpage is directed to people who usually speak severals languages, So it is totally possible they understand perfectly Spanish but their browser is set in French or English: So at first if we define the local language as english but later ther browser is in french, We will have one part in english (wix) and the other part (ecwid) in french. It’s not good.
How can I do to display the language by default as the language in the browser?
Hey,
I’m sorry for the late response. I’m afraid that there’s no access to the browser’s language using Wix Code. However, as mentioned above, you can use the wixWindow.locale option.
I tried this solution and it works but when I go from any page back to main page it crashes the website ?? My homepage is actually a landing page - also I tried putting the code in the site section rather than page and this seems to work too - why is website crashing ??? Any advice ??? Thank you
Hey,
In order for us to successfully review this matter further, and properly assist you, please send us a video of the issue using screencast . Simply recreate the issue while recording the steps. Add the screencast.com URL to your response. Moreover, please send us the site URL so that we can have a look.
Sure, but just to check, it was mentioned above that you can add pageid to the DB collection to specify elements on other pages…how is this done, I added the pageid as a column and input the pageid’s, but what about the code?? does the const need some reference to the pageid??? const selector = item.componentId;
