Encapsulates the setup required for customizing and adding additional entries to the localization dictionary
npm install @coveops/localization-managerEncapsulates 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.
1. @coveops/cli version 0.10.0 or later must be installed to support localization with this component.
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.
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. |
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
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.npm run build
3. Build the code base: npm run serve`
4. Serve the sandbox for live development