How to make a multilingual script work in a shopping cart

Question

I’m developing an ecommerce website and I’m looking to make a multi language experience. I duplicated almost all pages except product page 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?

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>

<style>
   ul{
    list-style:none;
   }
</style>

Answer 1

Your preview link is not working, but I know you are trying to use the solution posted on Webflow's forum.

I would recommend you to try using this one, which is a fork from the original one and a lot more well developed:

https://github.com/dfdgsdfg/webflow-multilingual

The usage and configs are the same, so you probably do not have to change your implementation all over again.