Good morning, people,
I'm with a company website, and my job is to translate. It was requested to be in javascript and it was done. That way, when I click on the flag, and select the language, the page is translated. However, when I change pages, I go to the "consumer" wing, for example, the site can not keep the language cookie, and it returns to the default that is Portuguese. Can someone help me solve this, please? Suggestions?
Follow the link for reviews:
My script:
var _t = $('body').translate({lang: "pt", t: t});
var str = _t.g("translate");
console.log(str);
$(".lang_selector").click(function(ev) {
var lang = $(this).attr("data-value");
_t.lang(lang);
console.log(lang);
ev.preventDefault();
});
});
Follow the header of my html:
<header>
<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
<section id="location">
<div class="collapse" id="collapseNavbar" aria-expanded="false" style="height: 0px;">
<div class="container-fluid" style="background-color:#025b93;">
<div class="container">
<div id="lang_sel_list" class="lang_sel_list_horizontal">
<ul>
<li class="icl-br"><a class="lang_sel_other lang_selector active" data-value="pt" href="#" data-trn-key="translate to English"><img class="iclflag" src="images/br.png" height="12" alt="br" width="18">Brasil</a></li>
<li class="icl-ar"><a class="lang_sel_other lang_selector" data-value="dk" href="#"><img class="iclflag" src="images/dk.png" height="12" alt="us" width="18">Dinamarca</a></li>
<li class="icl-ar"><a class="lang_sel_other lang_selector" data-value="en" href="#"><img class="iclflag" src="images/us.png" height="12" alt="us" width="18">Global</a></li>
<li class="icl-bo"><a class="lang_sel_other lang_selector" data-value="es" href="#"><img class="iclflag" src="images/es.png" height="12" alt="bo" width="18">España</a></li>
<li class="icl-th"><a class="lang_sel_other lang_selector" data-value="fr" href="#"><img class="iclflag" src="images/fr.png" height="12" alt="th" width="18">France</a></li>
<li class="icl-th"><a class="lang_sel_other lang_selector" data-value="it" href="#"><img class="iclflag" src="images/italia.png" height="12" alt="th" width="18">Italia</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<div class="container-fluid">
<div class="row">
<div class="menuCentro">
<div class="col-xs-1 col-sm-1 col-md-1">
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<a href="index.html"><img src="images/logo2.png" class="img-responsive" width="190" height="57" style="float:left;"></a>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<ul class="nav navbar-nav navbar-right">
<li class="hidden"><a href="#page-top"></a></li>
<li><a class="page-scroll trn ativo" href="index.html">HOME</a></li>
<li><a class="page-scroll trn" href="consumidor.html">CONSUMIDOR</a></li>
<li><a class="page-scroll trn" href="Empresa.html">EMPRESAS</a></li>
<li><a class="page-scroll trn" href="Parceiros.html">PARCEIROS</a></li>
<li><a class="page-scroll trn" href="QuemUsa.html">EXEMPLOS DE USO</a></li>
<li><a class="page-scroll trn" href="Contato.html">CONTATO</a></li>
<a id="btn-toggle-location" class="btn navbar-right collapsed" data-toggle="collapse" data-target="#collapseNavbar" aria-expanded="false" aria-controls="collapseNavbar">
<span><img src="images/br.png" height="12" alt="br" width="18"></span><i class="fa fa-angle-down" id="traduc"></i>
</a>
</ul>
</div>
</div>
</div>
</div>
</nav>
</header>
And the translate file looks like this:
$(function() {
//header
var t = {
"HOME": {
pt: "HOME"
},
"CONSUMIDOR": {
pt: "CONSUMIDOR",
en: "CONSUMER",
es: "CONSUMIDOR",
fr: "CONSOMMATEUR",
it: "CONSUMATORI",
dk: "FORBRUGER"
},