2

Tengo dos sitios web de noticias, uno en español y otro en ingles:

es.example.com // español
example.com // ingles

Pero desde el dominio principal (en ingles) le estoy integrando un sistema para poder mostrar noticias en otro idioma por ejemplo:

example.com/es/url-de-la-noticia/ // español

En base a esa URL, creo una cookie donde va almacenar el idioma de la URL, que es la primera carpeta/subcarpeta o directorio /es/:

//Creo las cookie automáticamente para el subdominio y para las URLs en español.
if($FOLDER_LANG === "es" || $SUBDOMAIN_LANG === "es") {
    setcookie ('language', 'es', time()+60*60*24*365, '/', '.example.com');
}

Con este parámetro se va mostrar noticias en español tanto para el sitio: es.example.com por el subdominio es o por las URLs en español example.com/es/url-de-la-noticia/ = es

//Verificamos la existencia de la cookie
if(isset($_COOKIE['language'])){
    //Imprimimos variables del idioma en coincidencia del valor que almacena la cookie
    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 {
    //En caso de no existir cookie muestro por default el idioma ingles.
    $website_title = " | WebSite Ingles";
    $lang = 'en';
    $language = "en";
}

Hasta ahora todo parece estar funcionando correctamente.

Pero el problema se presenta cuando intento cambiar de idioma mediante Ajax, pese que el código Ajax si envía y remite información, por algún motivo no reemplaza la cookie, es decir si doy click en el idioma ingles, no lo cambia, no esta funcionando el cambio de idioma.

Lo que deseo lograr es que se pueda cambiar también el idioma, eliminando o reemplazando las cookie tanto del lado del servidor como del lado del cliente mediante 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 será el encargado 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');
        }
    }
?>

Las cookie de PHP debe trabajar en conjunto con cookie jQuery/javascript o será suficiente con PHP?

1 respuesta 1

2
+200

Los cambios si son realizados correctamente solo necesitas recargar la página, puede agrega esto en su ajax, para observar el cambio de la cookie:

    request.done(function(data) {
        //$(".resultado").html(data);
        setTimeout(
            function() {
                location.reload();
            }, 1000);
    });

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.