JavaScript to change language between three or more languages

Question

I am working on a multilingual WordPress multisite. It has more than 10 languages. I created a javascript that will redirect between 2 languages. To do that I have used location.pathname to get the current page URL. Then I split it to get the last directory name. I have used the if condition to check if the current URL of the page is in the second language.

For example, if I am on a page www.xyz.com/fr/news and then if I change the language to english. It will redirect me to www.xyz.com/news. Now the problem is If I add third language I am unable to figure out what condition should I use to switch between different languages. for example, If I am on a page www.xyz.com/fr/news and I want to switch to German. It should redirect from www.xyz.com/fr/news to www.xyz.com/de/news.

Every redirection should load the current page in requested language.

HTML Code:

<a class="dropdown-item" onclick="myFunction()">English</a>

Below is a javacript code snippet to switch from the default language.

function myFunction() {
    document.getElementById("fr").onclick = location.replace(
        window.location.origin + "/" + fr" + "/"
    );
    document.getElementById("de").onclick = location.replace(
        window.location.origin + "/" + "de" + "/"
    );
}

And below is a javascript code snippet to switch from second languages to default one.

function myFunction() {
    var pathname = window.location.pathname;  
    var lang = pathname.split("/")[1];
    var page = pathname.split("/")[2];

    if ((lang = "fr/")) {
        location.replace(window.location.origin + "/" + page);
    }
}

To split the Pathname, you can use a single command: let page = window.location.pathname.split("/"); This turns the URL into an Array that you can use later on with the [0], [1], etc. — Mike de Bie
– Mike de Bie, Commented Mar 27, 2021 at 9:46
@MikedeBie I have split the URL and used the parts to redirect between 2 languages. I stuck at how can I redirect when a third language is added. I am trying to add a function and if-else statement when the anchor tag is triggered by clicking but not getting the results as expected. — tru_shar
– tru_shar, Commented Mar 27, 2021 at 10:28
If you want to switch between the languages, you can us the 'Switch' statement. Use the 2 letters you get from the URL ('fr', 'en', etc.) and use those in Switch/Case statement. case 'fr': URL = xyz.url/fr Some explanation can be found here: (w3schools.com/js/js_switch.asp) — Mike de Bie
– Mike de Bie, Commented Mar 28, 2021 at 19:47

tru_shar · Accepted Answer · 2021-03-28 20:22:39Z

I don't know if this is the efficient way but have solved it.

But there is an issue with opening the link in the new tab using right-click. It shows about:blank#blocked.

I put the javascript in href of anchor tag as below.

<a href="javascript:eng()" class="dropdown-item" >English</a>
<a href="javascript:fre()" class="dropdown-item" >French</a>
<a href="javascript:det()" class="dropdown-item" >German</a>

Create separate function for each link. For example if I am on defaul page the script will be:

function fre() {
    var pathname = window.location.pathname;
    var lang = pathname.split("/")[1];
    var page = pathname.split("/")[2];

    if (window.location.origin !== "" && lang == "") {
        window.location.replace(window.location.origin + "/fr/");
    } else {
        window.location.replace(window.location.origin + "/fr/" + lang);
    }
}
function det() {
    var pathname = window.location.pathname;
    var lang = pathname.split("/")[1];
    var page = pathname.split("/")[2];

    if (window.location.origin !== "" && lang == "") {
        window.location.replace(window.location.origin + "/de/");
    } else {
        window.location.replace(window.location.origin + "/de/" + lang);
    }
}

So the condition checks if the current window URL contains 1 or 2 directories. for example www.xyz.com/ contains 1 which is " / " and www.xyz.com/fr/news contains 1 which is " fr " and 2 is " news " then redirect to the corresponding page in other languages.

Hope this will be helpful for others.

And please if there is any efficient way or improvment you are most welcome.

Collectives™ on Stack Overflow

JavaScript to change language between three or more languages

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related