How to handle translations, site w multiple languages

Wappler General How To
#14

I’d be interested in learning more about this when you guys have enough time spare to put together an example. Thanks for the insight George.

#15

well it is actually much easier than you think - but have to be done during the website design.

Instead of typing static texts in Wappler for example for paragraphs or prompts, you just use data bindings directly

2 Likes
#16

Reminds me of my hunt for the perfect tuna sandwich…

I was on YTS (Youth Training Scheme in the U.K), very low paid (27.50 per week GBP), Anyway I used to stop at a garage as they did cheap sandwiches at lunch… I had about £1 a day for lunch back then. They sold a tuna sandwich that I repeatedly purchased again and again, nom nom nom, so nice! After leaving this position I moved on to another a lot further away but still on the low wage… I tried all types of tuna sandwiches from all over the place and none matched the taste of my favorite. I then took to making my own and proceeded to try and recreate the sandwich… Years went by and I still hadn’t got it right. One day I run out of mayo! Oh no. So I grabbed some salad cream as a replacement to top up the little mayo I had… AND that was the secret ingredient!! Now I can recreate that sandwich whenever I want. I just needed the salad cream all along… :slight_smile:

Long story short thank you for the salad cream George!

:smiley:

4 Likes
#17

I’m still not sure which way I should take for translation. Jquery or via Databinding. The last one would be cool but some things should be checked first.

  1. The Translationkey should be very short and unique.
  2. Translationkey should be in english
  3. There should be a naming concept.
  4. How to handle future translations
  5. What about a Translation Extension? That would ASK the user to setup a separately run a Create SQL statement with language, keys etc, as georg mentioned before with all the needed infos. And also asks for languages to translate. Maybe it would translate it via Google and then still ask for manual approve/correctness. I think translating single words like: ok, exit, change, edit, save, could be helpful to have some quickstart with Google Translate. Also that extension could show “untranslated” keys… But of course there should be for the wapplee user a interface where HE HANDLES his translations at his own. I think its not the job of Wappler to manage / provide CMS for translation.

Maybe there are some informations out there. Cause doing mistakes on a low level, could be costly later.

#18

Well this is a valid approach with any database driven solution.

Just forget about jQuery - its a dead end - also App Connect is much more high performance and can achieve much more, much easier.

#19

I have to develop a site in two languages and remembered this thread. I had a feeling a straighforward solution was suggested, but now I look at it more closely, I’m not sure how it works.

I have a simple table like this, using @George’s suggestion:

image

I have a query which returns records in this table where a cookie = langkey. I have two buttons which set this cookie to ‘es’ or ‘en’. If I put this on a page:
{{sc_lang.data.qry_lang[0].text}} | {{sc_lang.data.qry_lang[1].text}}
buscar | contacto is displayed if I click one button, and the English words are displayed if I click the other.

Obviously I don’t want to use the array index to get the correct term. How can I use the textkey value instead? Or perhaps this isn’t the right approach. I can see there are quite a few ways to do this, but if I could just a cookie and something like {{sc_lang.data.qry_lang['search'].text}} - that would seem a good solution.

Variable and Server Conect
#20

ok @TomD - this could be made easy with an extra custom data formatter (that we can add to the standards anyway) to be able to convert the array to keyed object for easy access and lookup

  1. add a script blok in the head with this code:
<script>
dmx.Formatters('array', {
		toKeyedObject: function(array, key, value) {
			var newObj = {};
			for (var ai=0; ai < array.length; ai++) {
				newObj[array[ai][key]] = array[ai][value];

			}
			return newObj;
  }
 });
</script>
  1. create in the beginning of the page, after the server connect load of the texts, a new app connect variable with your translation data and apply the formatter to it:
<dmx-value id="lang" dmx-bind:value="sc_lang.data.qry_lang.toKeyedObject('textkey', 'text')"></dmx-value>
  1. then you can use it where the text is needed with the last word the key:
{{lang.value.contact}}

or bind it as inner text

<p dmx-text="lang.value.contact"></p>

So that is how it should work. We can improve some things, but that is the general workflow

10 Likes
Treating a erroneous login REPLY in a 2nd language. When/How?
Array Insert at index not working
#21
#22
#23

Many thanks @George - that’s a great solution. I think this will be a very useful feature generally and works perfectly for language switching.

I was wondering about how to set defaults in case no cookies are set, at least for critical text - now it’s just a matter of setting a defaut in the normal way with the data formatter. For inner text, I was pleased to see dmx-html also works too.

4 Likes
#24

Wappler Translation Tutorial

Took me hours to gather all informations of the 3 steps you mentionned but it was fun to learn many other things along the way. And I wanted to contribute to thank this amazing community.

So here is a quick tutorial (hopefully) from A to Z.
I’m not really comfortable with Wappler terminology yet but the step by step approach should allow anyone to understand the workflow.

Step by step video :

Ressource :
SQL dump : https://www.dropbox.com/s/kb3i7oiwa1wb86y/translations.sql?dl=0

Any feedback/improvements are welcomed ! :slight_smile:

9 Likes
Making bilingual site
How to use a key/value data store
Array Insert at index not working
How Can I Automatically Translate a URL with Query Params into Another Language?
#25

Thank you Jeoff, very well presented and I love the accent.

#26

Hi,
Cannot make it work. Translations are properly loaded from the database, but data doesn’t to be stored in the array (after toKeyedObject) to be displayed after. Is there a way to control this array (if exists and what is in) with chrome debugger ?

1 Like
#27

Usually, this is because the formatter script is not included in the code :

If you can send a screenshot or the actual page link, it will be easier to help you though ! :wink:

#28

I have already added it with no success. But if i add it, do i need to add this script also as @george wrote previously ? Should we have both ?
image

#29

No it’s not needed anymore as it’s shipped with the formatter script now.

#30

Ok, thank’s for you help, i think i will have to start from scratch again.
I’m still interested to know if there is a solution to control what’s going on in the chrome debugger

#31

@jeoff75, how do I convert an array into keyed object? I tried looking for this formatter, but no luck. Thanks.

#32

Look at the source here :
https://login-boilerplate.usa-sandbox.space/app_create_user.php

I’ll try to upload the project to git this week-end so that you can have a look from within wappler.

2 Likes
#33

Thanks lot mate. I did watch the video you put together and figured it out, it was a lifesaver. The toKeyedObject is not available through the UI formatter, entered it manually, thanks again :+1:t4: