Multinigual: multi-state boxes work correctly only on first load only

Hi to all,

My website has 2 languages: English (LTR) & Hebrew (RTL).
In order to display correctly my main menu, and other textboxes, I am using multi-state boxes, with two states each: one default (LTR) and the other RTL.

The code in corvid runs on all pages (master page. js), and when the site is loaded - everything is OK. changing the language menu leads to a change in state, on all the multi-state boxes that I use.

But, when I click on a menu item and the new page loads, the state returns to the default one. all the multi-state boxes are not in the right state (even though the language menu is in the wanted state, and the site is translated).

Any advice? Thank you!

Nir Melamud.

P.S
here’s the code I am using on the master page. js
As you can see, there are 4 multi-state boxes, and it works perfectly when loaded first.


import wixWindow from 'wix-window';
const RTLLangs = ['he','ar','fa'];
$w. onReady(function () {
 let lang = wixWindow. multilingual. currentLanguage;
 //based on RTL
 /////////////////////////////////////
 
 if(wixWindow. formFactor === "Mobile"){
        $w('#columnStrip17'). show();      
    }

 if(RTLLangs. includes(lang)){
        $w('#statebox8'). changeState('RTL');
        $w('#statebox9'). changeState('RTL1');
        $w('#statebox10'). changeState('RTL2');
        $w('#statebox11'). changeState('RTL3');
        }
 //based on exact match or default:
 /////////////////////////////////////
 let states = $w('#statebox8'). states;
 let states1 = $w('#statebox9'). states;
 let states2 = $w('#statebox10'). states;
 let states3 = $w('#statebox11'). states;
 let foundStates = states. filter((state)=>{state.  id === lang});
 let foundStates1 = states1.  f ilter((state)=>{state. id === lang});
 let foundStates2 = states2. filter((state)=>{state. id === lang});
 let foundStates3 = states3. filter((state)=>{state.  id === lang});
 if(foundStates. length>0){
        $w('#statebox8'). changeState(foundStates[0]);
    }
 else{
        $w('#statebox8').  changeState('default');
    }
 if(foundStates1. length>0){
        $w('#statebox9').  changeState(foundStates1[0]);
    }
 else{
        $w('#statebox9'). changeState('default1');
    }
 if(foundStates1. length>0){
        $w('#statebox10'). changeState(foundStates2[0]);
    }
 else{
        $w('#statebox10'). changeState('default2');
    }
 if(foundStates1. length>0){
        $w('#statebox11'). changeState(foundStates3[0]);
    }
 else{
        $w('#statebox11'). changeState('default3');
    }
});

Hi Nir,
Can you please share the URL for your site? Thanks.

Sure, Thanks:
https://freshstart .digital/

Hi Nir,
I’m not able to reproduce this problem. Can you please share more details, including:

  1. Your browser and OS versions?

  2. Were you able to reproduce this issue in a different browser or when opening site under incognito (private browsing) mode?

  3. In which country are you located?
    Thanks!

Hi Marlowe,
Thanks for your help!

It happens in Chrome, Chrome incognito, Edge… So it is not a browser issue.
I’m located in Israel, and I am talking about the Hebrew language.

Try to reproduce it with the following steps:

  1. go to https://freshstart .digital/
  2. change the language menu (header) to Hebrew.
  3. Take a look at the order of the top menu. take another quick look at the footer of the homepage. You should see it is all Hebrew.
    4 . Now, click please on any link. it can be on the top menu, it can be one of the footer links, and after the new webpage loads - look again.
  4. You should see that the top menu order has changed. You should also see that the footer is partly English and partly Hebrew. It’s the other state.
  5. And, if you click again on any link - it jumps again to the right state.

So… I’m baffled. :slight_smile:
Thanks!

Hi Nir,
Thanks for providing the steps—I’m now able to reproduce the issue. I’ve asked our QA team to investigate. Thanks for your patience!

1 Like

Hello. Indeed there is something strange with this scenario. Considering your code, It shouldn’t change the state while navigating between pages. I’ll send it to our developers to fix.
As a temporary workaround, I’d suggest to leave only first part of the code. Basically, it should be enough to change state to RTL when one of the specific langs is selected and keep default LTR for the rest of the langs:

if(RTLLangs. includes(lang)){
        $w('#statebox8'). changeState('RTL');
        $w('#statebox9'). changeState('RTL1');
        $w('#statebox10'). changeState('RTL2');
        $w('#statebox11'). changeState('RTL3');
        }

Please let me know if it works for you.
Regards, Alex

Hi Alex,

Thank you.
Tried it, with no success. Same outcome.

Hi Nir. I changed rendering setting for you site. Can you please take another look leaving only this specific code I sent you in a previous comment?

Let me know if it works
Regards, Alex

Superb!
Works like a charm. Thank you!

So, rendering settings are Wix’s back-end only, or there is something users can do themselves, code-wise, regarding rendering issues like this one (multi-state boxes’ states)?

Hi Alex,

After you’ve fixed my rendering settings, everything was perfect.

But, this week, I’ve added some more pages to my website. When navigating to these using the menus - the same issue happened to me again. the states of the multi-state box aren’t changing correctly (same problem as before, to these new pages…)

Does this mean, that every time that I’ll add more webpages to my website (and I am expected to do so) - I will have the same rendering problem?

Thanks, Nir.

Hi Alex,

After you’ve fixed my rendering problem - everything was perfect.

But, this week, I’ve added a few more webpages to my website, and the problem returned. Navigating through the menu to these pages - result in the same problem, with states not changing correctly in the multi-state box (Same problem).

Does this mean that every time I’ll add new webpages (and I am expected to do so), this problem will return, and will need a backend fix?

Thank you for your help.
Nir.