I have two news websites, one in Spanish and one in English:
es.example.com // Spanish
example.com // English
But from the main domain (in English) I am integrating a system to be able to show news in another language for example:
example.com/es/url-de-la-noticia/ // Spanish
Based on that URL, I create one ´cookie´ where the language of the URL will be stored, which is the first folder/subfolder or directory ´/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');
}
With this parameter, news will be displayed in Spanish for both the site: es.example.com
by the subdomain es
or by the URLs in Spanish example.com/es/url-de-la-noticia/
= es
//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";
}
So far everything seems to be working properly.
But the problem arises when I try to change the language through Ajax, although the Ajax code does send and send information, for some reason it does not replace the cookie, that is, if I click on the English language, it does not change it, the change of language.
What I want to achieve is that the language can also be changed, removing or replacing the cookies both on the server side and the client side using 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>
The language.ini.php file will be in charge of changing the language, creating their respective 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');
}
}
?>
from How to change server side language cookies like client side using Ajax?
No comments:
Post a Comment