Percipient Studios logo

Quick and easy multi-lingual search pages for Umbraco sites

17 November 2010
Filed under: umbraco, xsltsearch - by Douglas Robar

Searching within multi-lingual websites is simple with XSLTsearch 3. Using Umbraco's convenient dictionary items and language/culture facility you'll have multi-site, multi-language searching in minutes.

If you've never used the Umbraco dictionary capability before, here's a primer and "how to" guide to quickly set up XSLTsearch in your multi-lingual website. We'll cover the basics briefly and focus on how to use XSLTsearch in an Umbraco installation with multiple language sites.

You can find a more complete discussion of how to set up multi-lingual websites in the umbraco.tv episodes about Running Multiple Sites.

 

Install XSLTsearch

Install XSLTsearch from the Umbraco Package Repository, or by first downloading it from http://our.umbraco.org/website-utilities/xsltsearch.

install local package

 

Umbraco configuration steps

Add languages for your Umbraco installation

Once XSLTsearch is installed, go to the Settings section of the Umbraco back office administration interface, and expand the Languages area. Here you'll see all the languages that your sites will be able to use.

If your sites will need a language that isn't yet listed, right-click on the Languages item and create a new language.

Create additional languages

Let's suppose we want to add German (as spoken in Germany) as a language for one of our sites. Select "German (Germany)" from the exhaustive list of languages and cultures:

Select your chosen language from the dropdown list 

We now have two languages available for use in our site, English (United States) and German (Germany).

Umbraco shows the languages you have configured

You can add as many languages for as many sites in Umbraco as you need following this same procedure.

Create multiple sites in Umbraco

It is best-practice to nest all your site's content beneath a homepage. The wisdom of this practice is revealed when you want to add another site to your Umbraco installation, as we will do here.

For instance, you might have your public website, intranet, and blog all in one Umbraco installation. Or perhaps you need to present one site in a lot of different languages. Or even a combination of both.

I'm going to assume you've got two sites set up similarly to that shown below, two sites with one for each language. For convenience, I have named each homepage with the two-letter culture code (EN and DE).

Content structure showing two sites

Assign hostname, language, culture to each site

Now that you have two sites, you need to tell Umbraco which site is associated with each language. This is a simple point-n-click operation.

Right-click the homepage for one of the sites and select the 'Manage hostnames' menu. In the window that appears, assign a domain for this site and select the appropriate language.

Manage hostnames to assign domain and language for a site

Repeat for all sites.

You can find lots of forum posts about using separate domains or a single domain and folders to distinguish one site from another via the URL. Depending on your preferred URL you'll end up changing either the  umbracoHideTopLevelNodeFromPath (in web.config file) or useDomainPrefixes (in /config/umbracoSettings.config). The combination of these settings will effect the URL for the pages in each site, but is beyond the scope of this article.

 

And now, back to XSLTsearch

If using XSLTsearch 3.0, you should modify it as noted here. This will be the default behavior for future versions of XSLTsearch. This step is only necessary for v3.0.

Create a search page for each site

Now create a search page for each site. Right-click on the home page of each site and select the Create menu. Name the page and select the XSLTsearch document type.

Your content tree will now look similar to this, with a search page in each site.

XSLTsearch search pages in multiple Umbraco sites

Translate the XSLTsearch dictionary keys for each language

At this point, your search will work properly in all sites but all the static text on the search page will be in English, which isn't what we want.

The last step is to translate the XSLTsearch dictionary items into the languages of your site.

You may notice that I don't speak German. I've used Microsoft Translate and Warren Buckley's handy Dictionary Translator for Umbraco. I hope you can excuse any mistakes :)

In the Settings section of Umbraco's back office, expand the Dictionary area. You will see a folder of terms used by XSLTsearch. Select each dictionary item in turn, entering the appropriate translation for each language of your site. If you leave any blank the default English term will be used in its place so at least your site will have text for everything, albeit in English..

XSLTsearch dictionary keys

 

Go forth and search!

That's all there is to it. All the setup work is now complete and you're ready to enjoy localized search pages across all the languages of your site. If you later add another language site all you'll need to do is create an XSLTsearch page in the new site and translate the dictionary keys into the new site's language. It couldn't be easier.

Here's what the finished result looks like, with example search pages in both English and German:

An English search page

Search results in English

A German search page 

Search results in German

0 comments for “Quick and easy multi-lingual search pages for Umbraco sites”

 
powered by <XSLTsearch>

Categories

Follow Us

RSS Feed
Follow us on Twitter
Follow us on Flickr