Friday, October 28, 2011

Multi-site / Multi-languages with Sitecore

My current client has a number of domains for various regions and some regions will support multiple languages, including Right-to-Left languages such as Arabic. So let's highlight what needs to be done in Sitecore and our code to allow for this requirement.

Web.Config

Screen1

Above you can see that we have 3 sites defined. The .com site has en as the default language, the .co.uk has en-GB and the .ae has ar-EG (arabic egyption). The next section goes over language fallback, but for now notice that .co.uk and .ae have a fallback to english.

Langugage Fallback

Alex Shyba who works for Sitecore has contributed a nice Shared Source module called Partial Language Fallback that allows Sitecore to fallback to a different language for an item or field if there is not a value available within the current language context. Alex goes into more detail about this module on his blog located here: http://sitecoreblog.alexshyba.com/2011/08/partial-language-fallback-module-update.html

Multiple Languages

The client's requirement is that the .ae site should default to arabic but allow the user to choose english if they prefer. We already set the default language to arabic in our web.config above, so we have that covered but now we need the ability to set a site's supported languages.

Screen2
Above I have updated the Website Root template, which is the root template of each site item in my solution. We have added a Site_Languages treelist field that has the System/Languages as the source. This allows for the content authors to select which languages they want supported for each site.

Screen3

Changing Languages

Now that the backend is setup, we can create a control that can be used in the site's footer to appear when 2 or more languages for the site is available and allow the user to select a different language.

LanguageContext.ascx

Screen4

Our frontend code above is simply building out a dropdown list that is bound to the languages and it is adding a "selected" tag to the language that matches the current context.

LanguageContext.ascx.cs

Screen5
The ManageLanguages function is in charge of binding the repeater to the available languages and it only shows the repeater if there are 2 or more languages available. So in our .com and .co.uk sites this control will not be displayed but it will show up on the .ae site.

If the request is a PostBack, then it will set the language context for the user and then redirect to the original url to ensure the page and any controls loaded before this point are aware of the context change.

site.js

Screen6
Then the last piece is simply to wire up the select box to submit the form on value change.

Right-to-Left Support

Still in proof of concept mode on this one but what I have so far to support right to left languages is to check to see if the current language context is right to left and if it is then swap out the style sheet with a different one. I will post an update if this approach changes after our UI developers take a look at it.

Screen7

No comments:

Post a Comment