How can I adapt multilingual script to the cart

Design help Custom code
1

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>
2

Hi!

Bit of an alternative idea here. Have you heard of https://www.translate-wf.com/?

Its a site translator made by the folks at FinSweet. Free for 2K words and 1 language on the free trial. Your blog may put you over if you populate it, but this may be a working alternative.

3

Thx Optimus !

I know this solution but I don’t want to use it.
I only have this problem in the cart. I’m pretty sure a solution exists but I’m not a developer and I can’t find it…

1 Like
4

Ok!

I’m not a dev either. I wish I could help more!

1 Like