So I had the need to create a quick language selector, and was surprised that there were not simple JavaScript solutions hanging out with every developers best friend “Google”. So I decided to put out a quick blog post to help out the community with my simplistic JavaScript solution that can be put in your toolbox as reusable code for use with any version of Sitecore.

Below is my HTML:

<li class="SS-LanguageToggle">
     <a id="langSelectEn" href="#">EN</a>
     <a id="langSelectFr" href="#">FR</a>
</li>

First, what I want to happen is when someone clicks the appropriate language, in this case either English or French, I want the language selector to change the site context to the appropriate language not only for that page but for every page thereafter until they either change it back to the other language or clear cookies in the browser (more on that in a bit).

Next, I want to set the class of the selector to the class that will make that selector active. In other words, I want to bold out the selector “EN” or “FR” so that you know it is the active language for the site.

Below is my jQuery snippet in my Main.js file:

/*======================================================== */
/* Switch Language Functionality - Start */
/*======================================================== */
$(function () {
    var currentUrl = window.location.href.toLowerCase();
 
    if (currentUrl.indexOf("en/") > -1 ||
        currentUrl.indexOf("sc_lang=en") > -1) {
        $('a#langSelectEn').addClass("Active");
        $('a#langSelectFr').removeClass("Active");
    }
 
    if (currentUrl.indexOf("fr-ca/") > -1 ||
        currentUrl.indexOf("sc_lang=fr-ca") > -1) {
        $('a#langSelectFr').addClass("Active");
        $('a#langSelectEn').removeClass("Active");
    }
 
    $('a#langSelectEn').on('click', function (e) {
 
        if (currentUrl.indexOf("en/") > -1 ||
            currentUrl.indexOf("sc_lang=en") > -1) {
            currentUrl = currentUrl.replace("en/", "").replace("#", "").replace("?sc_lang=en", "");
        }
        else if (currentUrl.indexOf("fr-ca/") > -1 ||
            currentUrl.indexOf("sc_lang=fr-ca") > -1) {
            currentUrl = currentUrl.replace("fr-ca/", "").replace("#", "").replace("?sc_lang=fr-ca", "");
        }
 
        var switchedUrl = currentUrl + '?sc_lang=en';
        window.open(switchedUrl, '_self');
    });
 
    $('a#langSelectFr').on('click', function (e) {
 
        if (currentUrl.indexOf("en/") > -1 ||
            currentUrl.indexOf("sc_lang=en") > -1) {
            currentUrl = currentUrl.replace("en/", "").replace("#", "").replace("?sc_lang=en", "");
        }
        else if (currentUrl.indexOf("fr-ca/") > -1 ||
            currentUrl.indexOf("sc_lang=fr-ca") > -1) {
            currentUrl = currentUrl.replace("fr-ca/", "").replace("#", "").replace("?sc_lang=fr-ca", "");
        }
 
        var switchedUrl = currentUrl + '?sc_lang=fr-ca';
        window.open(switchedUrl, '_self');
    });
});
/*======================================================== */
/* Switch Language Fuctionality - End */
/*======================================================== */

You will see that in this post, I am mostly using the URL to get/set what I need for the language selector. One other thing I should mention to you is for this example, you will want to have “languageEmbedding” turned on to always. This will give you the “languageIdentifier/” just after your domain name in the URL throughout your site. In this example, it is “en/” or “fr-ca/” as you will see in the JavaScript code above where I am looking that languageEmbedding in the URL.

LinkManager settings that are transformed to Sitecore.config:

<linkManager defaultProvider="sitecore">
    <providers>
      <clear />
      <add name="sitecore" type="Sitecore.Links.LinkProvider, Sitecore.Kernel"
            addAspxExtension="false"
            alwaysIncludeServerUrl="false"
            encodeNames="true"
            languageEmbedding="always"
            languageLocation="filePath"
            lowercaseUrls="true"
            shortenUrls="true"
            useDisplayName="false"
            xdt:Transform="Replace"
            xdt:Locator="Match(name)"/>
    </providers>
  </linkManager>

To set the language for the site, for example, English, you just need to add “en/” after the top-level domain OR add ?sc_lang=en to the end of the URL. Once that is done, the site context is changed for in your browser even if you close it and come back to the site later, it will be in that language. Why and how? Cookies…take a look in the cookies for your browser and you will see that you now have a “fr-ca” cookie after selecting the FR language selector:

Language Cookie in Firefox

So really all I am doing is just checking for certain strings in the URL and replacing them and then modifying the URL to go to the language that I want using “sc_lang=[LanguageOfChoice]”. Simple and easy!

This code can be used as a baseline to extend if needed of course. My goal here was to give you a good head start depending on your language selection needs and requirements. Happy coding!