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

Community resources Webflow Tips
73

To all, especially @angro @memetican @dididi @gkj, thanks a lot for all your work and support!
As being excited but still pretty new to Webflow, I really appreciated finding your solution(s) and let me complete our multilingual projects.

As I found replacing text nodes depending on tags [[lang]] was a bit “complicated and heavy” for simply switch elements on the page, I’ve work a bit on adapting/optimizing the script to make it work only for replacing elements only based on “classes” basis (and not at all on the principle of tags [[lang]]).

So here is my code (inspired by yours and simplified) to manager multilingual content, to paste on Footer Code:

<script>

// Define default language
var defaultLanguage = "fr";

// Detect storage
var storage = ! (typeof localStorage == 'undefined');

// Determine language
var language = (navigator.userLanguage||navigator.browserLanguage||navigator.language||defaultLanguage).substr(0,2);

// Detect sent language
var sentLanguage = function(){
    var arr = /lang=([a-z]{2})/g.exec(location.search);
    return arr ? arr[1] : null;
}

// Detect stored language
var storedLanguage = function(){
    return storage ? localStorage.getItem('lang') : undefined;
}

// Set language
var setLanguage = function(lang){
    language = lang;
    if(storage){
        localStorage.setItem('lang', language);
    }
    applyLanguage();
}

// Apply language
var applyLanguage = function(){

	// Show/Hide elements depending on class
    if(language === "en") {
		$(".french").hide();
		$(".english").show();
	}
    if(language === "fr") {
    	$(".english").hide();
    	$(".french").show();
    }

    // Show/Hide elements with autolang specifier 
    $('*[autolang]').hide();
    $('*[autolang="' + language + '"]').show();
}

$(function(){
    
    // Define language
    language = sentLanguage() || storedLanguage() || language;

    // Detect stored language
    if(storage){
        localStorage.setItem('lang', language);
    }

    // Switch language on click
    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);   
        }
    }

    applyLanguage();
    
});

How it works: duplicate all elements you need to have in two languages and applied them the needed language class.

This script manages:

  • Language switch depending on classes (here .english and .french) applied to elements (whatever it is a text, div, section…), so you can manage multilingual content on every type of element, everywhere in the site (excepts for placeholders on inputs), so working only with text fields is not mandatory, and even image switching with autolang attribute (but I did not test/use it)
  • Language switch with button, using whenClick attribute and setLanguage('XX') value to any element (button/link are not mandatory)
  • Language detection on browser default language, on browser storage/history (if available) and on URL parameters (using ?lang=XX)

One more thing : to manage multilingual content on “mandatory” buttons needed by Webflow (“Submit Button” in form, cart, etc.), where you can’t insert 2 different texts with language class to each of them, you can add a class to the element Submit Button (or similar) to apply position: absolute, height: 100%, width: 100%' and z-index: 1 to place the mandatory button on all the surface of the button. Don’t forget also to apply position: relative to the div surrounding the Submit Button.
Then, just add the needed element/text with language class on each inside the button to make it multilingual.

One more… more… thing : to manage multilingual switch works good with Webflow pagination which makes the page reload and not staying in the same section, so I’ve use the solution provided by @forresto (Seamless pagination with "pjax") but this tweak was making the language resetting to default one, not showing the current language selected… a mess.
So I’ve added the following code after the one about multilingual:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
<script>

		var containerSelector = '#ajax';

		$(document).pjax(
			'.w-pagination-wrapper a',
			containerSelector,
				{
					container: containerSelector, 
					fragment: containerSelector,
					scrollTo: false,
					timeout: 0,
				}
		);

		$(document).on('pjax:end', function() {
			Webflow.require('ix2').init();
			applyLanguage();
		});

</script>

I’ve used the code given then just add the applyLanguage to make it work after the pagination changes.

Hope this will help!

6 Likes