Adding Translated Text to edX Help Center Templates

In Zendesk Guide, there are several ways to add translated text strings to help center templates so that they'll appear in the edX Help Center.

  1. You can use the many Zendesk pre-translated strings by inserting helpers into the page templates.
  2. You can create dynamic content in Zendesk Support. For a list of the manually translated text strings that are managed via dynamic content placeholders, see Dynamic Content UI Text Strings.
  3. You can modify the .js file to programmatically update text from English to Spanish.

To add translated text to the edX Help Center templates

Via Dynamic Content:

  1. In Zendesk Support > Admin > MANAGE > Dynamic Content, select add item.
  2. In Dynamic content item title, enter a title for the item. Use text that is similar to the text you're adding to the help template or macro. 
  3. Select English as the default language from the dropdown. Note that English is the default for all dynamic content.
  4. In Content, enter the exact text as you want it to appear in the page template. 
  5. Select Create
  6. Select add variant. The New variant page appears.
  7. Fill in the following fields: 
    1. Language: Select the variant language (Latin American Spanish).
    2. Status: Set as Active.
    3. Default: Leave this checkbox unchecked.
    4. Content: Enter the translated content associated with the English dynamic content.
  8. Select Create. A success message appears. 
  9. Under Dynamic content is a Placeholder helper that looks like this: 
    1. Placeholder: {{dc.your_content_here}}
  10. Copy this placeholder. This is the curlybar language that you will need to add to the help center page template.
  11. Navigate from Zendesk Support back to Zendesk Guide. 
  12. Open the template that you want to add the dynamic content curlybar text into. In this example, I've opened the home_page.hbs template, which is where the Hero text dc placeholder resides. 
  13. Locate the div or section class where you want the text to appear and add the dynamic content placeholder to the page. 
  14. Modify the placeholder to the following: {{dc 'your_content_here'}}
  15. Note: If you do not modify the dc code as in step 15 above, your code will not work!
  16. Select Publish to save and publish your code.

Via a Template Helper:

Zendesk provides pre-translated text strings in the form of curlybar code "helpers"; you can insert the helpers directly into help center templates and set code to trigger respective translations to appear, depending upon which locale help center you're in. 

You can learn more about these helpers in the Zendesk Developers help center Helpers topic. A few examples of this in the edX Help Center article pages, found on the article_page.hbs template, are:

  • related content
  • recently viewed content 
  • breadcrumbs
  • vote

Via the .js file

Here is an example of one place the edX Help Center uses code to control English/Spanish text.

LocationHC templateJS code
Search box text in the Hero space

home_page.hbs

Curlybar code:

{{search submit=true instant=true class='search search-full homepage-search' placeholder='Enter your search terms here'}}

script.js

Code:

// search placeholder change text //
var currentLanguage = $('html').attr('lang').toLowerCase();
if(currentLanguage === "es-419") {
$('.search #query').attr('placeholder','Introduzca los términos de búsqueda aquí'
);}




Related links:

add several ZD Support links. Link to the Support Google site.