Crearemos las dos cookies y luego leeremos estas, aplicando el idioma seleccionado por el usuario.
Creando la cookie con Javascript
Para crear la cookie con javascript, como quieres que esta cambie cada vez que el usuario cambie el idioma utilizaremos los div de clase "lang:
En cada opción de lenguaje le pasaremos una string que indicara el lenguaje que queremos:
<div class="lang" data-value="pt" onclick="Selected-language('pt')">
<img src="https://image.flaticon.com/icons/svg/299/299693.svg">
<span class="lang-txt">Português<span> (BR)</span></span>
</div>
<div class="lang" data-value="ar" onclick="Selected-language('ar')">
<img src="https://image.flaticon.com/icons/svg/299/299815.svg">
<span class="lang-txt">العربية <span> (SA)</span></span>
</div>
Posteriormente crearemos una función mediante javascript, para crear una cookie que identifique el idioma que el usuario seleccione.
function Selected-language(language) {}
Posteriormente, eliminaremos la antigua cookie definiendo un tiempo de caducidad ya pasado:
document.cookie = "language=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"
Una vez tengamos el lenguaje almacenado en una variable y la antigua cookie eliminada, procederemos a crear la cookie. En primer lugar le asignamos un nombre a la cookie:(la string que antes le hemos pasado con onclick)
document.cookie = "language="+language;
Después, le asignaremos un tiempo de caducidad de la siguiente manera:
time += 3600 * 1000 * 24 * 365;
De esta manera definiremos el tiempo de caducidad, time almacenara los milisegundos que durara la cookie en este caso:
3600: segundos que tiene una hora.
1000: Multiplicamos por mil ya que la unidad será milisegundos.
24: Las horas que tiene un día.
365: Los días que tiene un año.
Una vez definido el tiempo, se lo asignamos a la cookie de la siguiente manera:
time += 3600 * 1000 * 24 * 365;
date.setTime(date.getTime() + time);
expires = date.toUTCString();
document.cookie = "language="+language"; expires="+expires + "; path=/";
Finalmente, la función para crear la cookie será la siguiente:
function Selected-language(language) {
document.cookie = "language=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
time += 3600 * 1000 * 24 * 365;
date.setTime(date.getTime() + time);
expires = date.toUTCString();
document.cookie = "language="+language"; expires="+expires + "; path=/;";
}
Creando la cookie con PHP
Para crear la cookie en php lo haremos de la siguiente manera. Deberás, enviar los parámetros a un archivo php. Esto lo puedes hacer de diversas formas. Apoyándote en html o en javascript. Como ya hemos creado la función en javascript para crear la cookie. Aprovecharemos esta función para enviar los parámetros de la cookie a un segundo archivo, le llamaremos createcookie.php.
Modificaremos la función javascript, abriremos en una nueva ventana el archivo php que nos creara la cookie y le pasamos mediante GET el lenguaje seleccionado:
function Selected-language(language) {
document.cookie = "language=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
time += 3600 * 1000 * 24 * 365;
date.setTime(date.getTime() + time);
expires = date.toUTCString();
document.cookie = "language="+language"; expires="+expires + "; path=/;";
window.open("createcookie.php?language="+language);
}
Recibiremos en php el resultado de $_GET y crearemos la cookie:
<?php
$language=$_GET["language"];
$cookie_name = "language";
setcookie($cookie_name, $language, time() + (3600 * 1000 * 24 * 365), "/");
?>
Fíjate que volvemos a trabajar el tiempo con milisegundos. Finalmente debemos cerrar la ventana mediante javascript, asique nuestro archivo php quedaria asi:
<?php
$language=$_GET["language"];
$cookie_name = "language";
setcookie($cookie_name, $language, time() + (3600 * 1000 * 24 * 365), "/");
echo "<script type='text/javascript'>";
echo "window.close();";
echo "</script>";
?>
Aplicando el lenguaje de la cookie
Finalmente solo nos quedara leer la cookie y aplicarle el lenguaje.
Para leer la cookie en php utilizaras:
$language=$_COOKIE['language'];
Para leer la cookie en javascript:
var language = document.cookie;
Finalmente, implementas el lenguaje como ya habías hecho:
if($language === "es") {
$website_title = " | Fútbol World Cup";
$lang = 'es';
$language = "es";
} else {
$website_title = " | Soccer World Cup";
$lang = 'en';
$language = "en";
}
Y en caso que sea el dominio.com sin subdominio, puedes aplicar esto:
switch($language){
case "es":
echo "Contenido en español";
break;
}
Validando language
Siempre es necesario validar los valores que pueda modificar el usuario. En este caso como solo pueden ser unas strings específicas, lo podrias hacer mediante un switch:
switch(language) {
case 'pt':
var language = 'pt';
break;
default:
var language = 'en';
break;
}
Como puedes ver, solo me aseguro que la variable del data-value corresponde a uno de los formatos permitidos, y en caso de que no sea así le asignare a language el valor predeterminado.