Solution:
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.