Multi language site

[WatchThatCode]

Hello Community,

I have already created my first pages and a register form, thanks to the awesome tutorials on youtube. Without those, I wouldn’t be able to start with Wappler.

I am not at the point of translation, but I have searched for an How To and found the tutorial.

I do understand the basic workflow on how to fetch translations from the database, based on the browser language. However, this tutorial only covers the basics.

What if I need to translate form fields (placeholders), form messages, autopopulated dropdowns, validation messages, strings with variables; basically every aspect to run my site multi language. How about a language switcher frontend or language based on a database field for logged in users, where user can set his language?

Are there plans to integrate multi language across all items with wappler? As said, I am not at the point of translating my site yet, but I am thinking ahead, so I don’t have to do the work twice later on.

[ben]

Don’t make it too hard on yourself, simply create the number of versions of the website. No database needed.

Here I have a page created using NodeJS. This is the English version

and the Dutch version

Sorry, this was a quick mockup and I did not translate the menu items. Easily done though.

That way you can ensure that everything has the correct translation.

[ben]

@WatchThatCode

How about a language switcher frontend or language based on a database field for logged in users, where user can set his language?

Simply create a cookie/local storage holding the preferred language. This can then be used to select the correct URL.

[WatchThatCode]

Hello Ben,

thank you for your advice. Could you explain short, but in more detail, how this works? This is currently a black-box for me.

Instead of using varibales and fetching translations from the database, I assume you are talking about duplicating my pages for translations. This would be a suitable and straight forward way of working out the translations. In case I edit page de-DE and add a Column, I assume I have to make the same changes to my other page en-GB? Or what do you mean by Version of the page? Maybe it is possible to edit page A, duplicate the changes with page B (while keeping already translated strings and changing new strings).

Maybe there is a tutorial on this, which would be very helpful. I am not quiet sure how to work out the routing. Maybe create 2 folders for pages.

folder_language_de
folder_language_en

[ben]

@WatchThatCode

Instead of using varibales and fetching translations from the database, I assume you are talking about duplicating my pages for translations. This would be a suitable and straight forward way of working out the translations. In case I edit page de-DE and add a Column, I assume I have to make the same changes to my other page en-GB? Or what do you mean by Version of the page? Maybe it is possible to edit page A, duplicate the changes with page B (while keeping already translated strings and changing new strings)

Correct.

@WatchThatCode

Maybe there is a tutorial on this, which would be very helpful. I am not quiet sure how to work out the routing.

There is no tutorial on this (as yet). When you create the project in NodeJS, the routing is automatically created.

@WatchThatCode

Maybe create 2 folders for pages.
folder_language_de
folder_language_en

Yes, there is a folder for each language.

[AlexandreMoreira]

Sorry @ben, but I understand that this would not be an efficient alternative, since the code would be multiplied, making future maintenance extremely complex and causing many problems in updating one page and not updating the same on another, I took another approach, really creating in the database, a table of translated messages for each language and when placing it in the frontend, associating it with the respective custom translated field, that is, when loading the page, it queries the constants and applies it to the page, always the constant read from the database !