How to add onChange() type of handler on Language Menu widget

Ask the community
,
1

I have added the language selecting option in my page so it has the Language Menu widget.

Only event handlers I can use are these:


I want to be able to add an event handler that gets called whenever the language selection is changed. How can I do that? None of those event handlers shown above does this.

It seems that I have to create my own selection list to do this… is that the only way? I can’t use the widget the Wix provides by default for the language selection?

2

This element is not support by Velo right now I mean you can only use these basic events. But you can achieve what you want with another API of Velo.

When a user change the site language page will be reloaded. So you can add a code into your masterPage.js file:

And you can check current language of user and do what you want inside this. (Suggestion don’t write your code inside your if else write it into another .js file at and import the function you will use)

Example: ( masterPage.js )

$w.onReady(() => {
    const currentLanguage = wixWindow.multilingual.currentLanguage
    languageController(currentLanguage)
})

languageController.js:

export function languageController(currentLanguage) {
    switch (currentLanguage) {
    case 'en':
        //do what you want when site is English
        english()
        break;
    case 'es':
        //do what you want when site is Spanish
        spanish()
        break;
    default:
        break;
    }

    function spanish() {
        //
    }

    function english() {
        //
    }
}

What to do if you want to do something only at specific pages?
In this scenario you can use wix-realtime to publish message and use wix-realtime on pages you want. (So you need backend and frontend)

This came into my mind first :slight_smile:

Introduction - Velo API Reference - Wix.com (Wix realtime API)
currentLanguage - Velo API Reference - Wix.com

3

I don’t know why onSelect() type of event handler is not available for this widget as this would probably be the most common handler that would be needed for a selector. I’d like to add a feature request to add above. Without such handler, it can get messy to figure out whether the wixWindow.multilingual.currentLanguage value I get is triggered by user selecting the menu or the default value that we get from the page loading. So I came up with something like below… It checks for Korean else use English.

import {local, session} from 'wix-storage';
import wixWindow from 'wix-window';

$w.onReady(function () {
    // If multi-lingual is enabled AND ...
    // If data from local does not exists, then use browser language setting.
    // If data from local exists:
    //   If data from session does not exists, then use data from local.
    //   if data from session exists, then use the data from multilingual.currentLanguage
    if (wixWindow.multilingual.isEnabled) {
        const sessLangPref = session.getItem("tccLangPref");
        const locLangPref = local.getItem("tccLangPref");

        if (locLangPref === null) {
            if (wixWindow.browserLocale && wixWindow.browserLocale.toLowerCase().startsWith("ko")) {
                // Korean detected. Set current langugae to Korean.
                wixWindow.multilingual.currentLanguage = "ko";
                local.setItem("tccLangPref", "ko");
            } else {
                // Non-Korean detected. Set current language to English.
                wixWindow.multilingual.currentLanguage = "en";
                local.setItem("tccLangPref", "en");
            }
            // Set session data with local data.
            session.setItem("tccLangPref", local.getItem("tccLangPref"));
        } else {
            if (!sessLangPref) {
                // Local data exists, but no session data, then use local data to set language
                wixWindow.multilingual.currentLanguage = locLangPref;
                session.setItem("tccLangPref", locLangPref);
            } else {
                // Local data exists, and session data also exists, then assume use changed setting.
                // If existing local/session data are different from new language setting, update them.
                if (locLangPref !== wixWindow.multilingual.currentLanguage) {
                    local.setItem("tccLangPref", wixWindow.multilingual.currentLanguage);
                }
                if (sessLangPref !== wixWindow.multilingual.currentLanguage) {
                    session.setItem("tccLangPref", wixWindow.multilingual.currentLanguage);
                }
            }
        }
    }
});

Above could have been much simpler if we had onSelect() type of handler.