Multilingual site - Solution for Duolingual site

Community resources Webflow Tips
1

I’ve got a quite easy solution for sites with 2 languages that I like to share.
It would work with more, but it would be a bit messy.
The solution works with both static pages as well as collections. And it’s free :slight_smile:

The solution is a real translation, not Google translate. I find Google okay, but sometimes it translates quite horrible. That’s why I come up with this solution.

One drawback may be SEO and Google Indexing. That’s the only thing not translated. Apart from that, the solution works fine. I’ve done it for EN/SE. See https://www.manandmouse.se

The solution:

  • Use $SESSION-variable to store users language selection
  • Make duplicates of all content (it’s easy if all content is in ONE div)
  • Make duplicate text (and image) fields in collections (one for each language)
  • Settings ID for elements that shall be translated (hidden/shown). Different ID for each language.
  • Javascripts in Head Code. It hides EN/SE using ID’s for the Content-DIVs
  • Call to javascript in Footer Code - executes the language ”filter"
  • Embedded HTML with buttons for each language that sets the $SESSION variable

Notes

  • When editing pages, duplicates will always be visible. I don’t find it disturbing, but you may.
  • The site must be published to make it work. Webflow preview dosen’t filter.

A - HEAD CODE
For my site, I want to translate MENU, CONTENT and FOOTER.

<script> 
  function getCurrentLanguage() {
    return sessionStorage.getItem('currentLanguage');
  };
  function setCurrentLanguage(value) {
    sessionStorage.setItem('currentLanguage', value);    
    location.reload();
  };    
  function languageFilter() {
	if (getCurrentLanguage() == "EN") {
    	document.getElementById("MM_Menu_SE").style.display = "none";
    	document.getElementById("MM_Content_SE").style.display = "none";
    	document.getElementById("MM_Footer_SE").style.display = "none";      
      	document.getElementById("LanguageButton_EN").style.color = "#e66e00";
  	} else {
    	document.getElementById("MM_Menu_EN").style.display = "none";
		document.getElementById("MM_Content_EN").style.display = "none";
    	document.getElementById("MM_Footer_EN").style.display = "none";      
      	document.getElementById("LanguageButton_SE").style.color = "#e66e00";
    };
  };
</script>

B - Footer Code
The hiding/showing each language must be executed in the Footer

<script>
  languageFilter();
</script>

C - Language selector
Add an Embed object and set it to (and "another for the other language):
In languageFilter() function the text color is set to orange for the current language.

<button id="lang_en" type="button" onclick="setCurrentLanguage('EN')">EN</button>

D - Static pages
This depends how you designed your site. I’ve all page “body” content in a Div and the example is for that.

  • Duplicate the content div
  • Set the ID for each copy to MM_Content_SE and MM_Content_EN (my example names, could be anything as long as they are not the same)
    Repeat this for each DIV that shall be translated (switch on/off)
    I did it with the Text in the menu (MM_Menu_EN, MM_Menu_SE) and the footer (MM_Footer_EN, MM_Footer_SE).

E- Collections
Add duplicate field for things that shall be translated, e.g. Text. I did it with text, URLs and images (I’ve got language dependent images)

F - Collection Page
In the duplicate page layout, change the Fields to the new language field, i.e one copy connects to i.e “Title_SE” field, the other(duplicate) to i.e “Title_EN” field

That’s it. I hope someone finds it useful.

1 Like