Language Switcher in javascript - localization

Hi

I’m new to webflow and so far it’s awesome :slightly_smiling:

I needed to create a website in two languages English and Arabic. So, I created two versions of the site using folders but I was looking for a way to have a language switcher to just change the slug from “en” to “ar” in the url. I viewed some of the posts about localization and couldn’t find what I was looking for.

After some googling I managed to do it with the following:

Added this code to custom code section:

<script>
$(document).ready(function() {
    var winLocation = window.location;
    var loc = winLocation + "";
    if(loc.indexOf("/ar") != -1) {
       $(".lang").prop("href", loc.replace("/ar", "/en"));
       $(".lang").text("English");
    }
    else if(loc.indexOf("/en") != -1) {
       $(".lang").prop("href", loc.replace("/en", "/ar"));
       $(".lang").text("العربية");
    }
});
</script>

Then I added an empty nav link with class “lang”.

Oِne downside that I had to duplicate the main home page to point to /en version and added an auto direct JS in the page itself

<script>
window.location.replace("/en");
</script>

This is a preview

http://translation-demo-site.webflow.io/

https://preview.webflow.com/preview/translation-demo-site?preview=52e2b3dc8e370112b34afe8eaf505d83

I just started to learn JS so if you know a better way to do this please let me know.

2 Likes

Hi, thanks a lot for sharing! Your solution looks great!

My site’s landing language is Chinese, and pages in Chinese is placed at root.
eg. Home is / , About is /about

And then secondary lang is put under /en folder.
eg. Home is /en , About is /en/about

So I modify yours to:

<script>
$(document).ready(function() {
    var winLocation = window.location;
    var loc = winLocation + "";
    if(loc.indexOf("/") != -1) {
       $(".lang").prop("href", loc.replace("/", "/en"));
       $(".lang").text("English");
    }
    else if(loc.indexOf("/en") != -1) {
       $(".lang").prop("href", loc.replace("/en", "/"));
       $(".lang").text("中文");
    }
});
</script>

It turns out it generated wrong URLs: http://en/abc.com/about

But it looks like your example works well! How did you make it?

And what page and where should I put these lines? I do not see them in your example.

Thanks a lot !

If anyone can help, please let me know. :pray:t2:

Hi, I modified the code so that it works on my case… except home page !

( For the language switching button, I just create a text link and give it the class .lang and it works fine. )

<script>
$(document).ready(function() {
  var winPath = window.location.pathname;
  var ploc = winPath + "";
  if(ploc.indexOf("/en/home") != -1) {
    $(".lang").prop("href", ploc.replace("/en/home", "/"));
    $(".lang").text("中文");
  }
  else if(ploc.indexOf("/en/") != -1) {
    $(".lang").prop("href", ploc.replace("/en/", "/"));
    $(".lang").text("中文");
  }
  else if(ploc.indexOf("/") != -1) {
    $(".lang").prop("href", ploc.replace("/", "/en/"));
    $(".lang").text("English");
  }
});
</script>

As the pages of my landing language (which is “Chinese / 中文” in my case) are located at the root folder. When switching from “Chinese” homepage to “English”, the script will output /en/ but not /en/home.

I tried to play around with window.location.host, but not able to figure it out…

I know it’s simpler if I place the pages of landing language to a folder, but it is not an option for client.

Another problem… my site will have 3 languages finally. I have no idea how to add the third language, say “Japanese”, and making 2 or a total of 3 language options links or list inside a div for language switching.

Does anyone have a solution?

Thanks a lot~

Guys, Webflow team, @cyberdave, @PixelGeek

Any hint to handle language switching links effectively? … so that changing site language will stay on the same content?

Thanks a million~

1 Like