Language Switcher in javascript - localization

@faisal wrote:

Hi

I'm new to webflow and so far it's awesome

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.

Posts: 1

Participants: 1

Read full topic