If we want to add google Translator in our website we can follow the below steps
We need to add Script As Shown below
if we add directly in TPL file it will work fine.
<script type=“text/javascript” src=“https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit”></script>
<script type=“text/javascript”>
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: ‘en’,includedLanguages: ‘en,fr’}, ‘google_translate_element’);
}
</script>
Here we have added two language English and French , English is the default Language we can change the Language from ‘,includedLanguages: ‘en,fr’ According to our requirement.
Add the Tag in the section Where we want to Show the Drop-down of the Google Translator.
<div id=“google_translate_element” class=“language-translator”></div>
Give the CSS To hide some unwanted Section and to hide the Watermark of google
select.goog-te-combo{
padding:$sc-padding-lv1;
padding-right: $sc-padding-lv6;
font-size: $pcin-font-size-md;
}
.skiptranslate.goog-te-gadget {
color: transparent;
}
.VIpgJd-yAWNEb-L7lbkb {
opacity: 0;
position: absolute;
}
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf {
display: none;
}
.header-menu-profile .header-menu-myaccount{
height:350px;
}
.header-mini-cart a.header-mini-cart-button-view-cart{
padding-left: 0;
padding-right: 0;
}
.product-details-full button.cart-add-to-cart-button-button{
padding:$sc-padding-lv3;
}
We can adjust the CSS According to our Needs