LocalizationManager

Encapsulates the setup required for customizing and adding additional entries to the localization dictionary

Disclaimer: This component was built by the community at large and is not an official Coveo JSUI Component. Use this component at your own risk.

Prerequisites

1. @coveops/cli version 0.10.0 or later must be installed to support localization with this component.

Getting Started

1. Install the component into your project.

``
npm i @coveops/localization-manager
`

2. Use the Component or extend it

Typescript:

`javascript
import * as LocalizationManager from '@coveops/localization-manager';
`

Javascript

`javascript
const LocalizationManager = require('@coveops/localization-manager');
`

3. You can also expose the component alongside other components being built in your project.

`javascript
export * as LocalizationManager from '@coveops/localization-manager'
`

4. Or for quick testing, you can add the script from unpkg

`html

`

> Disclaimer: Unpkg should be used for testing but not for production.

5. Expose the custom locale file using a script tag.

This locale should correspond to the one you used with Coveo.

`html

`

The locales must match in order for localization to work. This can be automated using backend template rendering where suited by replacing the locale with a variable as relevant.

`html

`

Adding the locales file generated by the build will expose a global LOCALES variable that can then be passed to the LocalizationManger to manage the remaining steps for you.

5. Include the component in your template as follows:

Add the following execution to your code once the page has initialized:

`html

`

If the component is being bundled amongst other components, it will be available on the Coveo object.

`html

`

Be sure to update the variables to have the relevant information.

Options

The following options can be configured:

| Option | Required | Type | Default | Notes |
| --- | --- | --- | --- | --- |
| locales | Yes | object | | An object containing all of the translations for the given locale. |
| components | No | string[] | | An array of component names to target ex: DynamicFacet |
| searchInterface | No | Element | | The search interface to target when setting up localization. By default, all search interfaces on the page will be targeted. |
| options | No | object | {} | An object with additional options to configure as detailed in the following entries |
| options.disableTargetting | No | boolean | false | Tells the localization manager to only set the global translation dictionary and not to pass the definitions as valueCaptions to targeted components. A targeted component can be specified with the components option or by specifying the target option with the create:translation command. |

Managing Translations

With this component installed, and @coveops/cli version 0.10.0 or newer, the following CLI commands can be used to add localization to your project:

1. Add locales for the languages you will support. Adding another language later on will create placeholders from your default language. By default the CLI uses en.

`bash
npx @coveops/cli create:locales en fr
`

2. Add translations for terms you want to replace.

`bash
npx @coveops/cli create:translation City --en City --fr Ville
`

3. Override translation terms for a given component or element with a queryable id.

`bash
npx @coveops/cli create:translation City --en City --fr Ville --target DynamicFacet
`

Contribute

1. Clone the project
2. Copy .env.dist to .env and update the COVEO_ORG_ID and COVEO_TOKEN fields in the .env file to use your Coveo credentials and SERVER_PORT to configure the port of the sandbox - it will use 8080 by default.
3. Build the code base: npm run build
4. Serve the sandbox for live development npm run serve`