Multiple Languages/Locales

Aurora supports multiple languages, which can be managed and fully customised from the Aurora Back-end.

🚧

Multi-Lingual Support in Aurora must be carefully configured for you by Aurora Commerce in advance of its use on your Website. If you are not sure if the required set-up has already been performed or would like more information, please contact your Aurora Commerce Account Manager for help.

Editing Content in different languages

Any content in Aurora that can be translated will allow you to do so by switching to an alternate language using the "Switch Language" drop down, as shown in Figure 1. When yo do this, the page will be re-loaded with any content that is translatable loaded ready for you to edit. It is important to note that only fields that are in fact considered 'translatable' are controlled in this way. If you change other fields, such as the price of a Shipping Option, this will of course apply to all languages and not just the one being edited. Only the translatable Text is managed per language.

Figure 1: Language Selector

Language Content Defaults

If no translation is provided for a particular language, then it will default to the base (default) language. In most cases this is English and so all languages show English be default until an alternate translation is provided. Most interfaces in Aurora presently load all fields regardless of the language you are editing, however this is presently being changed so that only the fields that can be translated are shown when viewing a page in anything other then the default language.

When viewing a page in a non-default or 'translatable' language, the default value (taken from the default language's value) will be shown for reference.

1898

Figure 2a: Default Language Value Hidden

1946

Figure 2b: Default Language Value Shown

The Default Value icon can also be clicked to reveal a few 'Short-cut' options intended to make the editing process a little simpler, as also shown in Figure 2b. If you select the 'copy' option, then the text shown as the default will be copied into your field for you to use and if you click the 'clear' button, then the field will be cleared all together.

Using the Default

If you leave a translatable field completely blank, Aurora will still use this value for the language you are setting, meaning if you leave the Meta Title blank on the 'French' translation, then it will be blank on the French version of the site. This is only not the case if you clear ALL translatable fields on a page. If no translation data is provided at all, then Aurora will assume that no translation is available for that language at all and so default all of the fields to the default language (Normally English).

🚧

Please note, that if even just one of the translatable fields has text in it, then Aurora will consider this to have been translated and so enforce that the other blank fields are in fact kept blank rather the defaulting to the default language.

Working with Multiple Languages in Front-end Templates

Links & URLs

Switching Languages

Please find below a code sample that can be used in any template to output the links required for presenting available site languages to the customer.

{foreach from=$languages item="language"}  
<a href="{if !$language.is\_default}/{$language.iso}{/if}{$smarty.server.REQUEST\_URI|replace:"/$language\_iso/":'/'}"{if $language.id h1. $language\_id}  
class="selected"{/if}>{$language.language\_name}</a>  
{/foreach}

Other Links

If you need to provide a URL, for display or use as a link HREF, you can use the 'getUrlPath' method to add the locale elements (along with any other contextual info) of the URL automatically. This means that the following link '/contact-us' could be inserted into a template as follows:

<a href="{getUrlPath url="/contact-us"}">Contact Us</a>

And Aurora would produce the locale-specific URL automatically for you depending on the locale being used at the time, e.g.:

<!-- While on the French site -->
<a href="/fr-fr/contact-us">Contact Us</a>

<!-- While on the English site (assuming this is the default locale) -->
<a href="/contact-us">Contact Us</a>

In addition to this, you can specify which locale you would like the URL to be generated for, in the instance that you specifically want to direct the customer to a particular locale.

<a href="{getUrlPath url="/contact-us" locale="en-gb"}">View this page in English</a>

Language-specific elements

There are three approaches to making a template appear distinct for a language beyond its test content:

  • Only the images need to change, so simply link to language-specific images in the image 'src' properties
  • Only the styles need to change, so simply link to language-specific images in the image 'src' properties
  • Images and HTML structure may change, so a language-specific index template is needed

Please Note: You should try to avoid using language-specific templates wherever possible and when creating language-specific CSS, please only put the CSS that needs to be changed in the custom files. This is to avoid the need to manage multiple files when simple changes are required. For example, if the homepage needs to be updated, doing so for each language individually will take a lot longer than simply changing one global file. So if your changes can be made in CSS alone, then consider doing this to avoid creating more templates to manage.

Images

If you require language-specific images, simply create a language dir for the language in question and place your image in it. This directory might be here for example:

/templates/example.com/fr-fr/_images/

Then use the 'getFilePath' method in your templates where your image URI is needed.

<img src="{getFilePath file="_images/logos/logo.png"}" />

Aurora will then automatically check the template directories for images specific to the language currently being used and default to the main (or root) image if there were none found, e.g.:

<!-- While on the French site assuming you placed an image in the 'fr-fr' directory -->
<img src="/templates/your_template_dir/fr-fr/_images/logos/logo.png" />

<!-- While on the German site assuming you have not placed an image in the 'de-de' directory -->
<img src="/templates/your_template_dir/_images/logos/logo.png" />

<!-- While on the English site assuming you placed an image in the 'en-gb' directory -->
<img src="/templates/your_template_dir/en-gb/_images/logos/logo.png" />

👍

The "your_template_dir" value in the above examples will depend on your domain configuration.

For more detail on how Aurora makes use of your template directories, see the Multi-Domain Templates(Themes/Theming) support article.

For more detail on how Aurora makes use of your template directories, see the [Multi-Domain Templates

Stylesheets/CSS

If you require language specific CSS, simply create a language dir for the language in question and place your CSS files in it. This directory might be here for example:

/templates/example.com/fr-fr/_css/

Then use the methods described in the Including, Minifying and compressing Javascript and CSS guide to include the files, which will then account for the presence of these files as necessary.

Templates

If you require language or locale specific templates, simply create a language/locale dir and place your template files in it. This directory might be here for example:

/templates/example.com/fr-fr/

Any templates placed in here will override the based templates used if they are present. So if you created an 'index.tpl.html' file in the root of the above directory, then this template would be used in place of the '/templates/example.com/index.tpl.html' file for the '/fr-fr/' language.Retrieving Translated Texth1. Templates that have been converted for use within the multi-lingual system do not feature plain English outside of HTML, JavaScript and other coding languages used to present the data. Instead, where usually there would be language specific text, the following tag is used.

{site_text page="The Parent Section or Page Name" part="The Sub-part or Text Block Name"}

{site_text page="Homepage" part="Text: Introduction"}

The example above would load the Introduction text block from the Homepage section. Using this method you can locate or add new sections of text within Aurora's templates. Editing Translated Texth1. This can be done in the 'Content' -> 'Site Text' section of the site. Simply locate the section you're text belongs to, described in the 'site_text' tag by the 'page' variable, e.g. 'Homepage' and then the list of text blocks currently available will appear. In this list will be the text block, which you can then edit as necessary.

You may also add new text blocks here if you wish and they will immediately become available to you in Aurora's Template System via the use of the 'site_text' tag. It should be noted however that it is best to add the text to the back-end before adding it to the templates.