Making bilingual site

Hi,

Pardon me for my ignorance and bad English. I just came to the Wappler community yesterday and I found it very interesting. I came from a Webflow background and I have a few very important questions. So, any time a built a website in Webflow and the client needs it to be bilingual etc… I have to use a third-party provider like Weglot. My question is, how do you do that in Wappler? Let’s say I have a client that need two or more than two languages translation, should I pay a third-party plugin in Wappler too. If not, please explain me (as you’re explaining to a non-techy guy or a noob). Also, is your method SEO friendly?

That is my first question. Thanks

Check this tutorial:

1 Like

We implemented this approach using a keyed array.

Very simple to integrate.

@Melvyn_Paulino these last days I have been working on adding DB content translation.

The guide I wrote and George mentions only cover static strings and that is why the strings are stored in filesystem and not in DB. Quicker access as they do not change.

Now I use an improved version compatible with nodejs that includes also DB dynamic content translation. In this small video you can see the outcome.

The category name strings are stored in the database and the strings for link below are stored in filesystem.

On the console on the right you can see that the app downloads on demand the two files for spanish static strings and then it retrieves the database content in the appropriate language.

For the DB content translation I went for jsonb column type(exclusive for PostgreSQL database engine). It is a very powerful data type that tries to implement the wonders of noSQL databases in a SQL database like postgresql.

You can see in this picture how the database content is structured in the category name column.

This way I don’t have to worry about having to change database schema or about joining a huge table of strings. Need a new language? Just add a new key:value pair to the column on the fly.

You end up with a blazing fast translation feature that doesn’t require reloading the browser.

For SEO compatibility I recommend you using nodejs server model as it includes templates and server side rendering that will make things easier when setting meta tags. Regarding SEO URL routes you are free to implement them in the best way you consider. It is easy with Wappler.

i18next framework+postgresql jsonb -> Absolute winner for static and dynamic translations.

This being said Wappler still doesn’t support 100% json and jsonb postgresql types in the database query server connect actions. But I already opened a bug report/feature request and hopefully we can tackle this. Not a hard limitation as you can easily resort to code(very easy code).

1 Like

This is very nice, @JonL. Thank you for the explanation.

I am from the Dominican Republic, if there is anyone else from my country please, let me know. My first language is Spanish and I would really appreciate that Wappler website is in Spanish as well. @George

There is a lot to read and in my native language is much easier.

I forgot to ask. If there’s a list of common technical abbreviations usually used here so beginners and non-techy people like me can understand what they mean. e.g., GUI and many others.

Other important thing I want to mention is that would be very interesting if you guys put a button where users can change the theme, specially for the Docs page and for the Forum (Community). Just like in the Adobe Products. That way, people can toggle according to their needs. I sometimes get tired of the dark theme after reading for a few hours.