Streaming live at 10am (PST)

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

#61

I worked on this for like a month for my site. But now being ready to publish, but it’s very buggy. Some parts just don’t translate even though the code was put in properly. And some only partly and sometimes the code shows on the published website.

Could someone help me figure this out please?

#63

The solution that started this thread doesn’t handle objects within objects (links in rich text blocks for example). See my post above for another solution.

#64

There’s not really any solution to having everything being displayed double. On potential work-around is to set one language-class to display: none while editing, and then remembering to set it back when publishing.

#65

I can’t read your post above, it seems to be withdrawn.

#66

The thing you said about display:none, is this something you are saying while I am working in the editor? Cause thats not what I am talking about. I am talking about codes showing up in the published site.

#67

I’ve written an entire guide above. Post 50 in this thread.

#68

This is the post in question.

1 Like
#71

@angro @gkj Thanks for providing this solution. I got it to work, but I get some weird flickering when loading and refreshing the site. Any idea what’s wrong here?

https://preview.webflow.com/preview/jensvahlecopy?utm_source=jensvahlecopy&preview=1f56ee5d363de4dbd9c67b775f2dae6a

Thanks a lot in advance.

Just recognized it’s also happening on your example: http://multilinguale.webflow.io/

#72

@Rodolfo_Sarno Any chance you could share the exact custom code? I’m not getting it to work, driving me nuts

#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!

2 Likes
#74

Hey @jensvahle

I’ve managed to implement it using the same custom code @gkj shared above (Post 50).

The trick is how you set up your classes and layer them. You have to duplicate the divs and give them a class name to the correspondent languages.

Cheers

#75

Looks so simple but its not working for me :frowning:
https://multilanguage-test.webflow.io/?lang=de

But gkj’ s solution is working great !

BTW this is, in my opinion, a very bad approach for SEO optimization. You end up with two H1 tags and its one the most important SEO rule to have a only one H1 tag on a page.

#77

Where exactly do i set the language class to display: none?

Thank you so much for the solution though, works perfectly!

#78

Hi guys.

I’m also trying to get this solution to work in my website but with no luck.
I’ve installed all the snippets but both [[pt]] and [[en]] are showing and the buttons doesn’t work.

Can you please help me?

Here is the link to my website:
https://yellownew.webflow.io

Read-only version:
https://preview.webflow.com/preview/yellownew?utm_source=yellownew&preview=5c95c0e864f0f326e35e59164ecf8de9

Thank you very much.

#79

This is absolutely awesome! Thanks so much to everyone who contributed—I will be implementing on a very large CMS site (5000+ CMS items) in the next few days, fingers crossed! :slight_smile:

#80

I just discovered this post, but I have been reading Google search help on the topic which leads me to believe that multiple languages on one page is not a good approach.

Google recommends using different URLs for each language version of a page rather than using cookies or browser settings to adjust the content language on the page.

https://support.google.com/webmasters/answer/182192?hl=en

I am no expert, so please advise me if I am off track,