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!
You find the actually Tutorial with the newest Updates and a Live Example here:
New Tutorial
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')
__
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 + "[[de]] <b></b>";});
</script>
Copy this for every language you want and change the [[en]] and the .english to your language. Then the second [[de]] to the language they should don’t show up .
Example Germany:
<!-- Language: German -->
<script>
$(".german").html(function(i,v) {
return "[[de]]" + v + "[[en]] <b></b>";});
</script>
If you now add your texts to your Page, add the class of your language .english for example.
Include both Texts on your Page - The Script will only show the right one.
Thats it!
If you use the CMS Variant, the Client have no differences to before. For the other its just adding the [[en]]