Move Google Translate into language / currency bar

Quote

Post by jcgadgets » Fri Jan 21, 2011 3:53 pm

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
jcgadgets
Active Member
Posts
113
Joined
Sun Oct 31, 2010 4:49 pm
Top

Re: Move Google Translate into language / currency bar

Quote

Post by Chones » Fri Jan 21, 2011 6:36 pm

Hi Jared, can you post a link? I can't remember if you gave me one before.

http://scarletandjones.com/
http://sharpdressedman.co.uk/
http://coffincompany.co.uk/
http://horsesculptures.co.uk/
If I've helped you out, why not buy me a beer? http://craigmurray.me.uk

User avatar
Chones
Active Member
Posts
753
Joined
Wed Mar 24, 2010 9:07 pm
Location - London
Top

Re: Move Google Translate into language / currency bar

Quote

Post by jcgadgets » Sat Jan 22, 2011 4:30 am

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
jcgadgets
Active Member
Posts
113
Joined
Sun Oct 31, 2010 4:49 pm
Top

Re: Move Google Translate into language / currency bar

Quote

Post by jcgadgets » Tue Jan 25, 2011 3:51 pm

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
jcgadgets
Active Member
Posts
113
Joined
Sun Oct 31, 2010 4:49 pm
Top

Re: Move Google Translate into language / currency bar

Quote

Post by Chones » Thu Jan 27, 2011 4:19 am

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.

http://scarletandjones.com/
http://sharpdressedman.co.uk/
http://coffincompany.co.uk/
http://horsesculptures.co.uk/
If I've helped you out, why not buy me a beer? http://craigmurray.me.uk

User avatar
Chones
Active Member
Posts
753
Joined
Wed Mar 24, 2010 9:07 pm
Location - London
Top

Re: Move Google Translate into language / currency bar

Quote

Post by jcgadgets » Thu Jan 27, 2011 6:58 am

Craig,

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


Thank you,
Jared
jcgadgets
Active Member
Posts
113
Joined
Sun Oct 31, 2010 4:49 pm
Top

Re: Move Google Translate into language / currency bar

Quote

Post by jcgadgets » Thu Jan 27, 2011 3:43 pm

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
jcgadgets
Active Member
Posts
113
Joined
Sun Oct 31, 2010 4:49 pm
Top

Re: Move Google Translate into language / currency bar

Quote

Post by Chones » Sat Jan 29, 2011 2:37 am

Good. Glad to help Jared.

http://scarletandjones.com/
http://sharpdressedman.co.uk/
http://coffincompany.co.uk/
http://horsesculptures.co.uk/
If I've helped you out, why not buy me a beer? http://craigmurray.me.uk

User avatar
Chones
Active Member
Posts
753
Joined
Wed Mar 24, 2010 9:07 pm
Location - London
Top

Re: Move Google Translate into language / currency bar

Quote

Post by webstudent1 » Sun Mar 06, 2011 3:04 am

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
webstudent1
New member
Posts
56
Joined
Thu Jan 07, 2010 2:24 am
Top

Re: Move Google Translate into language / currency bar

Quote

Post by shopngo » Tue Apr 16, 2013 8:31 pm

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
shopngo
Newbie
Posts
12
Joined
Fri Feb 08, 2013 6:45 am
Top
Post Reply
Return to “Template Support”
Who is online

Users browsing this forum: No registered users and 65 guests