I’m doing some testing with Corvid to see how I can get it to auto-detect the language of the visitor by using the browser default and then displaying the site in that language (Using Wix Multilingual). I followed this tutorial and it works great in detecting/displaying the language. However the entire function repeats endlessly which means the site reloads every 6500 nanoseconds to show the language it just detected. How do I get it to only do this once?
One thought I just had was that my browser by default is set to English. In my testing I used Spanish and for it to work, I set my default language to Spanish in my settings (Google Chrome) and removed English as one of my languages. However I did not remove English as the default UI for Chrome. Maybe having two languages here is clashing somehow? (In the code I use [see below], I have Spanish as the first language searched for and then English as the default for if any other language is detected).
Here’s my code:
import wixLocation from 'wix-location';
import wixWindow from 'wix-window';
$w.onReady(function () {
// Adds a time delay so the visitor anticipates the redirect
setTimeout(function () {
// Checks the browser locale setting
switch (wixWindow.browserLocale) {
// Depending on the locale, redirects to a different page
case 'es-ES':
case 'es-CR':
case 'es':
wixLocation.to('https://mysite.com/home?lang=es');
break;
// If the locale is set to any other language, default is English
default:
wixLocation.to('https://mysite.com/home?lang=en');
break;
}
// The timeout value is 6500 nanoseconds
}, 6500);
});
So I realize why the page reloads every 6500 nanoseconds… It’s because of the wixLocation.to(‘…’);. Basically the steps that the code is following are correct: It identifies the language and then redirects to the page that displays that language. The only problem is that for my site, I don’t have two different pages for two different languages. Instead I have /home?lang=en and /home?lang=es which technically is the same page. So when wixLocation.to redirects to the “new” page displaying the correct language, it’s like I just navigated to that page, thus the code re-runs (re-checks the language, re-directs to correct page, starts over and repeats endlessly).
Soooo, now I just need to figure out what to use instead of wixLocation.to because I think that’s what’s messing me up. I don’t need the page to re-load, I just need to to switch language. How though?? Any thoughts anyone?
Well, technically they are. That’s why the page reloads constantly (every time it reloads, runs the code again). But the point is to take advantage of Wix Multilingual (which if you’ve ever used is a way to translate your site without duplicating every single page. You just select the Language in the backend and then translate all the text, publish and then the user can select the language they want when they navigate to the site).
With Multilingual when your visitor selects their language, it adds ?lang= (with being the local of whatever language they selected) to the end of the URL eg. mysite.com → mysite.com/?lang=en so no, it’s not a brand new page, just a different version of it (thus the page code remains on it).
What I’m trying to do is not have to duplicate every page and translate them like that. So I’m just wondering if there are any functions aside from wixLocation.to that will redirect the visitor (yes, to the “same page” technically) but not cause the code to be re-run (as with a reload). Does that make sense?
J. D., thanks for the suggestion! Unfortunately it didn’t work, although I left it like that just because it’s more compressed. Thanks!
But at the moment it’s half working. I’ll paste my code below if you’re interested in it now (It’s changed a little bit since I first posted). What happens now is that the page doesn’t reload constantly. If you navigate to the site ( lukefrostzw3.wixsite.com/peak ) you’ll notice within a second or two it’ll set the language to english via the URL (?lang=en) and it doesn’t continually re-load the page. So I’m getting somewhere! However when I select Spanish from the menu (the flags) it then clashes with my code and proceeds to reloading constantly.
I’ve been doing some testing to see how it’ll react to a Spanish-based browser by changing Chrome’s default language to Spanish (and removing all English) but then it goes into that page reload loop switching between Spanish and English. Again, you can see that in action if you go to the link above after changing the language in your settings to use Spanish by default.
import wixLocation from ‘wix-location’; import wixWindow from ‘wix-window’;
$w.onReady( function () {
// Adds a time delay so the visitor anticipates the redirect
setTimeout( function () {
// Checks the browser locale setting switch (wixWindow.browserLocale) {
// Depending on the locale, redirects to a different page case ‘es-ES’: case ‘es-CR’: case ‘es’:
wixLocation.to(‘/peak?lang=es’); break ;
OK, I’m getting so close! So, I removed the default of being English because I realized that by default my site is in English anyways so that removed the issue of the page falling into a loop of reloading as soon as I selected Spanish. So now all it does is check to see if the browser local is Spanish and if so, it sets the language to Spanish. For reference, see the above code but pretend the following no longer exists:
default:
wixLocation.to('/peak?lang=en');
break;
ALMOST everything works now! Buuuuut I’m having one final issue. When I set my browser to Spanish and navigate to the site, everything works perfectly: my browser language is detected and the spanish version of my site is displayed. But then when I manually change it to English (by selecting English from the two options I have at the top of my site), it falls into that re-loading loop because all the code is doing is seeing my browser language and saying “Oh he needs to see the Spanish version! Change now!” regardless of the fact that I manually selected English.
So now, to fix this final issue, what I realize I need to do (thanks to a conversation with a friend who helped a TON but doesn’t know JS enough to code it) is have some kind of conditional statement right after the:
setTimeout
but BEFORE the:
switch (wixWindow.browserLocal)
And what this conditional statment needs to ask is essentially “If the language is already specified (A.K.A. does ?lang= already exsist in the URL) then don’t change the language.” This way even if someone’s browser is Spanish and the Spanish version is then loaded automatically but for some reason they select English, it wont try to switch back to Spanish because the language has been specified.
Does this make sense?? I know I wrote a lot so I really appreciate those who have read this far. I’m just trying to figure out how to write some kind of conditional statement that will perform this task. Any thoughts?
Yes, a condition like that is what I need. But it’s asking the wrong question. The question I’m looking for is “Is the language defined in the URL (?lang=<>)? Yes? Then don’t do anything. Otherwise run from the Switch command onward.”
Does that make a bit more sense? Also sorry for the late reply, I got caught up in some work.
Sooooo finally got it working! Here is the final code for anyone to use if they want to.
Basically what I had to do was ask if the URL looked a certain way (without the language) and if so, then run the code. So now I’ve applied the code to each page, making sure to adjust the destination URL and also the checked URL to the current page and it works pretty well.
You’ll notice it seems like I’ve duplicated my code and put it twice (with the “else if” statement). I’ve done that for redundancy as the first “if” statement checks for the URL without “www” and the second checks for it WITH “www”. Did that just to be safe.
Hope this helps!
import wixLocation from 'wix-location';
import wixWindow from 'wix-window';
$w.onReady(function () {
// Checks the URL to see if the language has already been defined (excludes "www"). If the language has already been defined, "?lang=<>" will be in the URL and therefore wont match, thus everything after the if statement will not run.
let url = wixLocation.url;
if (url === 'https://lukefrostzw3.wixsite.com/peak') {
// Adds a time delay so the visitor anticipates the redirect
setTimeout(function () {
// Checks the browser locale setting
switch (wixWindow.browserLocale) {
// Depending on the locale, redirects to a different page
case 'es-ES':
case 'es-CR':
case 'es':
wixLocation.to('https://www.lukefrostzw3.wixsite.com/peak?lang=es');
break;
// Add in more cases here if your site has a couple languages.
// Notice I DO NOT have a default here... By default my site is set to load in English anyways so that line of code is unnecessary. Less is more.
}
// The timeout value is 1000 nanoseconds
}, 1000);
}
// Checks to see if language has already been defined (includes "www")
else if (url === 'https://www.lukefrostzw3.wixsite.com/peak'){
// Adds a time delay so the visitor anticipates the redirect
setTimeout(function () {
// Checks the browser locale setting
switch (wixWindow.browserLocale) {
// Depending on the locale, redirects to a different page
case 'es-ES':
case 'es-CR':
case 'es':
wixLocation.to('https://www.lukefrostzw3.wixsite.com/peak?lang=es');
break;
}
// The timeout value is 1000 nanoseconds
}, 1000);
}
});
Did you do what the tutorial stated and not just tested it through preview option only? Publish the page to see the redirect in action. (Previewing isn’t enough.)
I’m assuming that you did publish your site and test the published version and not just used the preview that threw up the looping issue.
However, if that tutorial was wrong and had flaws in it, then it surely would have been found out a long time ago and been reported about and either dropped from Wix Support pages or recoded again so that it works properly.
Although not the first time that Wix have left old and now not working code or deprecated code functions for example and they have not been updated and changed!
Would be good if Wix put a updated date and time (well date at least) in their page source for instance so we could check the age of the tutorials, especially for when anything does get deprecated so that we can tell if that tutorial has been updated to reflect the code change for example.
Thank you! And yes, I did publish it for my testing.
I would think that they would update it too or that someone else would have picked up this issue but oh well, guess not. At least there is this workaround now for anyone who’s looking for one. Hope it helps someone!
Thanks for that link, I just voted for it. Hey, maybe they’ll use my code
Hello, could you help me please, I edit the code as was described previously but it still doesn’t work. Presume there is a mistake somewhere…
I want to make an automatic switch of the language based on browser.
The code:
import wixLocation from ‘wix-location’; import wixWindow from ‘wix-window’;
setTimeout( function () { switch (wixWindow.browserLocale) { case ‘ru-RU’: case ‘ru’:
wixLocation.to(‘http://www.yeswayfashions.com/?lang=ru’); break ;
}
So what I think is going on (and if so you’re going to punch yourself) is you’re missing the “s” in “https://”. What Wix has done in the last few years is by default have any Wix site SSL secured and using “https” instead of “http” and because the code is asking if the url is equal to something it’s going to look for an EXACT match (so be super careful with typos). I’ve made this mistake sooooo many times so don’t feel bad if this turns out to be the issue
Thank you for your swift reply!
Ill take it for future) But it still doesnt work :'| Have tried and checked everything (browser language settings Chrome & Safari) and restarted mac.
the updated code:
import wixLocation from ‘wix-location’;
import wixWindow from ‘wix-window’;
Try what @deleteduser said and see if that helps. Another thing that I would check is the “/” at the end of the URL. Try remove that and see what happens. Otherwise make sure you clear your cache when you run your tests on your published site. I did something like this for a client and when I delivered they said it wasn’t working but all they needed to do was clear their cache and then it worked. Let me know what happens.
