We are currently adding multilanguage support (internationalization) to the ERPNext website. This is what we have planned, we are looking forward to your feedback.
Adding the Language Picker to the Navigation on the Website
I would integrate this language picker https://bootsnipp.com/snippets/mprMM flag icons can be defined in the backend but we would suggest using https://www.gosquared.com/resources/flag-icons/ which is under MIT license. The flags would be in the current Language
DocType, we should also consider uploading the flag icons with 25px to Frappe Core for usage wherever people want and populating the Flags field with those by default.
Currently the navigation looks like this:
I would add the language picker betweeen the login and the navigation like this mockup (collapsed):
When the user clicks the language they can pick among the available language options (expanded):
Adding Languages to Website Settings
- In
Website Settings
add a new section calledWebsite Languages
- Add checkboxes
Enable Multilanguage Support
andDisplay Language Picker in Top Bar
. Without Multilanguage Support being enabled we hide the language features in blogs, knowledge base and pages. - Add a new child table
Website Languages
with fields Language (Link: Language), Route (Data), Default (Check, unique)
The route would be a default prefix that is added to the individual Web Page
, Help Article
or Blog Post
route for example the “Company History” pages route in English would be route “/en” and then “company-history” so www.website.com/en/company-history
while the German could be www.website.com/de/unternehmensgeschichte
. This is SEO friendly.
Changes in Other DocTypes
This example is for Web Page
, similar procedure would have to be done for Help Article
and for Blog Post
.
- In
Web Page
add Language (Link: Language [javascript limited to children in Website Languages child table]) and show it in list view ifWebsite Settings -> Enable Multilanguage Support == TRUE
. - When creating a new
Web Page
by default put in the default language fromWebsite Settings -> Website Languages -> default
. - If
Web Page
Language not the default language, add new fieldTranslation of Web Page
(Link: Web Page) which will link the translations with its parent. - In
Web Page
show linked translations in Dashboard
How Language Switching Works
- If the user is logged in we also change his language preference in his user under
/me
- Open the page of the translation of the source site, if you are on the home page in English you should switch to the home page in German. If you are on the contact page in English you should switch to that in German. If there is no translation for that site display the default languages site.