Localization of Sharepoint Display template

There was requirement in our project where we need to localize the display template. Basically we have 5 different flavors of localization implemented  in our project.

In order to achieve this we have  come up with localizing the resource file with javascript implementation, which is quite interesting and new in sharepoint implementation perspective.

Below are the steps we need to follow to make sure localization can be implemented in display templates

 a) Come up with all localization text  and corresponding key value pair as like normal resource file.
 b) Create javascript file with your favourite editor such  as notepad, notepad++ etc with the below syntax


$registerResourceDictionary("en-us",
{"PageTitle": "Page Title",
"ProductName": "Product Name",
"ProductDescription": "Product Description"});

 c) Here we can all the resource file key value pair which needs to be displayed in the display template

 d) Save the file as ResourceFile.js
 e) Please make sure about the locale language which needs to be present in the 1st  line.
 f) Upload this file in style library and add the reference of this file in the display template as below  reference

g) The resource file needs to be present in all locale site collection style library with appropriate language else it will start throwing error.

h) Once all the above steps completed, then we need to access the resource key like this.

    var pageTitle = $resource("PageTitle");

i) We can use this in the variable in any of the place in the display template