Redirecting a user to a page using a custom drop-down bar

Discussion Ask a question
,
1

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.

Screenshot 1:

1920Ă—661 79.5 KB

Screenshot 2:

1920Ă—951 106 KB

Here is the basic idea of the process:

  1. As default, the user will enter the english homepage (mysite.com/en).
  2. 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).

Any suggestion on how to make this happen?

Best,

Lior

2

Hey Lior,

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.

3

I’ll give it a try, thanks a lot!

4

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?

1505Ă—782 116 KB

5

Can you send a link to your website?

6

Oh! You have to put all of the onChange code within the $w.onReady() function that wix provides. So it should look like this.

import wixLocation from 'wix-location';
$w.onReady(function () {
	//Paste all your code in here.
	$w("#dropdown1).onChange( (event,$w)=>{
	   ...
	});
});

Make sure that you change the case “heb” to case “hebrew”.

7

Last one :slight_smile:

I’ve done a working version here - https://derrellchristopher.wixsite.com/mysite/test2

The complete code I used is here.

// 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');
     }
 
 }); 
});
1 Like
8

Chris - you are THE MAN!
Thanks a lot bro, you helped a lot.

Best,

Lior

9

Chris from 4 years ago, thank you! They really should fix this in the platform, but your solution worked!