Localization

Localization is used where there are specific components or data items to customize for particular locations. You are free to define locales with any name and they don't have to align with language codes.

As an example, a project could have EMEA and Americas configured as locales. It would then be possible to associate one component with EMEA and another with Americas using the localization component inside of a slot. When the page is rendered, only the component that matches the locale would be shown.

Create a locale#

Before you can make use of localization, you must define some locales:

1. In Uniform, open your project.

2. Navigate to the Settings tab.

3. In the left menu click Canvas Settings.

4. Click + New Locale.

   

5. Enter a locale name and click Add.

   About this step

   Uniform doesn't care what name you give to the locale. However, for clarity (and consistency with other systems), you might want to use a combination of ISO-3166 country code and ISO-639 language code.

Enable localization on slot#

Since components are localized, and components are added to slots, localization is enabled slots.

1. In Uniform, edit a component with the slot that you want to add localized components to.

2. Navigate to the slot.

3. In the section Allowed Components, select the component Localization.

   

   This configuration allows Event components to be localized in the slot.

   About this step

   You must have other components selected on the slot. Those will be the component types that can be localized in this slot.

4. Click OK.

5. Save the component.

Localize components#

1. In Uniform, open a composition that has a component you have enabled localization for.

2. Click the component.

3. Click the button Localize This.

   About this step

   A new component Localization is added to the slot, and the component is moved into that component. In this way localization works the same as personalization and testing.

4. Select the original component.

5. A new parameter Locale is available on the component. This parameter is a dropdown of the locales you defined in your project. Select the locale for the component.

   

   About this step

   The locale assigned to the component will appear in the box that represents the component in the composition.

6. Save the composition.

7. Add more components under the component Localization and assign a locale to each component you add. Each component will represent the locale you assigned.

   

   About this step

   For more information about the format Uniform uses to store localized components, see the localization reference.

Activate front-end#

You have localization configured in your composition. Your composition contains components that represent multiple locales. When the composition is rendered, you only want to use the components that match the locale that's appropriate for the visitor. This is enabled in code.

1. In a text editor, open the file where you retrieve the composition definition from Uniform.

   About this step

   You are looking for the code calls the asynchronous function getComposition. The code below assumes the object returned is set in a variable composition.

2. Add the following import statement:

   CopyCopied!Wrap

3. Determine your visitor's locale.

   About this step

   How you do this depends on your application. You can do this implicitly (for example, set a cookie based on the visitor's location) or explicitly (such as giving the visitor a list of supported locales and let them select their preference).

4. After the code that retrieves the composition from Uniform, add the following code:

   CopyCopied!Wrap

   About this step

   Just like how enhancers work, localization changes the data available in the composition. It removes all of the components that don't match the locale specified in the localize() function call.

5. If you want to localize with a fallback locale, you can implement your preferred fallback logic in the localize() function call:

   CopyCopied!Wrap