Multilingual website with Google Translate & jQuery

Design help Custom code
1

I integrated google translator to my website and everything seemed to work fine but unfortunately we are having challenges on our end in regards to the website. Once the spanish language is chosen or selected and the website/tab is closed, the next time it is opened, it stays with the spanish language. We would prefer for the site to be set in English with the option to convert to Spanish if desired. I think the reason for this is that the browser is saving the data, and that’s why when I visit the website again it stays in the spanish language, I just don’t know how to solve it. The other thing we noticed is that once we choose the English conversion on one page and click a tab to switch to another page, the new page switches back to Spanish.’

Here is my site Read-Only:

https://preview.webflow.com/preview/city-vax-low-cost-pet-vaccinations?utm_medium=preview_link&utm_source=dashboard&utm_content=city-vax-low-cost-pet-vaccinations&preview=e890080b76514c62bc2a7b6c7039b203&workflow=preview

and this is the code that I’m using:

/* Remove Google top bar and margin */ /* body > .skiptranslate { display: none; } */ /* Disable google translate original text tooltips */ #goog-gt-tt, .goog-te-balloon-frame{display: none !important;} .goog-text-highlight { background: none !important; box-shadow: none !important;}
2

Hey! Not sure if you still need this but I figured out a way to remove this code glitch.

Here’s the script and styles that work for me:

 /* Remove Google top bar and margin */
  .VIpgJd-ZVi9od-ORHb, .VIpgJd-ZVi9od-ORHb table, .skiptranslate, .skiptranslate iframe {
    display: none !important;
  } 
  body {
    top: 0px !important; 
  } */
  
  /* Disable google translate original text tooltips */
  #goog-gt-tt, .goog-te-balloon-frame {
    display: none !important;
  }
  .goog-text-highlight { 
    background: none !important; box-shadow: none !important;
  }   

<!-- English / Spanish translate with Google Translate-->
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
  function setCookie(key, value, expiry) {
    var expires = new Date();
    expires.setTime(expires.getTime() + (15 * 60 * 1000)); 
    document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
  }
  function googleTranslateElementInit() {
    setCookie('googtrans', '/en/lo', 1); //set your language here
    new google.translate.TranslateElement({
      includedLanguages: 'en,es', //list your included languages here with the default first
      layout: google.translate.TranslateElement.InlineLayout.SIMPLE
    }, 'google_translate_element');
  }
  function triggerHtmlEvent(element, eventName) {
    var event;
    if (document.createEvent) {
      event = document.createEvent('HTMLEvents');
      event.initEvent(eventName, true, true);
      element.dispatchEvent(event);
    } else {
      event = document.createEventObject();
      event.eventType = eventName;
      element.fireEvent('on' + event.eventType, event);
    }
  } 
  jQuery('.lang-select').click(function() {
    var theLang = jQuery(this).attr('data-lang');
    jQuery('.goog-te-combo').val(theLang);
    window.location = jQuery(this).attr('href');
    location.reload(); 
    jQuery(document).on("change","#google_language_translator select",function() {
    if(jQuery(this).val() == 'en'){ 
        location.reload(); 
    }
});
  });
 </script>

Hope this helps!

1 Like