Hi friends.
I created a custom drop-down language bar and I want that whenever a user will choose a language from that drop-down the page automatically will be redirected to the home page of that certain language. Here are two screenshots for your convenience.
As default, the user will enter the english homepage (mysite.com/en).
When a user will click on a different language using the drop-down bar I made, such as German, the page will be transferred automatically to the German homepage (mysite.com/ger).
What you want to use is the onChange method of the dropdown. To setup, you will first need to set the value of each of the dropdown’s options to your language codes (en,ger,heb). Then you can do this like so:
import wixLocation from 'wix-location'
$w("#languageSelector").onChange( (event, $w) => {
let lang = event.target.value; // or use $w("#languageSelector").value
langPath = wixLocation.path[0];//The current language setting of that webpage
switch(lang){
case "en":
if(langPath!= "en") wixLocation.to('/en');
//Will only run if the current page is not already set to english.
break;
case "heb":
if(langPath!= "heb") wixLocation.to('/heb');
break;
case "ger":
if(langPath!= "ger") wixLocation.to('/ger');
break;
default:
wixLocation.to('/en');
}
});
For references, you can check the dropdown and wix-location documentation.
Chris, I tried and it is not working (see the screenshot at the bottom).
I set the value of each of the drop-down’s options as you mentioned, changed to the default drop-down’s name in the code and created 3 pages with the same address endings for redirection purposes (en, heb, ger). Still, it doesn’t work. What’s your take on this?
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
import wixLocation from 'wix-location';
$w.onReady(function () {
//TODO: write your page related code here...
$w("#dropdown1").onChange( (event, $w) => {
let lang = event.target.value; // or use $w("#languageSelector").value
let langPath = wixLocation.path[0];//The current language setting of that webpage
console.log(langPath);
switch(lang){
case "en":
if(langPath!= "en") wixLocation.to('/en');
//Will only run if the current page is not already set to english.
break;
case "heb":
if(langPath!= "heb") wixLocation.to('/heb');
break;
case "ger":
if(langPath!= "ger") wixLocation.to('/ger');
break;
default:
wixLocation.to('/en');
}
});
});