Page 1 of 1

Move Google Translate into language / currency bar

Posted: Fri Jan 21, 2011 3:53 pm
by jcgadgets
Hi,

I simply want to move the Google Translate "Select Language" selector next to the default currency selector. I have already removed the default language selector. The reason I want to do this is that I have a lot of custom content on my site (which the default OpenCart translate tool would miss).

Would anyone mind pointing me in the right direction? I don't think it would be too hard, but I'm just not sure where to find the file to cut the code from to paste next to the currency selector...

EDIT:
Ok, I think I've got it ABOUT figured out. I'm editing my header.tpl, right between "div6" and "div7", this is what I've inserted:

Code: Select all

  <div class="middle" style="text-align: right;">
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en',
    includedLanguages: 'af,sq,ar,hy,az,eu,be,bg,ca,zh-CN,hr,cs,da,nl,en,et,tl,fi,fr,gl,ka,de,el,ht,iw,hi,hu,is,id,ga,it,ja,ko,lv,lt,mk,ms,mt,no,fa,pl,pt,ro,ru,sr,sk,sl,es,sw,sv,th,tr,uk,ur,vi,cy,yi',
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script></div>
It's very close, but just causes a few theming issues...
- It looks to be slightly too high - probably by only ten pixels or so
- It forces the currency selector down, instead of just leaving it where it is and positioning the translate selector to the left of it
- Causes the headers of the modules directly below to look funny

Other than that I think I've just about got it! If anyone would care to chime in, that'd be fantastic :)


Thank you,
Jared

Re: Move Google Translate into language / currency bar

Posted: Fri Jan 21, 2011 6:36 pm
by Chones
Hi Jared, can you post a link? I can't remember if you gave me one before.

Re: Move Google Translate into language / currency bar

Posted: Sat Jan 22, 2011 4:30 am
by jcgadgets
Hey Craig,

Thanks for stopping by.

Unfortunately, putting this mod in the way it is now makes things look unprofessional and messy, and I therefore have only tested it at around midnight for periods of just a few minutes. I wouldn't want to leave this mod live for real potential customers to see.

On the other hand, I know that makes things really difficult :S

Perhaps someone else has a test OpenCart store that could put this mod up, or perhaps you and I could schedule a time to chat on Skype or GTalk to put the mod live and discuss solutions?


Thank you,
Jared

Re: Move Google Translate into language / currency bar

Posted: Tue Jan 25, 2011 3:51 pm
by jcgadgets
Hey everyone,

Was just wondering if anyone has had time to check this out? As I mentioned, I think I'm quite close - I just don't know the HTML / CSS / PHP /... enough to polish it off.


Thank you,
Jared

Re: Move Google Translate into language / currency bar

Posted: Thu Jan 27, 2011 4:19 am
by Chones
I don't think you should put it between div6 and div 7, put it in the div that has the currency switcher (is that 6?) and float it right (style="float: right;"). Then you probably just need to fix the top padding and margin.

Re: Move Google Translate into language / currency bar

Posted: Thu Jan 27, 2011 6:58 am
by jcgadgets
Craig,

I appreciate your help! I will try that out (hopefully tonight) and report back.


Thank you,
Jared

Re: Move Google Translate into language / currency bar

Posted: Thu Jan 27, 2011 3:43 pm
by jcgadgets
Got it working! Put it at the very end of div7, because if it was before that then it was in front of the currency selector, and, since the currency selector seems to have that little corner round-off attached to it, that didn't look very nice.
Embarrassingly, this took me about an hour because of my mostly non-existant web programming skills, but the job is done and it now looks flawless :D


Thanks for your help!
Jared

Re: Move Google Translate into language / currency bar

Posted: Sat Jan 29, 2011 2:37 am
by Chones
Good. Glad to help Jared.

Re: Move Google Translate into language / currency bar

Posted: Sun Mar 06, 2011 3:04 am
by webstudent1
this should help you was in a DEV email of mine

google apis / traslate V2 REST by java script example below.

GOOGLE official EXAMPLE

Code: Select all

<html>
  <head>
    <title>Translate API Example</title>
  </head>
  <body>
    <div id="sourceText">Hello world</div>
    <div id="translation"></div>
    <script>
      function translateText(response) { 
        document.getElementById("translation").innerHTML += "<br>" + response.data.translations[0].translatedText;
      }
    </script>
    <script>
      var newScript = document.createElement('script');
      newScript.type = 'text/javascript';
      var sourceText = escape(document.getElementById("sourceText").innerHTML);
      var source = 'https://www.googleapis.com/language/translate/v2?key=INSERT-YOUR-KEY&source=en&target=de&callback=translateText&q=' + sourceText;
      newScript.src = source;
      
      // When we add this script to the head, the request is sent off.
      document.getElementsByTagName('head')[0].appendChild(newScript);
    </script>
  </body>
</html>
FURTHER (ALTERNATE)
If you enable languages in open cart and don't put the language files they will DEFAULT to english but the FLAGS will come up.
Then use the langauge selector in opencart to hyperling link to

THen have the languge selector in opencart set langage and redirect to

Code: Select all

http://translate.google.com/translate?sl=en&tl=XX&u=http%3A%2F%2Fwww.yourdomain.com/currentURL
where XX is the langage code from the language selection in opencart like FR for french.
SL = selected language and TL = translated language.
If you site isn't in english then change SL to your site language.

Hope it helps you.
CYA

Re: Move Google Translate into language / currency bar

Posted: Tue Apr 16, 2013 8:31 pm
by shopngo
Hello all,

I have a small problem doing that and i am writing because i am in a dead end....
if you have some time to check my problem and give me an advise i would really appreciate that...
My url is http://www.shopngo.gr and the translation bar is appearing at the very top. I will delete my url after i find the solution because i don't want to be considered as a spam...

Edit: i want to put it under currency!

Thank you in advance
Alex