Adding language switcher

[klarakucerova]

Hi, this plugin is great! thanks for sharing it!
I have already set it up on one site, but would love to add a language switcher for users to have an option. I have found a nice solution in your issue: #17

The only problem is that when I change a page, it switches back to the previous language. Any ideas how to adjust it?!

HTML

<select id="languages" class="language-switcher">
    <option value="en">ENG</option>
    <option value="es">ESP</option>
</select>

JS

function onLanguageItemChange() {
    var lang = $("select#languages option:selected").val();
    $("[data-localize]").localize("language", { language: lang });
}
$(document).ready(function() {
    $("select#languages").change(onLanguageItemChange).change();
});

plus two files language-en.json and language-es.json

many thanks in advance!

[alexwebgr]

i guess you would have to persist somewhere like localStorage for example
so when you change the language store the lang id in localStorage and every time you load the page get the language id from localStorage if it is the first time the user visits the page then set language to a default and store it
i would also use anchors instead they are more accessible and easier to work with

[klarakucerova]

Hi Alex, I haven’t reply yet as I was trying to work this out by myself, but I have to admit my javascript skills are very basic and my attempt failed greatly..

I have tried something like this with anchors, but unfortunately doesn't work. I didn't even managed to get to localStorage part.. Could I ask for some more help please?!

HTML

<div id="languages" class="language-switcher">
    <a href="#" id="en">ENG</a>
    <a href="#" id="es">ESP</a>
</div>

JS

function onLanguageItemChange() { 
    if($("#languages a").attr("id") == "es") {
        $("[data-localize]").localize("application", { language: "es" });
    }
    else if($("#languages a").attr("id") == "en") {
        $("[data-localize]").localize("application", { language: "en" });
    }
}

$(document).ready(function() {
    $("#languages a").attr("id").change(onLanguageItemChange).change();
});

[alexwebgr]

hi klara

i was thinking something more like this

https://jsfiddle.net/s88xvzan/
it is not working in jsFiddle i only used it for pasting the code github editor was been weird :P

dont forget to include Session.js in your html file
https://gist.github.com/alexwebgr/9089150

another benefit for using anchors is that you can add flag icons instead of text very easily

let me know me how it goes
alex

[klarakucerova]

hi Alex, it works like a charm!! many many thanks for the help!
very appreciated :)

[alexwebgr]

happy to help !

[jcesargithl]

Hi,

I'm getting a "XHR failed loading: GET "https://mysiteweb/test/lenguaje-es.json" error on chrome console, after of triying many times the switch language it works.

Any ideas?

[alexwebgr]

there are many reasons a XHR might fail. Can you share more info for example the HTTP status code ?
and as the saying goes a picture is thousand words ... so a screenshot of the console would be really helpful

1. how many languages do you offer ?
2. is that one the only one that fails ?

a common reason for failing is also typos or wrong paths

[wegee-us]

@alexwebgr hi, i test your code, why it's not working. when i click on it, it won't change.
html
`<!DOCTYPE>

<title>Language</title>

<script src="../lang/session.js" type="text/javascript" charset="utf-8"></script>
<script src="../lang/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../lang/jquery.localize.js" type="text/javascript" charset="utf-8"></script>
<script src="../lang/language_cookie.js" type="text/javascript" charset="utf-8"></script>

• en
• zh

• MANAGEMENT
• SUPPORT
• TUTORIAL
• FEATURES

` js ` var session = Session.getItem("session"); var lang = session.languageKey;

if(lang === undefined) {
lang = "zh";
doLocalize(lang);
} else {
$("[data-localize]").localize("lang/text", {language: lang});
}

$(".languageSwitcher a").on({
click: function () {
lang = $(this).attr("data-lang");
doLocalize(lang);

   return false;
 }

});

function doLocalize(lang) {
session.languageKey = lang;
Session.setItem("session", session);

$("[data-localize]").localize("lang/text", {language: lang});

}`

[alexwebgr]

make sure that the paths to the language files are correct and check the console to see if you are getting any errors :)

[wegee-us]

@alexwebgr hi, there is no error shows up in console. so that's why i'm asking what's wrong with the code. and the path is correct as well.

[alexwebgr]

your code looks ok to me but to be honest it has been ages since I last used this plugin so I'm not sure how much help I can be :( what I would suggest though, is to double check the documentation, build a small PoC in jsfiddle for example and then start adopting it to your use case

…

On Sat, 8 Jun 2019, 02:16 wegee-us, ***@***.***> wrote: @alexwebgr <https://github.com/alexwebgr> hi, there is no error shows up in console. so that's why i'm asking what's wrong with the code. and the path is correct as well. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#77?email_source=notifications&email_token=AA2JR35ENCSXJSV7QTEUD7LPZMCALA5CNFSM4CG3HJHKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODXHKEVY#issuecomment-500081239>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA2JR34WUV3JV4HNFXEESZLPZMCALANCNFSM4CG3HJHA> .

[wegee-us]

@alexwebgr ok, thanks for your reply, i will try something else.