Change the language of your search interface in Lightning

This is for:

Developer System Administrator

Usually, when changing the language of a search interface, you only need to reference its culture file, which automatically translates the strings to the appropriate language (see Change the language of your search interface).

However, this method isn’t compliant with the Lightning framework. To solve this issue, you need to upload your own dictionary to translate the English strings.

Step 1: Create your static resource

The first thing you need to do is to create a static resource containing all the code to translate the strings of your search interface.

  1. Create a new JavaScript file. This should be done locally.

    The reason you’re doing this locally instead of through the Developer Console is because the Developer Console doesn’t allow you to save code with diacritics.

  2. In your JavaScript file, enter the following code:

     window.coveoCustomScripts['default'] = function () {

   Coveo.$('.CoveoSearchInterface').on('beforeInitialization', function (e, args) {
     var dict = {};

     String.toLocaleString({
       "en": dict
     });
   });
 }

  3. Get the dictionary for the language you want to translate your interface to, and paste it in your JavaScript file.

    1. In Salesforce, in Setup, search for and select Static Resources.

    2. On the Static Resources page, click JsSearch, which is installed alongside Coveo for Salesforce.

    3. Select View file to download a .zip of the JsSearch resource.

    4. Open the .zip file, and open the \js\cultures\ folder.

    5. Open the file of the language you want to change your search interface to. To know which key corresponds to which language, see Change the language of your search interface.

    6. In the <yourlanguage>.js file, copy the dict object.

    7. In the JavaScript file you’ve created, replace the var dict = {} line with the dict object you copied.

    8. Save your JavaScript file.

  4. Consider adding other translations to your dictionary. While the default dictionary takes care of translating most strings from the interface, it doesn’t translate the values from your facets. To learn how to do that, see Normalize facet value captions.

  5. In Salesforce, upload your JavaScript file as a static resource (see Defining Static Resources). Keep note of the name you give to your static resource, as you’ll need it later.

Step 2: Load your static resource with your component

Now that you have your static resource, you only need to reference it in your Lightning component.

  1. Ensure that you’ve created a custom Lightning component that integrates the Coveo components (see Integrating the Coveo components in a custom Lightning component).

  2. Using the Salesforce Developer Console, open the .cmp file of your custom Lightning component (see Open the Developer Console).

  3. In the CoveoV2 element, add the customScripts option to load your static resource (see Add JavaScript to the Coveo for Salesforce Lightning components with custom code).

     <CoveoV2:CommunitySearch customScripts="{!$Resource.<YOUR_RESOURCE_NAME>}" />

    Where you replace <YOUR_RESOURCE_NAME> by the name of the static resource you created at step 1.

  4. Save your component.

The interface should now be translated to your specified language.

You want to translate the search interface in your Lightning component to French.

In Salesforce, you upload a static resource called FrenchTranslation, which contains the following code:

 window.coveoCustomScripts['default'] = function () {

  Coveo.$('.CoveoSearchInterface').on('beforeInitialization', function (e, args) {
    var dict = {
      "Unknown": "Inconnu",
      "And": "ET",
      "Authenticating": "Authentification à {0} en cours...",
      // ...
      // For the sake of this example, the whole dictionary is shortened.
      // ...
      "filetype_youtubevideo": "Vidéos YouTube",
      "filetype_youtubeplaylistitem": "Élément de liste de lecture",
    };

    String.toLocaleString({
      "en": dict
    });
  });
}

The code for your custom Lightning component looks like this:

<aura:component implements='forceCommunity:availableForAllPageTypes'>
  <aura:attribute name="name" type="String" default="communityCoveo" access="global" />
  <aura:attribute name="debug" type="Boolean" default="false" access="global" />
  <aura:attribute name="searchHub" type="String" default="" access="global" />

  <CoveoV2:CommunitySearch name="{!v.name}"
                  debug="{!v.debug}"
                  searchHub="{!v.searchHub}"
                  customScripts="{!$Resource.FrenchTranslation}"/>
</aura:component>