If we use Google Translator in our website there might me some issue with different page, So Instead of Google translator if we want to implement any other translator in our website we can go with the Yandex Translator which is free and which provide widget for multiple Language
Here for language select we can use Image instead of Text like Country Flag as shown in below Screenshots
Code to Implement
HTML
Add the in that Section where we want to Show the Language Selector
<div id=“ytWidget”></div>
<div class=“language-selector-ya”>
<div class=“select-lang”>Choose Language</div>
<a class=“lang__link” data-ya-lang=“en”><img class=“language-flag-icon” src=“/site/images/Home/EnglishFlag.png” alt=“English Flag”></a>
<a class=“lang__link” data-ya-lang=“fr”><img class=“language-flag-icon” src=“/site/images/Home/Newfrench1.jpg” alt=“French Flag”></a>
</div>
.js code
_.extend(HeaderViews.prototype, {
template: jj_header_header_tpl,
initialize: _.wrap(HeaderViews.prototype.initialize, function (fn) {
var context = fn.apply(this, _.toArray(arguments).slice(1));
const yatranslate = {
lang: “en”,
};
if (yatranslate.langFirstVisit && !localStorage.getItem(‘yt-widget’)) {
yaTranslateSetLang(yatranslate.langFirstVisit);
}
let script = document.createElement(‘script’);
script.src = `https://translate.yandex.net/website-widget/v1/widget.js?widgetId=ytWidget&pageLang=${yatranslate.lang}&widgetTheme=light&autoMode=false`;
document.getElementsByTagName(‘head’)[0].appendChild(script);
// We get and write down the language into which we translate
let code = yaTranslateGetCode();
// Show the current language in the menu
yaTranslateHtmlHandler(code);
// We hang the event click on the flags
yaTranslateEventHandler(‘click’, ‘[data-ya-lang]’, function (el) {
yaTranslateSetLang(el.getAttribute(‘data-ya-lang’));
window.location.reload();
})
function yaTranslateSetLang(lang) {
// Writing the selected language to localStorage
localStorage.setItem(‘yt-widget’, JSON.stringify({
“lang”: lang,
“active”: true
}));
}
function yaTranslateGetCode() {
return (localStorage[“yt-widget”] != undefined && JSON.parse(localStorage[“yt-widget”]).lang != undefined) ? JSON.parse(localStorage[“yt-widget”]).lang : yatranslate.lang;
}
function yaTranslateHtmlHandler(code) {
$(document).ready(function () {
document.querySelector(`[data-ya-lang=”${code}“]`).remove();
})
};
function yaTranslateEventHandler(event, selector, handler) {
document.addEventListener(event, function (e) {
let el = e.target.closest(selector);
if (el) handler(el);
});
}
}),
}),
CSS Code
#ytWidget{
display: none;
}
.language-flag-icon {
width: 80px;
height: 40px;
border-radius: 5px;
@media(max-width: $screen-sm-max) {
width: 60px;
height: 33px;
}
@media(max-width: $screen-xs-max) {
width: 50px;
height: 30px;
}
}
.select-lang{
font-size: $pcin-font-size-xxs;
font-weight: 800;
color:$pure-care-grey;
border-bottom: 1px solid $pure-care-silver;
padding: 0 $sc-padding-lv1;
}
a.lang__link {
display: flex;
justify-content: center;
padding: $sc-padding-lv1;
}
We can Change the Style according to our Needs