0

I have the following code that works perfectly.

It is code from one of my WordPress blog's plugin and all it does is create a drop-down list and then lets users navigate the site based on the language they choose.

The only think it is missing is that when a different language is chosen and the user goes to that page, in the drop-down it resets the language to the one that has the "selected" property turned on, which is "English".

I need the drop-down to display the item/language that was chosen to get them to that page. So, for example, if I chose "Deutsch" then when it gets to that page, it should say "Deutsch" in the drop-down menu.

Any ideas how to tweak this code to achieve that..??

<ul class="qtrans_language_chooser" id="mqtranslate-2-chooser"><li class="lang-de"><a href="http://localhost/tshirts/?lang=de" hreflang="de" title="Deutsch"><span>Deutsch</span></a></li><li class="lang-en active"><a href="http://localhost/tshirts/" hreflang="en" title="English"><span>English</span></a></li><li class="lang-fr"><a href="http://localhost/tshirts/?lang=fr" hreflang="fr" title="Français"><span>Français</span></a></li><li class="lang-es"><a href="http://localhost/tshirts/?lang=es" hreflang="es" title="Español"><span>Español</span></a></li></ul><div class="qtrans_widget_end"></div><script type="text/javascript">
// <![CDATA[
var lc = document.getElementById('mqtranslate-2-chooser');
var s = document.createElement('select');
s.id = 'qtrans_select_mqtranslate-2-chooser';
lc.parentNode.insertBefore(s,lc);
        var sb = document.getElementById('qtrans_select_mqtranslate-2-chooser');
        var o = document.createElement('option');
        var l = document.createTextNode('Deutsch');

        o.value = 'http://localhost/tshirts/?lang=de';
        o.appendChild(l);
        sb.appendChild(o);

        var sb = document.getElementById('qtrans_select_mqtranslate-2-chooser');
        var o = document.createElement('option');
        var l = document.createTextNode('English');
        o.selected = 'selected';
        o.value = 'http://localhost/tshirts/';
        o.appendChild(l);
        sb.appendChild(o);

        var sb = document.getElementById('qtrans_select_mqtranslate-2-chooser');
        var o = document.createElement('option');
        var l = document.createTextNode('Français');

        o.value = 'http://localhost/tshirts/?lang=fr';
        o.appendChild(l);
        sb.appendChild(o);

        var sb = document.getElementById('qtrans_select_mqtranslate-2-chooser');
        var o = document.createElement('option');
        var l = document.createTextNode('Español');

        o.value = 'http://localhost/tshirts/?lang=es';
        o.appendChild(l);
        sb.appendChild(o);
        s.onchange = function() { document.location.href = this.value;}
lc.style.display='none';
// ]]>
</script>

EDIT: Changes after Joe's comment below. Now always highlighting "English" no matter which language page it lands on.

        var sb = document.getElementById('qtrans_select_mqtranslate-2-chooser');
        var o = document.createElement('option');
        var l = document.createTextNode('Deutsch');
