Computer Magic Logo
Language selector

Sunday, August 9, 2015

Published by Aristotelis Pitaridis

Let’s finish the language selector in order to be able to properly change the current language of the page. We open the page template in order to see it using the Template Editor.

The code block at the top of the template contains only one line which sets the Layout to be equal to null. Let’s replace this code block with the following commands.

@{
    Layout = null;
	
    string CurrentUrl = CurrentPage.Url;
    string EnglishUrl = "/en" + CurrentUrl.Substring(3);
    string GreekUrl = "/gr" + CurrentUrl.Substring(3);
}

We declared a variable with name CurrentUrl and we stored there the URL of the current page. After that we declared two more variables one for the English and one for the Greek URLs. In order to get these URLs we replaced the three first characters with the equivalent of each language so that the English URL will start with the characters "/en" and the Greek URL will start with the characters "/gr". Using this method we can have localized pages even for subpages of the root pages.

The next step is to change the HTML for the language selector. The current HTML is the following.

<nav id="Lanugages">
    <a href="#">Greek</a>
    <a href="#">English</a>
</nav>

We replace the # character in each of the links with the equivalent links that we generated.

<nav id="Lanugages">
    <a href="@GreekUrl">Greek</a>
    <a href="@EnglishUrl">English</a>
</nav>

The entire code of the Template is the following.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = null;

    string CurrentUrl = CurrentPage.Url;
    string EnglishUrl = "/en" + CurrentUrl.Substring(3);
    string GreekUrl = "/gr" + CurrentUrl.Substring(3);
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>@Umbraco.Field("title")</title>
    <meta name="description" content="@Umbraco.Field("description")">
    <meta name="keywords" content="@Umbraco.Field("keywords")">
	<link href="/css/Stylesheet.css" rel="stylesheet" />
</head>
<body>
    <div id="Container">
        <div>
            <nav id="Menu">
                <a href="/en/home">Home</a>
                <a href="/en/company">Company</a>
            </nav>
            <nav id="Lanugages">
                <a href="@GreekUrl">Greek</a>
                <a href="@EnglishUrl">English</a>
            </nav>
        </div>
        <div id="Body">
            @Umbraco.Field("pageText")
        </div>
        <div id="Footer">
            Sample multilanguage site
        </div>
    </div>
</body>
</html>

Now we can use the language selector to change language but the menu does not work properly because even if we change to the Greek using the language selector, the menu links still lead to the English pages.

We can see that the main text of each page appears in Greek or English depending on the language we selected. This does not happen with the static text of the footer or the words in menu but we will fix them soon.