Multi Language Mobile Menu Problem

Ask the community
,
1

Hi,

After lots of exploration, I found a solution of multi language from the discussion but stuck on the mobile part by using the lightboxes.

The issue is only the text on mobile menu will switch the language but not the content on the page. So when I close the menu, the content on the page won’t change. Can anyone kindly help?

Here is the desktop version.
https://hellogpeng.wixsite.com/test2

Here is the mobile screenshot.

1242×2208 117 KB

1242×2208 89.7 KB

//The code is applied on Home and About page

import wixWindow from ‘wix-window’;
import { local } from ‘wix-storage’;
import wixData from ‘wix-data’;

$w.onReady( function () {
//detect mobile and show the menu button.
if (wixWindow.formFactor === “Mobile” &&
wixWindow.rendering.renderCycle === 1) {
$w(“#mmenuButton”).show();
}

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 === “zh-tw”) {
lang = ‘chinese’;
} else {
lang = ‘english’;
}
}
traslateAll(lang);
});

function traslateAll(lang) {
wixData.query(‘Translation’).find().then(result => {
const allItems = result.items;
allItems.forEach(item => {
const selector = item.componentId;
if ($w(#${selector}).type === ‘$w.Button’) {
$w(#${selector}).label = item[lang];
}
if ($w(#${selector}).type === ‘$w.Text’) {
$w(#${selector}).text = item[lang];
}
});
});
}
export function ENButton_click(event) {
const lang = ‘english’;
local.setItem(“siteLangPref”, lang);
traslateAll(lang);
}
export function ZHButton_click(event) {
const lang = ‘chinese’;
local.setItem(“siteLangPref”, lang);
traslateAll(lang);
}
export function mmenuButton_click(event, $w) {
wixWindow.openLightbox(‘mobilemenu’);
}

Database / Translation

817×269 20.5 KB

// The code is applied to Lightboxes / mobilemenu page

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 === “zh-tw”){
lang = ‘chinese’;
}
else {
lang = ‘english’;
}
}
traslateAll(lang);
});

function traslateAll(lang) {
wixData.query(‘Translation’).find().then(result => {
const allItems = result.items;
allItems.forEach(item => {
const selector = item.componentId;
if ($w(#${selector}).type === ‘$w.Button’) {
$w(#${selector}).label = item[lang];
}
if ($w(#${selector}).type === ‘$w.Text’) {
$w(#${selector}).text = item[lang];
}
});
});
}
export function ENButton_click(event) {
const lang = ‘english’;
local.setItem(“siteLangPref”, lang);
traslateAll(lang);
}
export function ZHButton_click(event) {
const lang = ‘chinese’;
local.setItem(“siteLangPref”, lang);
traslateAll(lang);
}

Thanks in advance.
Grace

2

Hi,

I opened https://hellogpeng.wixsite.com/test2 on an iPhone 6S and changing between ZN and EN did change the content on the page:

750×1304 22.9 KB

3

Hi,

Thanks for your message. Since I didn’t get any replies earlier, I tried another approach by using box with buttons for the mobile menu on each page. However, I am not fully satisfied with this solution because it won’t perform full height of the page and not sure if it is possible. I guess I still need to take time to figure it out.

The link of lightbox version is here if you’d like to take a look.
https://hellogpeng.wixsite.com/lightbox

The lightbox issue I figured so far is maybe because it is a unique page and the code is on it’s page. When the onclick event is called, it will only apply to the elements on it’s page. The thought of solution is that I may need to store the data (lang) for onclick event and then somehow pass it to other pages. But the original language is get from local, if I pass it through session and then how to make it take over the new data?

I am not a coder but a designer with some coding knowledge. I am super appreciated if you can help me out with this.

Thanks in advance.
Grace

4

Hi,

When you open a lightbox, you can wait until it’s closed and get back a value from it:

export function eventHandler() {
  wixWindow
    .openLightbox("lightboxName")
    .then(function(dataFromLightbox /* "chinese" */) {
      // Do translation.
    });
}

See: https://www.wix.com/code/reference/wix-window.html#openLightbox

To close the lightbox with a data, do:

wixWindow.lightbox.close("chinese");

See: Lightbox - Velo API Reference - Wix.com

Also, Wix is working on a nice and simple solution for translations so that you won’t need to invent your own. But I don’t know when it’s gonna be released.