Menu
I have a web page in Bulgarian and I want my users be able to translate it one-click to English. Also there should not be any translation banner at the top of the page when a user enters to the page (it can after the user clicks the translation link). I have tried to use #googtrans(bg|en) (doc) but it didn't work, also it shows a banner at the top of the page due to this code:
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'bg',
autoDisplay: false,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
(doc)
the code is here krumovgrad.eu click the flags at the right top.
546
I had the same issue a few days ago and came up with a solution that works. I have a site in Spanish, and until we translate it into English, we offer our users the possibility of using Google Website Translator. When users click en English flag, it opens a Twitter Bootstrap modal telling the user the website hasn't been translated yet, and there's a button they can click to trigger the translation. I capture the event with JavaScript, set the cookie 'googtrans' with the value '/es/en' and reload the page. The Google's script does the rest. After the reload, I check if the cookie exists and change the English flag for the Spanish flag. When the user clicks on it, I set the cookie to '' (empty string), and reload the page.
For simplicity's sake, I won't include the Bootstrap modal part.
<!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>
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');
}
});
In the Website Translator setup wizard, you can select the languages you want to appear in the list. You then can have your own <select> where each <option> has as the value the value of the cookie it should have, or an ordinary list with flags with something like data-cookie="value". Then with JavaScript you capture the 'change' event (for the select) or the 'click' event for the list, and set the cookie appropriately.
Note: I intentionally removed the div where the Website Translator gets rendered:
<div id="google_translate_element"></div>
To see it working, you can visit www.viajoasalta.com; at least until we finally translate it.
86
answered Sep 19 '22 12:09
Google has thought ahead my friend. Please look at this page: http://translate.google.com/translate_tools
EDIT: I'm sorry, I just realized you're using what the page provides! You can, with simple javascript, hide the elements that are displayed and create a link for English where it's onClick changes the value of the hidden select element...and your entire page is translated.
It's a bit messy but it gets the job done and the user doesn't know it exists!
You can also consider capturing the request that is sent to the google translate servers and capture the link that is called when you select English and just use that link.
Chrome has a nice utility to capture requests (see ctrl+shift+j for a developer console)
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
