Tengo dos sitios web de noticias, uno en español y otro en inglés:
es.example.com // Spanish example.com // EnglishPero desde el dominio principal (en ingles) estoy integrando un sistema para poder mostrar noticias en otro idioma por ejemplo:
example.com/es/url-de-la-noticia/ // SpanishEn base a esa URL creo una ´cookie´ donde se almacenará el idioma de la URL, que es la primera carpeta/subcarpeta o directorio ´/es/´:
//I create the cookies automatically for the subdomain and for the URLs in Spanish. if($FOLDER_LANG === "es" || $SUBDOMAIN_LANG === "es") { setcookie ('language', 'es', time()+60*60*24*365, '/', '.example.com'); } Con este parámetro se mostrarán las noticias en español tanto para el sitio: es.example.com por el es es o por las URLs en español example.com/es/url-de-la-noticia/
//We verify the existence of the cookie if(isset($_COOKIE['language'])){ //We print variables of the language in coincidence of the value that the cookie stores if($_COOKIE['language']==='en'){ $website_title = " | Sitio en español"; $lang = 'es'; $language = "es"; }elseif($_COOKIE['language']==='es'){ $website_title = " | WebSite Ingles"; $lang = 'en'; $language = "en"; } } else { //In case there is no cookie, I show the English language by default. $website_title = " | WebSite Ingles"; $lang = 'en'; $language = "en"; }Hasta ahora todo parece estar funcionando correctamente.
Pero el problema surge cuando trato de cambiar el idioma a través de Ajax, aunque el código Ajax si envía y envía información, por alguna razón no reemplaza la cookie, es decir, si hago clic en el idioma inglés, no lo cambia. , el cambio de idioma.
Lo que quiero lograr es que también se pueda cambiar el idioma, eliminando o reemplazando las cookies tanto del lado del servidor como del lado del cliente usando ajax:
$(function(){ var tnum = 'en'; $(document).click( function(e) { $('.language, .more_lang').removeClass('active'); }); $('.language .current_lang').click(function(e){ e.stopPropagation(); $(this).parent().toggleClass('active'); setTimeout(function(){ $('.more_lang').toggleClass('active'); }, 5); }); $('.more_lang .lang').click(function(){ $(this).addClass('selected').siblings().removeClass('selected'); $('.more_lang').removeClass('active'); var img = $(this).find('img').attr('src'); var lang = $(this).attr('data-value'); var tnum = lang; $('.current_lang .lang-txt').text(lang); $('.current_lang img').attr('src', img); //if(lang == 'ar'){} }); }); $(function() { $(".lang").click(function(e) { e.preventDefault(); var language = $(this).attr('data-value'); var postData={lang: language}; var request = $.ajax({ method : 'POST', url : 'language.ini.php', data : postData, dataType: "html" }); request.done(function(data) { $(".resultado").html(data); }); request.fail(function(jqXHR, textStatus) { alert("Ocurrió un error: " + textStatus); }); }); }); body{ margin:0; padding:0; color:#444444; font-family: 'News Cycle', sans-serif; } .language{ position:fixed; z-index:1; top:20px; left:20px; font-size:16px; background:#fff; border-radius:4px; } .current_lang{ cursor:pointer; text-transform:uppercase; overflow:hidden; } .lang{ padding:10px 15px; } .lang.selected{ display:none; } .lang img, .lang span.lang-txt{ display:inline-block; margin-left:5px; vertical-align:middle; } .lang span.lang-txt{ position:relative; top:-1px; font-weight:700; } .lang img{ width:20px; margin-left:0; } .lang span span{ color:#999; font-weight:400; } .lang span.fa{ font-size:12px; position:relative; top:-1px; margin-left:3px; } /*more lang*/ .more_lang{ transform:translateY(-20px); opacity:0; cursor:pointer; display:none; -webkit-transition: all .3s cubic-bezier(.25, 1.15, .35, 1.15); -moz-transition: all .3s cubic-bezier(.25, 1.15, .35, 1.15); -o-transition: all .3s cubic-bezier(.25, 1.15, .35, 1.15); -ms-transition: all .3s cubic-bezier(.25, 1.15, .35, 1.15); transition: all .3s cubic-bezier(.25, 1.15, .35, 1.15); } .language.active .more_lang{ display:block; } .more_lang.active{ opacity:1; transform:translateY(-0px); } .more_lang .lang:hover{ background:#5766b2; color:#fff; } .more_lang .lang:hover span{ color:#fff; } .language:hover, .language.active, .content a:hover{ box-shadow:rgba(0,0,0,0.2) 0 5px 15px; -webkit-transition: all 0.3s cubic-bezier(0,.99,.44,.99); -moz-transition: all 0.3s cubic-bezier(0,.99,.44,.99); -o-transition: all 0.3s cubic-bezier(0,.99,.44,.99); -ms-transition: all 0.3s cubic-bezier(0,.99,.44,.99); transition: all 0.3s cubic-bezier(0,.99,.44,.99); } .language.active .lang{ border-bottom:1px solid #eaeaea; } /*CONTENT*/ .content{ width:100%; max-width:400px; position:absolute; top:50%; left:50%; -ms-transform: translateX(-50%) translateY(-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); border-radius:2px; padding:20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align:center; } .content h1, .content h2, .content p{ margin:0; } .content p{ line-height:22px; text-align:left; margin-top:15px; } .content div.ct-img{ width:150px; height:150px; overflow:hidden; border-radius:50%; margin:0 auto 10px; } .content div img{ height:100%; position:relative; left:-30px; } .content a{ padding: 8px 15px 10px; border-radius:4px; background:#5766b2; color:#fff; text-decoration:none; display:inline-block; margin-top:25px; position:relative; overflow:hidden; } .content a:active{ transform: scale(0.9); -webkit-transform: scale(0.9); -moz-transform: scale(0.9); } /*RTL*/ body[dir="rtl"] .language{ right:20px; left:auto; } body[dir="rtl"] .lang span.fa{ margin-right:3px; margin-left:0; } body[dir="rtl"] .lang .lang-txt{ margin-right:5px; margin-left:0; } body[dir="rtl"] .content div img{ left:auto; right:-30px; } body[dir="rtl"] .content p{ text-align:right; } body[dir="rtl"] .lang span span{ float:left; margin-right:5px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="language"> <div class="current_lang"> <div class="lang" data-value='en'> <img src="https://image.flaticon.com/icons/svg/299/299722.svg"> <span class="lang-txt">EN</span> <span class="fa fa-chevron-down chevron"></span> </div> </div> <div class="more_lang"> <div class="lang selected" data-value='en'> <img src="https://image.flaticon.com/icons/svg/299/299722.svg"> <span class="lang-txt">English<span> (US)</span></span> </div> <div class="lang" data-value='es'> <img src="https://image.flaticon.com/icons/svg/299/299820.svg"> <span class="lang-txt">Español</span> </div> </div> </div>El archivo language.ini.php se encargará de cambiar el idioma, creando sus respectivas cookies.
<?php if (isset($_POST['lang'])) { $lang = $_POST['lang'] ?: ''; if ($lang === "en") { setcookie ('language', 'en', time()+60*60*24*365, '/', 'example.com'); } elseif ($lang === "es") { setcookie ('language', 'es', time()+60*60*24*365, '/', 'es.example.com'); } } ?>Quizás J. Mick, usar el almacenamiento de sesión no es la forma de llevar esto adelante, ¿tal vez usar HTML Web Storage es una mejor opción? Al menos de esa manera, no tiene que actualizar la página para actualizar los valores de las cookies, etc., se puede escribir y leer directamente desde JavaScript.
Aquí hay un ejemplo simple de escritura y lectura en el almacenamiento a través de JavaScript. https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_webstorage_local_clickcount
Las cookies se pueden enviar y recibir para todas las solicitudes realizadas desde su navegador, ya sea AJAX. También podría actualizar la cookie ya configurada usando setcookie que parece que ya está haciendo. Puede verificar lo mismo mirando en Encabezados de Request Headers de Response Headers en la pestaña Networks .
Puede que haya algo más que esté causando tu problema.
en tu language.ini.php tienes que cambiar la línea:
setcookie ('language', 'es', time()+60*60*24*365, '/', 'es.example.com');para :
setcookie ('language', 'es', time()+60*60*24*365, '/', 'example.com'); porque si especifica el dominio de la cookie en el encabezado, no será una cookie solo de host y, en su ejemplo, se usarán tanto example.com como es.example.com .
según RFC6265
Por lo general, el lado del servidor solicitará que se configuren las cookies y el navegador las guardará.
El Navegador envía Cookie en cada Solicitud.
El servidor puede acceder a la cookie desde la Solicitud del navegador.
Las cookies son esenciales ya que Http es un protocolo sin conexión y el servidor desea asociar datos a un cliente y usarlos en las próximas solicitudes .
siempre que su usuario decida ver su sitio en el idioma que prefiera. y su servidor no hará nada con él (sin controles, sin hilos de seguridad).
puedes usar un atajo .
Establecer la cookie en su lado del cliente
y simplemente elimine el archivo language.ini.php .
puede hacerlo con Javascript puro y cuando el usuario intente navegar en el navegador. sus solicitudes se enviarán a través de una nueva cookie que se ha configurado javascript.
solo debe tener en cuenta NO habilitar el indicador de solo HTTP en la cookie (lo que puede evitar que Js t manipule la cookie).
Ejemplo de Jquery:
$.cookie('language', '', { expires: 365, path: '/', domain: 'example.com' });en lugar de enviar una solicitud ajax, su js puede verse así:
$(function() { $(".lang").click(function(e) { e.preventDefault(); var language = $(this).attr('data-value'); $.cookie('language', language, { expires: 365, path: '/', domain: 'example.com' }); }); });Parece que tienes varias interfaces de usuario para lo mismo. Tienes un sitio web en inglés y otro en español. Dado que los dominios son diferentes, no me sorprendería que tuviera sesiones y cookies diferentes en dominios separados.
Sin embargo, para evitar la duplicación de código y funciones, al menos la lógica subyacente podría estar disponible en una determinada URL, exponiendo una API tanto a su versión en español como en inglés.
Su enfoque es defectuoso, porque no recarga la página. Sin embargo, podrías resolverlo si tuvieras estas tres partes:
Tanto la interfaz de usuario en inglés como la interfaz de usuario en español utilizarían la API de manera similar y, en el nivel de la API, los textos reales en inglés/español serían menos relevantes, pero la API sería el nivel que determinaría el idioma.
Entonces, si hace clic en el botón en inglés en el sitio en español o en el botón en español en el sitio en inglés, entonces debería suceder lo siguiente:
Así es como yo abordaría esto. Al principio, su API puede ser muy importante, manejando solo esta función, pero idealmente sería genial separar la lógica de las dos IU.
Dado que esta solución implicaría enviar solicitudes AJAX a la API, que estarán en una URL diferente, deberá asegurarse de tener los encabezados HTML correctos que permitan que su página envíe solicitudes a la API sin violar la política CORS de la navegador.
Usando extensiones de Chrome puedes modificar fácilmente con javascript api las cookies del servidor o cualquier cookie que quieras
https://developers.chrome.com/docs/extensions/reference/cookies/
De esta manera, puede acceder a cualquier cookie. A diferencia de DOM javascript normal, que le dará acceso solo a cookies que no sean httpOnly, por ejemplo. https://www.cookiepro.com/knowledge/httponly-cookie/
Cuando se creó una cookie en el servidor con la propiedad httpOnly establecida en verdadero, entonces esta cookie no se puede leer desde DOM javascript. Pero Chrome webextension api tiene acceso a estas cookies.
Avísame si necesitas más ayuda o si esto te ayuda...