Help visitors quickly switch to the website in their language

The Composite.Navigation.LanguageSwitcher package displays a menu that allows visitors to switch between pages in different languages on localized websites.

You can configure the menu to show links to:

  • the home pages of all localized websites
  • the current pages in a different language if translated
  • or smart combination of the first two: the current page if translated; otherwise, the home page.

Package Variants

The Composite.Navigation.LanguageSwitcher package comes in two variants based on the technology (Razor or XSLT) used for its implementation:

  • Composite.Navigation.LanguageSwitcher.Razor
  • Composite.Navigation.LanguageSwitcher.Xslt

The functionality of both variants is the same.

Note: The Razor-based package requires the Contribution.CompositeC1Contrib.RazorFunctions package be installed on your website.

How to implement

  1. From the Content perspective, insert the Composite.Navigation.LanguageSwitcher function ( Insert > Function) on a page, or from the Layout perspective, add the following code to a template: 
     
<f:function name="Composite.Navigation.LanguageSwitcher" xmlns:f="http://www.composite.net/ns/function/1.0"> 
  <f:param name="Mode" value="HomePages" /> 
  <f:param name="ShowCurrent" value="True" /> 
  <f:param name="NavigationId" value="LanguageSwitcher" /> 
  <f:param name="Description" value="Switch to: " /> 
  <f:param name="Format" value="TwoLetterISOLanguageName" /> 
  <f:param name="IncludeQuery" value="True" /> 
</f:function>
  2. In the Modeparameter, select one of the menu modes for switching languages:
    • HomePages: always displays links to the home pages of all localized websites
    • TranslatedPages: only displays links to the current pages in other languages if translated; otherwise, shows no links
    • TranslatedOrHomePages: displays links to the current pages in other languages if translated; otherwise, shows links to the home pages.
  3. Set up other optional parameters:
    • Show Current: Shows the link to the page in the currently selected language ("True", by default). Uncheck the option if you want otherwise.
    • NavigationId: The Id attribute of the <div> element used in the menu's HTML. By this ID, the menu can be accessed or referred to from style sheets and JavaScripts ("LanguageSwitcher", by default). For example,  if NavigationId = "LanguageSwitcher", the element will look like  <div id="LanguageSwitcher"> … </div>)
    • Description: The text will be displayed next to the menu links (blank, by default)
    • IncludeQuery: When 'True', the query parameters (e.g. "MyPage.aspx?Id=a3522d3c-45be-42df-b31f-ea508bc137ba") in the URL will be kept when switched to another language; otherwise ('False'), the query parameters will not be included in the URL (e.g. "MyPage.aspx"). 'True' by default.
  4. Optionally, you can change the way the language switching menu is presented by setting the Format parameter to one of the following values:
    • DisplayName: Gets the culture name in the format "<languagefull>" in the language of the localized version of .NET Framework.
    • EnglishName: Gets the culture name in the format "<languagefull>" in English.
    • Name: Gets the culture name in the format "<languagecode2>- <country/regioncode2>".
    • NativeName: Gets the culture name, consisting of the language.
    • ThreeLetterISOLanguageName: Gets the ISO 639-2 three-letter code for the language
    • ThreeLetterWindowsLanguageName: Gets the three-letter code for the language as defined in the WindowsPI.
    • TwoLetterISOLanguageName: Gets the ISO 639-1 two-letter code for the language of the current CultureInfo.
    • Image: Gets images representing the languages (flags)
    • Empty: Empty

The default value is "TwoLetterISOLanguageName".

Setting the Format parameter to "Empty" makes sense if you want to use your own means to present the languages, for example, your own images. This will require editing the stylesheet and using your own NavigationId.

For illustration, set the Format value to "Empty" and NavigationId to "LanguageSwitcherImage".

 
<f:function name="Composite.Navigation.LanguageSwitcher" xmlns:f="http://www.composite.net/ns/function/1.0"> 
  <f:param name="Mode" value="HomePages" /> 
  <f:param name="NavigationId" value="LanguageSwitcherImage" /> 
  <f:param name="Format" value="Empty" /> 
</f:function>

This will produce the graphical menu (like the one made with the Format parameter set to "Image").

Customization

You can customize the layout by editing the style sheet (/Frontend/Composite/Navigation/LanguageSwitcher/Styles.css).

Requirements

Composite C1 version 2.0 SP1 or later

SHARE