This is a template for MultiLanguage support of a website. It uses only JavaScript to implement the logic. It is easy to implement and does not require some extra frameworks or extensions.
You can check here the DEMO
Structure of Project:
- Resources Folder
- Here you can store all files with translations - in this example these are en.js and bg.js.
- You simply create a variable with keys and string value with translation.
- Key values need to be added in data-tag attribute in every HTML element which you want to be translated.
- Scripts Folder
- defaultValues.js
- All default values for the template.
- myFunctions.js
- All functions that are used.
- getCookie - it is used to check if cookie with language exists. I prefer to store the language in cookie in order to remember the clients preferences.
- translateAll - translates all elements in DOM where data-tag exists
- Note that all html elements need to have data-tag attribute with their key in order to be translated.
- Translate.js
- This is the implementation of the Language class. It creates an instance with default language. The default language is set in the defaltValues.js file.
- getVal - returns the translated value by the key passed. You can pass default value, if no key exists or 'undefined' will be returend.
- defaultValues.js
- Styles Folder
- style.css - simple styles for presentation page
- index.html
- Example page where you can test the translation of page.