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.