El problema planteado en este artículo es el siguiente:
Cómo se puede hacer una página de inicio, con un selector de idioma (castellano/catalán), de forma que una vez se seleccione, mediante una cookie se mantenga en memoria esa selección, y el visitante, la próxima vez que acceda ya tiene esa opción definida y se redirecciona a la página con el idioma que ha elegido.
El primer apartado es sencillo: en la página de inicio habrá la posibilidad de elegir entre dos idiomas. Esta elección se guarda en una cookie, y aquí está lo interesante del asunto, de tal manera que la próxima vez que se visite la página chequearemos que idioma se ha elegido y se redigirá automáticamente a la página correspondiente.
Como viene siendo habitual, primero haremos una demo con el script en funcionamiento y después pondremos el código del script. Si tiene alguna duda o está interesado adaptarlo a sus páginas no dude en ponerse en contacto conmigo.
Indice.
1.- Probando el script.
La demo consta de tres páginas: la página de inicio ('index.html') y las paginas de los idiomas ('pagina_castellano.html' y 'pagina_gallego.html').
En la página de inicio, mediante unos botones de selección tipo radio buttons se elige el idioma. Una vez hecha la selección se accede a la página correspondiente. En cada una de las páginas de idioma hay dos enlaces:
- un enlace intenta volver a la página de inicio directamente pero comprobará que esto no es posible porque automáticamente es redirigido a la misma página en la que se encuentra. Esto ocurre porque la página de inicio lo primero que hace es comprobar si se ha seleccionado un idioma y si es así lo redirecciona segun su elección previa.
- el otro enlace (Cambiar Idioma) si logra acceder a la página de inicio pero previamente borra la cookie guardada previamente.
Una vez elegido el idioma cierre la demo y vuélvala a abrir. Verá que directemente entra en la página de su idioma preferido.
2.- Código de 'index.html'.
El código del script que escribe la cookie y chequea el idioma. Se puede colocar en HEAD
<script type="text/javascript">
// más scripts: http://personal-de-jall.blogcindario.com/
// función llamada desde el formulario
function GuardaValorEnCookie()
{
// lee el valor pasado en el formulario
for (i=0;i < document.formulario.idioma.length;i++){
if (document.formulario.idioma[i].checked){
var Idioma = document.formulario.idioma[i].value;
}
}
var Caducidad = 3; //expira a los tres meses
expireDate = new Date;
expireDate.setMonth(expireDate.getMonth() + Caducidad);
//escribe cookie;
document.cookie = "idioma" + "=" + Idioma + ";expires=" + expireDate.toGMTString()+";";
// llama a la función que chequea el idioma en la cookie
chequeaIdioma();
}
// función que chequea el idioma en la cookie
function chequeaIdioma(){
var cast = document.cookie.indexOf("cast");
// si "cast" está en la cookie redirige a "pagina_castellano.html"
if (cast != -1) document.location.href = "pagina_castellano.html";
var cata = document.cookie.indexOf("gal");
// si "gal" está en la cookie redirige a "pagina_catalan.html"
if (cata != -1) document.location.href = "pagina_gallego.html";
return;
}
chequeaIdioma();
</script>
Este es el código del formulario.
<form name="formulario">
<input TYPE="radio" NAME="idioma" VALUE="cast" checked="checked">Castellano
<input TYPE="radio" NAME="idioma" VALUE="gal" >Gallego
<input TYPE="button" NAME="enviar" VALUE="enviar" onClick="GuardaValorEnCookie()">
</form>
3.- Código de 'pagina_castellano.html' y 'pagina_gallego.html'.
El código en ambas es completamente similar por lo tanto podremos el código de una de ellas. Pondremos primero, el código que borra la cookie y redirige a la página de inicio.
<script type="text/javascript">
function cambiarIdioma(){
document.cookie = "idioma=;expires=Thu, 01-Jan-70 00:00:01 GMT";
document.location.href = 'index.html';
}
</script>
Este es el código de los enlaces.
<a href="index.html">Volver a la página de inicio</a>
<br><br>
<a href="javascript:cambiarIdioma()">Cambiar Idioma</a>
