Streaming live at 10am (PST)

Full Multi Language Site - Easy to set-up and to use!


#1

Its finally possible. Multi Language Webflow Pages

You can use it in your CMS or Static pages and you can change the language with Buttons or with the Link - how you like. Its really easy to implement and it’s free!

Lets do it:

Put this into your Before </body> tag:

<script>
var DEAFULT_LANG = "en";
var LANG_REG_EXP = /\[\[([a-z]{2})\]\]([^\[]+)/g;
var isStorageEnabled = ! (typeof localStorage == 'undefined');
var user_lang = (navigator.userLanguage||navigator.browserLanguage||navigator.language||DEAFULT_LANG).substr(0,2);

var getLangParam = function(){
    var arr = /lang=([a-z]{2})/g.exec(location.search);
    return arr ? arr[1] : null;
}

var getLangFromStorage = function(){
    return isStorageEnabled ? localStorage.getItem('lang') : undefined;
}

var setLang = function(lang){
    user_lang = lang;
    if(isStorageEnabled){
        localStorage.setItem('lang', user_lang);
    }
    applyLang();
}

var applyLang = function(){
    globalDict.forEach(function(v){
        $(v.elm).html(v.dict[user_lang]);
    });
}

function textNodesUnder(el){
  var n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_ALL,null,false);
  while(n=walk.nextNode()){
      a.push(n);
  }
  return a;
}

var globalDict = [];

$(function(){
    
    user_lang = getLangParam() || getLangFromStorage() || user_lang;

    if(isStorageEnabled){
        localStorage.setItem('lang', user_lang);
    }

    // bugfix for IE11
    // if multilingual sentence is divided into sevaral text node, restore original text node
    $("*").each(function(i,v){
        if(LANG_REG_EXP.test($(this).text().replace(/\n/g,"")) && $(this).html().indexOf("<") == -1){
            $(this).text($(this).text().replace(/\n/g,""));
        }
        var $v = $("#" + $(this).attr("id"));
        if($v.length > 0 && LANG_REG_EXP.test($v.text().replace(/\n/g,"")) && $v.html().indexOf("<") == -1){
            $v.text($v.text().replace(/\n/g,""));
        }
    })
    
    textNodesUnder(document).filter(function(v){
        return LANG_REG_EXP.test(v.nodeValue);
    }).forEach(function(v,i){
        var dict = {};
        var arr;
        while((arr = LANG_REG_EXP.exec(v.nodeValue)) != null){
            dict[arr[1]] = arr[2];
        }
        globalDict.push({elm:$(v).parent()[0], dict:dict});        
    });
    applyLang();
});
</script>

Thats it! Now lets use it:

If you write your Text, write it like this:
[[en]]This is English[[de]]Das ist Deutsch

You can add as many Languages you want.

To select the right language, you have now two ways.

Way 1 - The Link Way

To open the website with the right language, just type ?lang=en at the end of your link
The script shows you now only the right language.

Way 2 - The Button Way

You want a Button that can change the language without a reload? Then use this.

Put this into your Inside <head> tag:

<script>
    window.onload = function() {
        var anchors = document.getElementsByTagName('*');
        for(var i = 0; i < anchors.length; i++) {
            var anchor = anchors[i];
            anchor.onclick = function() {
                code = this.getAttribute('whenClick');
                eval(code);   
            }
        }
    }
</script>

Put a Button on your Page and set a custom Attribute
Name: whenClick
Value: setLang('en')

multilanguage

__

You can use this method on your Collection Pages too.
The selected language kept in memory.

So, i hope it helps a bit.

Extra - The Dream for your Clients

If you want two separate Text Blocks in your CMS Collection, there is a great way.

Set your Text Blocks up in the Collection Settings like you normally do.

Put this after your Script in Before </body> tag

<!-- Language: Englisch -->
    <script>
    	$(".english").html(function(i,v) {
        return "[[en]]" + v + "[[en]] <b></b>";});
    </script>

Copy this for every language you want and change the [[en]] and the .english to your language.

Example Germany:

<!-- Language: German -->
    <script>
    	$(".german").html(function(i,v) {
        return "[[de]]" + v + "[[de]] <b></b>";});
    </script>

If you now add your text to your Page, add the class of your language .english for example.

Thats it!


#2

You’re an angel - life saver solution


#3

This sounds not bad, but what is with SEO will this affect it and in which way? Also I would know how the workflow for clients would be when they edit text on the page.


#4

Its awesome for Clients! :slight_smile: If you use the CMS Variant, the Client have no differences to before. For the other its just adding the [[en]]


#5

Ok I will try this out, but whats about the SEO. Will this affect the SEO positive or negative?


#6

Google see all versions of the text, because you write it on your page. So i think it’s worked.