que tenían el mismo problema hace unos días y se le ocurrió una solución que funciona. Tengo un sitio en español, y hasta que lo traduzcamos al inglés, ofrecemos a nuestros usuarios la posibilidad de utilizar Google Website Translator. Cuando los usuarios hacen clic en la bandera inglesa, se abre un modo Twitter Bootstrap que le informa al usuario que el sitio web aún no se ha traducido, y hay un botón en el que pueden hacer clic para activar la traducción. Capturo el evento con JavaScript, establezco las cookies 'googtrans' con el valor '/ es/en' y vuelvo a cargar la página. El script de Google hace el resto. Después de la recarga, compruebo si existe la cookie y cambio la bandera inglesa de la bandera española. Cuando el usuario hace clic en él, configuro la cookie en '' (cadena vacía) y vuelvo a cargar la página.
Por simplicidad, no incluiré la parte modal de Bootstrap.
HTML
<!DOCTYPE html>
<html>
<head>
(...)
<meta name="google-translate-customization" content="(YOUR_TRANSLATE_CUSTOMIZATION_ID)" />
(...)
</head>
<body>
(...)
<a id="lang-change-en" class="lang-change" href="javascript:void(0);">
<img src="images/en-flag.png" alt="English Flag">
</a>
(...)
<script src="js/script.js"></script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
</html>
Javascript (script.js)
function setCookie(cname, cvalue, exdays) {
var expires;
if (exdays === 0) {
expires = '';
} else {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
expires = "expires=" + d.toGMTString();
}
var domain = (typeof domain === "undefined") ? '' : "; domain="+domain;
document.cookie = cname + "=" + cvalue + "; " + expires + "path=" + path + domain;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
//Google provides this function
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'es',
includedLanguages: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
autoDisplay: false
},'google_translate_element');
}
//Using jQuery
$(document).ready(function() {
$(document).on('click','#lang-change-en', function() {
setCookie('googtrans', '/es/en', 0, '.viajoasalta.com');
setCookie('googtrans', '', 0, '/');
location.reload();
});
$(document).on('click', '#lang-change-es', function() {
setCookie('googtrans', '', 0, '/', '.viajoasalta.com');
setCookie('googtrans', '', 0, '/');
location.reload();
});
var googTrans = getCookie('googtrans');
if (googTrans === '/es/en') {
var src = $('#lang-change-en > img').attr('src').replace('en-flag', 'es-flag');
$('#lang-change-en > img').attr('src', src);
$('#lang-change-en').attr('id', 'lang-change-es');
}
});
En el asistente de configuración Traductor de sitios web, puede seleccionar los idiomas que desea que aparezca en la lista. A continuación, puede tener su propio <select> donde cada <option> tiene como value el valor de la cookie que debería tener, o una lista ordinaria con indicadores con algo así como data-cookie="value". Luego, con JavaScript, captura el evento 'cambiar' (para la selección) o el evento 'clic' para la lista, y establece la cookie de manera apropiada.
Nota: Me extrae intencionalmente el div donde el Traductor de sitios web se rindió:
<div id="google_translate_element"></div>
Para ver su funcionamiento, se puede visitar www.viajoasalta.com; al menos hasta que finalmente lo traduzcamos
¿Qué tienes hasta ahora? – Hannele
Banner de traducción con enlace no funcional. No quiero banner, quiero un enlace que funcione/traduzca. – ilhan
Actualización: En Firefox; pancarta con un enlace que funciona. En IE 8 nada. – ilhan