Detector de Idioma en JavaScript

Explicación paso a paso

En este post te enseñaré como darle la posibilidad a un usuario, de cualquier parte del mundo, a que elija el idioma en que quiere ver tu página web.

En este caso, será en inglés y español pero una vez que entiendas como se programó, podrás hacer lo mismo con todos los idiomas que quieras!

detector-de-lenguaje

IMPORTANTE! Este código se encargará de redireccionar al usuario a la página en español o en inglés. Por lo tanto, deberás tener tu página separada por idioma.
Ejemplo: copitosystem.com (en inglés), copitosystem.com/es (en español)

¡Comencemos!

Este código está programado en JavaScript. En caso de que no tengas conocimientos previos sobre el tema no te preocupes. Lo explicaré lo más detalladamente posible :)
Primero veamos el código completo:

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>    

Explicación del código

A continuación explicaré detalladamente todo el código.

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

Esta línea de código se encarga de detectar el lenguaje de tu explorador.

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

Dicha línea de código preguntará si el lenguaje detectado por el explorador es “es” (español). Y verificará si en la URL NO está contenido el “/es”. De esta manera, en caso de que se cumpla significará que el usuario es de habla hispana y le preguntará si desea cambiar el lenguaje.
CopitoCookie es donde se guardará el idioma seleccionado por el usuario, además de la fecha de creación y en la que expira. (Más adelante lo explicaré con más detalle)

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

Hay dos posibilidades de acuerdo a la selección que realice el usuario:

  1. Si selecciona que desea cambiar el idioma a español, entonces en “copitoCookie” se guardará la palabra “es” haciendo referencia al idioma. Y, además, se lo redirigirá a la URL del sitio en español (“/es”).
  2. Si selecciona que NO desea cambiar de idioma, en “copitoCookie” se guardará la palabra “en”, haciendo referencia al idioma en Inglés.

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);
            }
        } 

Dichas líneas de código preguntará si el lenguaje detectado por el explorador es “en” (inglés). Tendrá en cuenta si la URL indica que está en la sección en español y si las cookie están vacías.
De igual manera que en el anterior caso, se le preguntará al usuario si quiere cambiar el idioma de la página al detectado (en este caso, inglés).


Como he comentado anteriormente, una vez que el usuario elige el idioma en el que desea ver la página, se settearán las cookies. Para esto, se implementaron las siguientes funciones que comentaré a continuación:

  • function setCookie(cname, cvalue, exdays)

Dicha función se encargará de settearle a la cookie el día en que se seleccionó el idioma. Para qué? De esta manera, evitará al usuario preguntar sobre el idioma mas de una vez al día. (Adicionalmente creará una fecha de expiración de la cookie de 24hs)
Además, guardará la palabra clave “es” o “en”.

  • function getCookie(cname)

Esta función se encarga de retornar el nombre del idioma que tiene guardado ya que en la anterior función no se está guardando solo el idioma sino tambien un string con fechas.
Por lo tanto, se decodificará la cookie y en caso de que en algún momento el usuario haya seleccionado un idioma, no se le preguntará nuevamente porque la función se encargará de verificar si tiene o no un valor guardado con sus respectivas fechas.


Configuración

  • Para editar la frecuencia con la que aparece el mensaje de alerta deberás dirigirte a la siguiente línea:
    d.setTime(d.getTime() + (exdays*24*60*60*1000));

    Ejemplo, si quisiera que aparezca cada 12hs te deberá quedar algo así:

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

  • ¿Dónde estará el código? Puedes escribirlo en el header (pero ten en cuenta que preguntará si deseas cambiar el idioma ANTES de que se cargue la página), en el footer o donde quieras.

  • Algo MUY IMPORTANTE, no olvides que este código utiliza JQUERY.

Si tienes alguna duda no dudes en dejarla en los comentarios y te ayudaremos!


Deja un comentario