Streaming live at 10am (PST)

Language Switcher in javascript - localization



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:

$(document).ready(function() {
    var winLocation = window.location;
    var loc = winLocation + "";
    if(loc.indexOf("/ar") != -1) {
       $(".lang").prop("href", loc.replace("/ar", "/en"));
    else if(loc.indexOf("/en") != -1) {
       $(".lang").prop("href", loc.replace("/en", "/ar"));

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


This is a preview

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

Change URL String with a Link