We have created a Wix multilingual website - English and Hebrew. Using multi-state boxes and JS we are managing the switch between English LTR and Hebrew RTL.
Here is an example of the code from one of the pages.
As the code is placed in the onReady function, the pages render before the code runs so the user sees an incorrect page first (wrong direction and incorrect text - it's auto-translated text) before it changes to the right text and direction.
To see it happen visit our website - https://www.tendermind.ai/
Is there a way to solve this?
import wixWindow from 'wix-window'; const RTLLangs = ['he','ar','fa']; $w.onReady(function () { let lang = wixWindow.multilingual.currentLanguage; if(RTLLangs.includes(lang)){ $w('#statebox8').changeState('RTL'); } let states = $w('#statebox8').states; let foundStates = states.filter((state)=>{state.id === lang}); if(foundStates.length>0){ $w('#statebox8').changeState(foundStates[0]); } else{ $w('#statebox8').changeState('default'); } });
You can make the page contents hidden on load, and show it once the $w is ready using code.
______
By the way (non-related),
Instead of:
let foundStates = states.filter((state)=>{state.id === lang}); //... if(foundStates.length>0){ $w('#statebox8').changeState(foundStates[0]); }
You can do:
const selectedState = states.find(state => state.id === lang); //... if(selectedState){ $w('#statebox8').changeState(selectedState); }