o.selected = document.location.href.match(/\/de\//) !== null        
        o.value = 'http://localhost/tshirts/?lang=de';
        o.appendChild(l);
        sb.appendChild(o);

        var sb = document.getElementById('qtrans_select_mqtranslate-2-chooser');
        var o = document.createElement('option');
        var l = document.createTextNode('English');
o.selected = document.location.href.match(/\/(de|fr|es)\//) === null
        o.value = 'http://localhost/tshirts/';
        o.appendChild(l);
        sb.appendChild(o);
user3512522
  • 39
  • 13
  • Could you check for the option that has the same value as the current URL and change the index? Likely wouldn't work if the dropdown doesn't update based on different pages though. Maybe a cookie? – scragar Jun 16 '14 at 16:39
  • As @scragar said, you will have to have some form of 'saving' the data. Such as pulling it from the URL or even saving it into a cookie/session. You can even send the information to the database as a 'preferred' language assuming your users are logged in. – ntgCleaner Jun 16 '14 at 16:43
  • @ntgCleaner if the form URLs are all generated based on the users current location(as could be the case given they're all `localhost/tshirts/...`) there wouldn't be a need for storage since `window.location` will match one of the URLs. – scragar Jun 16 '14 at 16:51
  • @scragar, Yes, you're right. I was giving other options as well. – ntgCleaner Jun 16 '14 at 18:52

3 Answers3

0

Use a cookie to remember the user's language. So, before anything happens when your website is loading in browser the server knows what language the user has selected. Javascript alone won't help you achieve this. There are many ways you can implement cookies, but if you are new to cookies and don't understand how they work (from a back end perspective, front end doesn't count) - then you need to read this article before doing anything else (http://www.w3schools.com/php/php_cookies.asp)!

Personally, I'd just stick some cookie logic in the header.php of my wordpress theme. If you are using someone else's theme, you'll probably want to use some wordpress hook instead.

After you read the basic w3schools article about cookies, and how they work with PHP, then you can decide if you are going to just use PHP or implement cookies using Wordpress API (which under the hood, is using what is in the w3schools article, but with extra logic) - http://codex.wordpress.org/WordPress_Cookies

Also, since now you know you'll need to use a cookie, you can search for posts like "wordpress cookie language" or something - there is a jQuery plugin (https://github.com/carhartl/jquery-cookie/) referenced at the answer here: Remember preferable language - I personally wouldn't use jquery for this though.

Community
  • 1
  • 1
docodemore
  • 1,074
  • 9
  • 19
0

If all of the language specific pages have the language code in the url, you could use a regex to determine o.selected:

o.selected = document.location.href.match(/\/de\//) !== null

and for english

o.selected = document.location.href.match(/\/(de|fr|es)\//) === null

Update

In your second example, you changed the language bit from /tshirts/de/ to /?lang=de'. If you are going to mix and match putting the language in the URL or in the query string, you will need to test for both.

o.selected = document.location.href.match(/(\/de\/?)|([?&]lang=de)/) !== null

the first part of the regex \/de\/? will match /de/ or /de at the end of the URL and the second part will match either ?lang=de or &lang=de, and the | is essentially an OR operator. Simply replace the de with fr or es to use this for the other languages.

For english, check for all other languages and select if none are found:

o.selected = document.location.href.match(/(\/(de|es|fr)\/?)|([?&]lang=(de|es|fr))/) === null

the (de|es|fr) part will match any of de,es,or fr

Joe
  • 25,000
  • 3
  • 22
  • 44
  • Since I have no idea what I am doing, can you please modify the code above so that it works like you are proposing..?? Thanx much. – user3512522 Jun 16 '14 at 18:31
  • I have made the following change but it is now always highlighting "English" in the drop-down no matter which language page I choose. (EDIT added to OP above.) – user3512522 Jun 17 '14 at 20:33
  • Joe, that is my bad. Apologies. The urls are going to be either `http://www.domain.com/` for English or `http://www.domain.com/?lang=de` for the other languages like German. I have edited my OP to reflect this. – user3512522 Jun 18 '14 at 02:34
  • Joe. I added this line in for German `o.selected = document.location.href.match(/(\/de\/?)|([?&]lang=de/) !== null` but it is breaking my drop-down list as they are now showing up as a bulleted list. My OP shows how I am using List and CSS to create the drop-down. Based on my previous response about not mixing-and-matching URLs you think you could amend your code to fix this issue...?? Thanx much. – user3512522 Jun 22 '14 at 04:43
0

You want to remember the user choice of language from one page to another. Use o nof the following. Use one of the following :

  1. Use cookies, set the language preference in cookies and later retrieve it.

  2. Use localStorage or sessionStorage to store the language preference and later retrieve it and change the default by it.

  3. Set a session variable for the selected language and when on the other page, check the value of the session variable for language.

PG1
  • 1,220
  • 2
  • 12
  • 27