Multilingual logical problem

Wappler General Need Help
1

Hi everyone,
I'm setting up my first multilingual site with wappler in NodeJs.
In the main layout I inserted a condition that checks the existence of the cookie and if it doesn't find it it sets the language value to IT (Italian is the default language).

1
1912×708 46.6 KB

Then I load a dictionary in JSON based on the cookie value and up to this point everything works correctly.

  <dmx-json-datasource id="JsTranslate" is="dmx-serverconnect" dmx-bind:url="'/data/main/dictionary/'+Cm.data.lang+'.json'"></dmx-json-datasource>

If I click on the English language I set the cookie to EN and the UI updates in real time but two problems emerge that I don't know how to solve.
The first is that the url remains with reference to Italian (it), the second is that even all the metadata of the page managed through server side action do not change.

2
21891×975 102 KB

So I thought of linking the dictionary using the parameter present in the query string (query.lang) and making a redirect to the same page but referring to the new language.

  <dmx-json-datasource id="JsTranslate" is="dmx-serverconnect" dmx-bind:url="'/data/main/dictionary/'+query.lang+'.json'"></dmx-json-datasource>

But now I don't understand how to manage the home that I don't think can have the lang parameter in the url since at the first start the site starts with the url localhost:3000

Can I set an optional parameter for the index in the routing file or even make it so that when I type www.domainname.com it responds with a url of this type (www.domainname.com/home/en)?

2

If your default language is Italian then check if query.lang=='EN' then load it otherwise load the default
dmx-bind:url="'/data/main/dictionary/'+query.lang=='EN'? query.lang:'IT'+'.json'"

And you can of course check in your layout page.load event the same thing...
If query.lang doesn't exist, set the default

Quick thoughts.. I hope you understand

3

What about just redirecting from localhost:3000 to localhost:3000/it?

Attach a server action to the page (Server Side Data section in Wappler editor), and use a Redirect step

For changing language, it's just an href link to the new language

4

I set the :lang parameter on the index
1

and I set a condition on the main layout that checks the parameter, if it is equal to :lang (so it should be the first load) I do a redirect to /it

2
2823×667 22.7 KB

I don't really like this approach because the user sees a double load of the page but I can't think of a better way to handle it

5

This is how I do it, but with routes, so no double page load:

image

Hope this helps!
Gabor

6

It seems like a good solution to me even if I can't redirect to the language saved in the cookie but only to the default one, correct?

7

Yes, you can specifiy the available languages as well in brackets: /:lang(it,en)
If nothing set it will redirect to the default with the routing. You still need to think about redirection when the browser language or users prefered language is different than the one set already. Right now I only use one language but I plan to open a modal in this case and save the setting in a cookie variable, then redirect. Pretty much the same logic as cookie consent.

8

I described a better way of redirect:

Let me know if you need help, maybe later I can put screenshots or someone else can :slight_smile:

9

Uf you can share something it will help me for sure...thanks a lot

10
  1. Create Server Action
  2. Add a Condition $_SERVER.PATH_INFO == '/'
  3. Add a Redirect step inside to /it
  4. Go to your home page, click App:
    image
  5. Find this:
    image
    image808×122 4.43 KB
  6. Select Server Action you've created (the one with the Redirect)
  7. It should redirect

This will create a server-side redirect, the user will not see a double page load

11

Thanks for the suggestion, I will try to set this method in the server action that I already use for dynamic meta tags