Multi Language Website with jQuery π¬π§πΉππ¨π³
Let’s make multi language website
Get Ready
A Simple Guide to implement Multi Language into your website. Here is the list of what is in use for this guide.
- HTML5
- Bootstrap
- jQuery
- JSON
Create “index.html” with language switch button
“index.html” file that includes Bootstrap, jQuery, and custom script
Copy to Clipboard
It will look like this
Β
<Head> where we include Bootstrap
Copy to Clipboard
Β
<body> where we create the <h1> for text and button for each language
Copy to Clipboard
Β
The end of <body> where we include jQuery, Bootstrap Script, and Our Custom Script
Copy to Clipboard
Create JSON files for each language
Create folder call “lang” and create .json file for each language
Β
Code for th.json πΉπ
Copy to Clipboard
Β
Code for en.json π¬π§
Copy to Clipboard
Β
Code for ch.json π¨π³
Copy to Clipboard
Create script.js to handle language switching
Β
“script.js” file
Copy to Clipboard
Β
getLang() function to define a default language and fetch for json file according to selected language.
Copy to Clipboard
Β
setLang(lang) function handle a language change when user click on the buttons – Parameter ‘lang’ define what language to change into.
Copy to Clipboard
Β
English Button will call setLang(‘en’) when clicked.
Copy to Clipboard
Β
Call a getLang() function and apply text into <h1> tag with id=”text” when a webpage is loaded.
Copy to Clipboard
Now your website can say ‘Hello’ in English Thai and Chinese – YAY!
P.S. LocalStorage in javascript is not clear even when user close the program. LocalStorage is connect with the domain name. Therefore, next time the visitor connect to your website the selected language will be there by default.