I’m developing an ecommerce website and I’m looking to make a multi language experience. I duplicated almost all pages except and checkout page.
This tutorial works perfectly except for the cart. As you can see, the text doesn’t change according to the language and stay like that : [[fr]] xxxx [[en]] xxx
Does someone have an idea to solve my issue?
Here my preview website : https://preview.webflow.com/preview/ikinesis-test?utm_medium=preview_link&utm_source=designer&utm_content=ikinesis-test&preview=142bb9a901b87c8b6cf91e26da18a063&pageId=6266e55a7a346139817247c6&workflow=preview
Thank you !!
Here the code implemented :
In the header :
<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);
}
}
}
Before the /body tag :
var DEAFULT_LANG = "fr";
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>
<!-- Language: French -->
<script>
$(".french *:not(ul)").html(function(i,v) {
return "[[fr]]" + v + "[[en]] <b></b>";});
</script>
<!-- Language: English -->
<script>
$(".english *:not(ul)").html(function(i,v) {
return "[[en]]" + v + "[[fr]] <b></b>";});
</script>