← General Information

Translation Sites

In General

It’s generally preferred for the English site to be fully launched, before development of the non-English site begins. This is so that we can ensure the English site is fully up to the client’s standards, and then a complete copy of the English site can be made for the non-English version. This should reduce the amount of changes that need to be made to both sites at once.

For sites that don’t use the Roman alphabet

Please note that URLs on our sites cannot contain non-English characters. So for example, with site categories, you will need to build them in English and then use menu groups to set up the non-English menu. (The categories will show in English in the CMS as well.) So for example, a Spanish-language site could have translated categories and page titles within the URL, but a Japanese-language site could not (unless the client agrees to use the Romanized form of the translated title/category).

For sites that are Korean, Japanese, Chinese, or similar languages, you will need to force the CSS to not word-break. More info can be found [https://www.w3.org/TR/css-text-3line-breaking here].

Pre-Development Notes

No need to create a new repo if you already have the English site’s repo pulled down and fresh. You will just be copying the development folder!

When having Tech Ops set up the DNS, if you don’t know what the client will be calling the site already, we generally have a UAT URL like language-sitename-uat.banno.com (ex: korean-bankofhope-uat.banno.com). Trying to do something like language.sitename-uat.banno.com results in a cert error when trying to view UAT, because it’s referencing a subdomain.

Ask the PC if the client plans to use the exact same (English-language) form backends, or if they will need forms to be rebuilt with new non-English backends. Depending on how this is done you may need to make sure a Trello card has been created for new non-English forms.

The institution ID for the site is the same as the English site’s institution ID.

You can also use the same Google Maps API key.

HTML Development Notes

Simply take the development folder and copy it, renaming it to be something like “development-language”.

You will also need to edit the .gitignore file to ignore the node_modules folders on the English side. To do this, first make sure that you are NOT in any development folder in your terminal. Then run:

  • touch .gitignore
  • nano .gitignore

From there, you will see your .gitgnore file. Edit it to include the development-language/node_modules folder. Hit Control+O to save, and Control+X to exit (on a Mac.)

Edit the package.json and the -make.json file to match your information. In particular, make sure that you have a different DB name for the non-English site, otherwise it will conflict with the English site that is already there.

As stated above, when creating categories for the site, you will need to build them using English characters. Trying to build them using non-English characters will cause issues with the URL.

In your top.mustache file, there is a lang# “en” segment near the top. Change this to whatever language code you are building for. There is a full list here. Changing this line should convert CMS-generated components like the ATM locator into the specified language, assuming it has been programmed in. (Currently, Spanish, Korean, and Chinese all have this set up. You may need to speak to the CMS team to get other languages included.)

The client should have provided a list of translations of hard-coded items to the PC, for you to set up in the site. This will often include things like the page categories, titles, and form labels. If a list was not provided, you will need to ask for one. Make sure to also include disclaimer text, and take note that this will need to be changed in the -make.json (or on Postman if you’ve already pushed to UAT) as well as in your scripts.js file.

There are separate Spanish calculators that can be included in a site, if purchased. (As of this writing, we are aware that there is a kje-spanish.js, but we’re not sure at the moment if we can include it. So for now, parts of the Spanish calculators are in English.) See this page for more information on Spanish calculators.

You will need to create a separate microsite for the non-English site. The folder name for the microsite is usually something like “language.sitename.com”.

Creating Pages/UAT Setup

For categories and URLs, everything must be either in English or in the romanized version of their languge, with the special characters removed. This is because the Banno CMS cannot currently handle special characters within URLs–because of the way page URLs are generated with the category, the categories must all be in English (or romanized) as well.

If needed, the client can choose to have us create categories in the “romanized” version of their language (for example, the Chinese word 产品 (“personal”) would be romanized to “Chǎnpǐn”, meaning that the category would be “chanpin”, the same word without special characters). In languages like Spanish or French this is easier, because the only issue would be special characters like accents over the letters.

When creating pages on UAT, you can set the title to be non-English characters when building them out in the -make.json. For example:

{
      "category":"Personal",
      "url":"personal/checking",
      "templateId":"subpage",
      "title":"個人支票帳戶"
}

As you can see, the category and URL are both in English, while the title attribute is the one set to the translated title.

Example Non-English Sites