Language Detection

Step by step

In this post I will teach you how to allow the user, from any place around the world, to choose his own language to read your site.

For this example, we will use english and spanish, but once you get how it works, you can set it for as many languages as you want!

detector-de-lenguaje

IMPORTANT! This code will redirect the user to the spanish or english page. Having said that, your web should be divided by language.
Example: copitosystem.com (in english), copitosystem.com/es (in spanish)

Lets get started!

This code is made in Javascript. If you lack knowllage about this topic, dont worry. I will make it as simple as possible :)
First, lets see the full code:

Código

<script type="text/javascript">
    var language = navigator.language || navigator.browserLanguage;
    if (language.indexOf("es") == 0 & getCookie("copitoCookie") == "" & window.location.href.indexOf("es") == -1) {
        if (confirm('¿Quieres cambiar el idioma a español?')) {
            setCookie("copitoCookie", "es", 1);
            window.location.replace("{{ .Site.BaseURL }}/es");
        } else {
            setCookie("copitoCookie", "en", 1);
            } 
        } else if (language.indexOf("es") < 0 & getCookie("copitoCookie") == "" & window.location.href.indexOf("es") != -1) {
            if (confirm('Do you want to change language to ENGLISH?')) {
                setCookie("copitoCookie", "en", 1);
                window.location.replace("{{ .Site.BaseURL }}");
            } else {
                setCookie("copitoCookie", "es", 1);
            }
        }
    function setCookie(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays*24*60*60*1000));
        var expires = "expires="+ d.toUTCString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    }
    function getCookie(cname) {
        var name = cname + "=";
        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(';');
        for(var i = 0; i <ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return "";
    }
</script>    

Code explained

Here we will talk about each part of the code.

var language = navigator.language || navigator.browserLanguage;

This line of code will be in charge of detecting your browser language.

if (language.indexOf("es") == 0 & getCookie("copitoCookie") == "" & window.location.href.indexOf("es") == -1) {

This line will ask if the language detected by the browser contains “es” (spanish). After that it verifies if the URL does not contain “/es”. This way, if that condition isn’t true it will mean that the user speak spanish and a alert will ask if the user to change the language.
CopitoCookie is where we will save the selected language plus the cookie creation and expire date. (more details later)

if (confirm('¿Quieres cambiar el idioma a español?')) {
    setCookie("copitoCookie", "es", 1);
    window.location.replace("{{ .Site.BaseURL }}/es");
} else {
    setCookie("copitoCookie", "en", 1);
    }

There are to possible routes depending on the user’s choice:

  1. If he/she decides to change the language, then “CopitoCookie” will save the word es. After that he/she will be redirected to the spanish url (“/es”).

  2. If he/she refuse to change language, “CopitoCookie” will save “en”, and no redirect will be made.

if (language.indexOf("es") < 0 & getCookie("copitoCookie") == "" & window.location.href.indexOf("es") != -1) {
            if (confirm('Do you want to change language to ENGLISH?')) {
                setCookie("copitoCookie", "en", 1);
                window.location.replace("{{ .Site.BaseURL }}");
            } else {
                setCookie("copitoCookie", "es", 1);
            }
        } 

This lines of code will ask if the browser language is “en” (english), if the URL is in the spanish section and if the cookie is empty.
Same as before, the user will be ask to change language (in this case, english).


As we said before, once the user selects the language he/she wants to read the page, the cookie will be set. To do this:

  • function setCookie(cname, cvalue, exdays)

This function will be in charge of setting the cookie with its date and language, so that the user don’t get asked more than one time per day.

  • function getCookie(cname)

This function will return the language saved in the cookie.


Configuration

  • To edit the alert message frecuency, you will have to move the this line:

d.setTime(d.getTime() + (exdays*24*60*60*1000));

For example, if you want the alert to pop up every 12 hours then it should look like this:

d.setTime(d.getTime() + (exdays*12*60*60*1000));

  • Where should I post the code? You can paste it in the header (the alert will be shown before the page load), or the footer.

  • Don’t forget that this code uses JQUERY.

If you have any question, leave us a comment and we will help you!


Leave a comment