Streaming live at 10am (PST)

[TUTORIAL] Full Multi Language Site - Easy to set-up and to use!


#41

What have you tried? Where do you run into problems?


#42

My two languages just stay there. And the language buttons don’t do anything.


#43

Can anyone help @sabanna @vincent ?


#44

Have you copied the code into Settings > Custom code?


#45

Yep, I did everything that was shared, but it doesn’t work.


#46

Can you share a read-only link?


#47

Yes, ofcourse :slight_smile: https://preview.webflow.com/preview/janco-volk-rolfing-amsterdam?utm_source=janco-volk-rolfing-amsterdam&preview=79fe305ecb9615b9fad1bd0223662718


#48

I need help with rich text block. Everything works except the rich text block.

First Problem:
As you can see in the screenshot, [[zh]] and [[en]] was added to the DOM. I don’t understand why. I can still switch the language, but [[zh]] and [[en]] will be added. They are not in CMS content.

Here is the read only link https://preview.webflow.com/preview/kingge?utm_source=kingge&preview=d77ed693d08aafb6c371a62708bf4be6.

Also the published link https://kingge.webflow.io/product/zh-yuan-zhu-xing-ntc-wen-du-chuan-gan-qi-en-cylindrical-ntc-temperature-sensor

Second Problem:
When you open my website, you can see all the texts in both languages showed up for a split of a second, then only the right language show. It’s quite annoying. Does anyone know how to solve this?

EDIT 1: The script really doesn’t like image in rich text. I tried to solve the first problem, but I have no luck. Either it will show all images from both rich text blocks, or it will show the images from correct language block, but with [[zh]][[en]] around it.

I sort of solved the second problem. Basically a white page is shown while the text is translating for a brief second so users don’t see both languages. It’s really a nasty hack, but I guess it sort of get the job done.


#49

Hey mate, did you have any luck fixing this? I’m dealing with the same issue and have no idea how to solve this.

Cheers


#50

I actually ended up re-doing the whole thing. Was planning on doing a post about it, and it needs some cleanup before working on more than two languages, but this is the idea:

  1. Paste attached code in the Footer Code section of your site’s settings
  2. Change the DEFAULT_LANG to your own language (in ISO 639-1)
  3. Edit the languages in getELementsByClassName in changeLangTo(lang). (These are the class names we’ll be using later)
  4. Save
  5. In the Designer, structure content into div blocks depending on which language content they contain. No [[en]]English[[sv]]Svenska-stuff. So if you’ve got a text block and a button that have different text for different languages, wrap them together in a div block and give that div block the class english, then you make a duplicate with the translated content and give it the class swedish.
  6. Make sure to never style the swedish and english classes, cause they will be used for a wide variety of content

Changing language

  1. Make a button or link block
  2. Under Custom Attributes in the Settings (cog wheel), press the plus sign and set Name to whenClick and Value to setLang('en').
  3. Make sure to replace the en above with the ISO 639-1 code for whichever language you want to change to

Code

<!-- Multi-lang support from gkdc.design -->
<!-- Based on work by forum.webflow.com/u/angro -->
<script>
      $(document).ready(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);
              }
          }
          if (getLangFromStorage() && typeof getLangFromStorage() !== 'undefined') {
            user_lang = getLangFromStorage();
          }
          else {
            user_lang = getLangParam() || getLangFromStorage() || user_lang;
            if(isStorageEnabled){
                localStorage.setItem('lang', user_lang);
            }
          }
          setLang(user_lang);
      });
</script>
<script>
  	// SET DEFAULT LANGUAGE (ISO 639-1). IF UNSURE, SEE en.wikipedia.org/wiki/List_of_ISO_639-1_codes
    var DEFAULT_LANG = "sv";
    var LANG_REG_EXP = /\[\[([a-z]{2})\]\]([^\[]+)/g;
    var isStorageEnabled = ! (typeof localStorage == 'undefined');
    var user_lang = (navigator.userLanguage||navigator.browserLanguage||navigator.language||DEFAULT_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;
    }

    function setLang(lang){
      user_lang = lang;
      if(isStorageEnabled){
          localStorage.setItem('lang', user_lang);
      }
      changeLangTo(user_lang);
    }
	
  	// RENAME swedishElements/englishElements IF YOU FEEL LIKE IT
  	// CHANGE WHAT'S INSIDE THE getElementsByClassName to your languages
  	// CHANGE THE IF-CLAUSES TO YOUR LANGUAGES
  	// This needs a cleanup to support more than two languages, sorry about that
    function changeLangTo(lang){
      if (lang === "sv") {
        var swedishElements = document.getElementsByClassName("swedish");
        for (var i = 0, len = swedishElements.length; i < len; i++) {
          swedishElements[i].style.display = "block";
        }
        var englishElements = document.getElementsByClassName("english");
        for (var i = 0, len = englishElements.length; i < len; i++) {
          englishElements[i].style.display = "none";
        }
      }
      if (lang === "en") {
        var swedishElements = document.getElementsByClassName("swedish");
        for (var i = 0, len = swedishElements.length; i < len; i++) {
          swedishElements[i].style.display = "none";
        }
        var englishElements = document.getElementsByClassName("english");
        for (var i = 0, len = englishElements.length; i < len; i++) {
          englishElements[i].style.display = "block";
        }
      }
    }
</script>

#51

Thank for your work. I just want to ask if this works with images in rich text block. The original solution doesn’t work really well with images in rich text block.


#52

That’s the beauty with this solution. It works by hiding and showing divs, so anything you can throw in a div (which in web development is more or less everything) will either show or hide based on the language preferences.

In practice, you could duplicate your entire site in one go, on version stacked atop another, and then just wrap each in a div with the respective language names, and it would show and hide based on language. But I’m not sure I’d recommend that.


#53

Awesome, I will try it out later. You really save my day.


#54

Mate this worked beautifully. I appreciate your help. Links are working fine :slight_smile: Thanks heaps.