dotCMS allows easy and flexible management of multilingual content versions and multiple websites, but a completely multi-lingual site will need to handle multi-lingual navigation menus, buttons, etc, that may not exist as content.  The use of global language variables helps to solve this problem and allows multiple websites you manage to take advantage of the same variables for re-use across your sites.

Navigate to the CMS Admin -> Language Variables on the dotCMS backend to view/edit/create language variables.

To retrieve a value from the language dictionary, use the following reference

$text.get("keyname")

Global variables referenced using this method will be cached for more performant delivery.

http://www.dotcms.com/docs/latest/javadocs/com/dotmarketing/viewtools/LanguageWebAPI.html

Please note that the use of globalvars or glossary viewtools has been deprecated and may be removed in a future release.

Placing a "Language Select Box" on a dotCMS webpage

The code example below shows how to allow the front end user to set a language of choice on a dotCMS header container.  Once a front-end user has set the language of choice, both the global variables and the content, whether static or dynamically driven, will reflect the proper language version chosen.

Please keep in mind that the language version of the global variables and the content must exist for the language choices being offered to the front-end user. If there is no content in the language version chosen, webpages should be built to display a default language version, but the dotCMS does not do any kind of automated translation of content.

The following example code can be used in a dotCMS header container to provide a language select box for front-end users.  Use this link to download the example code.

<!-- START Header -->
<div class="siteTools ui-helper-reset ui-state-default ui-corner-bottom">
#if(!$EDIT_MODE)
  <div style="float:left;padding:3px;"><a href="/edit">Edit Page</a></div>
#end
<form action="/home/search-results.dot" method="get">
  <ul>
  <li>
    #if(!$user)
    <a id="opener" href="#">Login</a> 
    #else
    <a href="/dotCMS/logout">Not: $user.fullName?</a>
    #end
    </li>
    
<!--  Language Select Box code begins here -->

  #set ($languageId = $request.getSession().getAttribute('com.dotmarketing.htmlpage.language'))
  #if (!$UtilMethods.isSet($languageId))
    #set ($language = $languagewebapi.getDefaultLanguage())
    #set ($languageId = $language.id)
  #end

  ##The languageId is set to: $languageId
  
  #set($pathToPage = ${VTLSERVLET_URI})
  
  This is the path: $pathToPage<br/>
  <script language="JavaScript">  
    function openDir( form ) { 
      var newIndex = form.fieldname.selectedIndex; 
      if ( newIndex == 0 ) { 
        alert( "Please select a language" ); 
      } else { 
        cururl = form.fieldname.options[ newIndex ].value; 
        window.location.assign( cururl ); 
      } 
    } 
  </script> 
  <form name="form" method="post" action="#" style="display:inline; margin:0; padding:0;"> 
    <select name="fieldname" size="1" onChange="openDir( this.form )" style="display:inline; margin:0; padding:0;">
      <option>Select a Language:</option> 
      <option value=http://demo.dotcms.com:8080${pathToPage}?com.dotmarketing.htmlpage.language=1>English</option>
      <option value=http://demo.dotcms.com:8080${pathToPage}?com.dotmarketing.htmlpage.language=2>Spanish</option>
      <option value=http://demo.dotcms.com:8080${pathToPage}?com.dotmarketing.htmlpage.language=3>French</option>
    </select> 
  </form>
  
 <!--  Language Select Box code ends here -->   
 
    <li><a href="/home/contact-us.dot">Contact Us</a></li>
    <li><a href="/home/site-map.dot">Site Map</a></li>
    
    <li><input type="text" value="Search" name="dotQ" class="text ui-widget-content ui-corner-all" onfocus="this.value='';" /></li>
  </ul>
  </form>
  <div class="clear"></div>
</div>
<div class="clear"></div>


<div class="yui-gf ui-corner-top">
  <div class="yui-u first">
    <a href="/"><div class="logoWrapper"></div></a>
    <h1 class="hidden">CompanyX</h1>
  </div>

  <!-- START Main Nav -->
  <div class="yui-u">
    <div id="nav">
      #set($openAllLevels=true)
      #navigation(1,1)
      #set($openAllLevels=false)
    </div>
  </div>
  <!-- END Main Nav -->
</div>
<!-- END Header -->