Hide/show elements based on language change (Wix Multilingual)

Ask the community
, ,
1

Hi all,

The issue is following:

I have 2 languages on my website, with Wix Multilingual. I’ve embedded HTML element (a call-to-action button) and want it to be show on current website language.

For this, I’ve copied HTML element and made 2 versions of it for each language.

I tried to use the following code to show/hide the right version of HTML element when the user switched the language.

$w . onReady ( function () {
//…
switch ( wixWindow . multilingual . currentLanguage )
{
case “en” : {
$w ( ‘#html2’ ). show ();
$w ( ‘#html3’ ). hide ();
break ;
}
case “uk” : {
$w ( ‘#html2’ ). hide ();
$w ( ‘#html3’ ). show ();
break ;
}
}
});

The similar advice I found on a forum in this comment. https://community.wix.com/velo/forum/main/comment/c35c35eb-2895-30f9-8d3e-8d9aa52f015a?postId=5c782692038e3500b817bd0e

But it seems that onReady event is only triggered when page is re-loaded from scratch, while after changing language, page reloads only partially (texts and so on).

That’s why to reflect this script I need to go to another page and then return to initial one.

Could anybody advise on a workaround here how to implement this simple while very much needed functionality smoothly?

Moreover, I tried the following script that I use to manage a repeater when language changes and also added language handling for HTML element:

export function repeater7_itemReady_1 ( $item ) {
//repeater handling
let language = wixWindow . multilingual . currentLanguage ;
$w ( “#dataset2” ). setFilter ( wixData . filter (). eq ( “language” , language ));

//HTML elements handling
if ( wixWindow . multilingual . currentLanguage == “en” ) {
$w ( ‘#html2’ ). show ();
$w ( ‘#html3’ ). hide ();
} else if ( wixWindow . multilingual . currentLanguage == “uk” ) {
$w ( ‘#html3’ ). show ();
$w ( ‘#html2’ ). hide ();
}
}

It’s still not working with HTML elements, while repeater part works smoothly.

2

What is triggering the language change after the page loads? That is where you will be able to also trigger element changes.

The code you have currently written will only be evaluate on page load (as you stated)

There is an example in the docs of using a click event to trigger a language change - if you are doing something like that you could also manipulate elements on this change as well.

https://www.wix.com/velo/reference/wix-window/multilingual/currentlanguage

3

Hi Amanda,

Thanks for your attention and advice!
Now, I’m using standard language menu element like this:

I also tried suggestions about recoding dropdown from scratch to be able to use onChange event, that stated via link you sent.

Here is a code I did:

function switchLang ( ) {
switch ( wixWindow . multilingual . currentLanguage )
{
case “en” : {
//showing current lang in dropdown element
$w ( ‘#dropdown1’ ). selectedIndex = 0 ;
//this supposed to hide/show right HTML element
$w ( ‘#html1’ ). show ();
$w ( ‘#html2’ ). hide ();
break ;
}
case “uk” : {
$w ( ‘#dropdown1’ ). selectedIndex = 1 ;
$w ( ‘#html1’ ). hide ();
$w ( ‘#html2’ ). show ();
break ;
}
}
}

$w . onReady ( function () {
//from Example
const languages = wixWindow . multilingual . siteLanguages ;

//Here I changed to uppercase label rather than full lang name
let languageOptions = languages . map (( obj ) => {
return { label : obj . languageCode . toUpperCase (), value : obj . languageCode };
});

const  currentLanguage  =  wixWindow . multilingual . currentLanguage ; 
const  filteredLanguageOptions  =  languageOptions . filter ( obj  =>  obj . value  !==  currentLanguage );

//sets dropdown value on initial page loading and hides one of HTML elements
switchLang ();

//I'm not using  filteredLanguageOptions  here because it doesn't allow dropdown to display current lang 
$w ( '#dropdown1' ). options  =  languageOptions ; 

$w ( "#dropdown1" ). onChange (( event ) => { 
    wixWindow . multilingual . currentLanguage  =  event . target . value ; 
**//on dropdown Change, I call** **switchLang() to do its work** 
    switchLang (); 
});

});

As a result, it looks like “hide” part works well but not a “show” one. No one of HTML elements is shown after 2 back and forth lang switches.

Is anything wrong with the code above?