如何使多語言腳本在購物車中工作

Question

我正在開發一個電子商務網站，我正在尋找一種多語言體驗。 我復制了幾乎所有頁面，除了產品頁面和結帳頁面。

除了購物車， 本教程完美運行。 如您所見，文本不會根據語言而變化並保持不變： [[fr]] xxxx [[en]] xxx 有人有解決我問題的想法嗎？

https://preview.webflow.com/preview/ikinesis-test?utm_medium=preview_link&utm_source=designer&utm_content=ikinesis-test&preview=142bb9a901b87c8b6cf91e26da18a063&pageId=6266e55ac76a6266e55a7676366661466616661463666398888888899999989989988998998989898898989889898988988988988988989889180000000000000000000000000000000美元

謝謝 ！！

這里實現的代碼：

在 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);   
        }
    }
}

/body 標簽之前：

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

您的預覽鏈接無效，但我知道您正在嘗試使用 Webflow 論壇上發布的解決方案。

我建議您嘗試使用這個，它是原始版本的一個分支，並且開發得更好：

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

用法和配置是相同的，因此您可能不必重新更改您的實現。