Nibble

Archive for the 'javascript' Category


Adding a language selector to your multilingual umbraco site 15

Create mutlilingual sites with umbraco, there are several approaches in doing this, the one I use the most is to have multiple ‘top level’ nodes (I’ll make a screencast of this in a future post). So for each language you would have a top level node.

The content tree would look like this:

languageselectorcontent

I would like to add a language selector on the site, a dropdown with all languages that will redirect to the selected langauge homepage. How to do this ?

languageselector

I’ll first add a new property to the top level node document type. This will store the text that is displayed in the dropdown.

languageselectordocumenttype

Next step is to create a new xslt file (with macro).

<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE xsl:Stylesheet [ &lt;!ENTITY nbsp “&#x00A0;”> ]>
<xsl:stylesheet 
    version=”1.0″ 
    xmlns:xsl=”http://www.w3.org/1999/XSL/Transform” 
    xmlns:msxml=”urn:schemas-microsoft-com:xslt”
    xmlns:umbraco.library=”urn:umbraco.library”
    exclude-result-prefixes=”msxml umbraco.library”>
 
 
<xsl:output method=”xml” omit-xml-declaration=”yes”/>
 
<xsl:param name=”currentPage”/>
 
 
            
 
<xsl:template match=”/”>
<form>
<select name=”langselection” onchange=”loadPage(this.form.elements[0])” target=”_parent._top” >
<option selected=”selected”>– Please select –</option>
 
  <xsl:for-each select=”$currentPage/ancestor::root/node”>
         
         <option value=”{umbraco.library:NiceUrl(@id)}”><xsl:value-of select=”data [@alias = ‘language’]”/></option>      
    
  </xsl:for-each>
</select>
</form>
 
</xsl:template>
 
</xsl:stylesheet>

This will output the html code for the dropdown. The most important part is the for-each loop, wich will loop all top level nodes, add the url of the top level node as a value of the dropdown option and add the content of the language property as the displayed text of the drop down option.

Now you can add the macro to your template, but you’ll also need to add a little javascript.

<script language=“JavaScript”>
 
function loadPage(list) {
 
  location.href=list.options[list.selectedIndex].value
 
}
 
</script>