Can you please explain the best approach to handle translations.
Front end language switcher and translation table?
I use Google Translate … provides a drop down of languages user can select and then translates the page.
Sorry that won’t do. Need a proper translation of the site.
Well you can handle translations really well with app connect dynamic bindings and database with translations.
So you can have a server connect action fetching the data for the current language and then just populate the dynamic texts on the page.
You would still have to manually translate all your content regardless.
Wouldn’t expect anything else 
1 Like
I guess that topic is getting hotter. There are some topics about that and jquery translations
Well it can be done pretty simple:
- setup a database table “translations” with TextKey, LangKey, Translation for example
- on each page load query the database table with filter on the current selected language (can be with url parameter or based on the browser component language value)
- use data binding on the page based on the TextKey to show the right translation.
Maybe @Teodor can setup a simple showcase and a tutorial if that is often required
4 Likes
Hi George,
I’m interested in your idea but one question, how would you identify a specific phrase/sentence via the Binding?
We already have functioning translation via Javascript but am always interested in alternatives!
Hi Dave,
Why do you need to identify a specific phrase? Isn’t the idea to have the whole content translated?
that is the idea behind TextKey - you just make up an unique key for identification
Yes that would be ideal but how does the above recognise what it is translating? Select lists and form inputs, Placeholders, Titles, Paragraphs, etc? I’m very interested indeed. We currently dump a table of phrases and sentences from the database to a .json file which essentially search and replaces with the matching language/translation via JavaScript. It would be nice to learn how to do the above as we work in a dozen different languages so I could imagine it being extremely useful. Thanks for absolutely any suggestions.
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.
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
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…
Long story short thank you for the salad cream George!
4 Likes
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.
- The Translationkey should be very short and unique.
- Translationkey should be in english
- There should be a naming concept.
- How to handle future translations
- 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.
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.
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:
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.
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
- 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>
- 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>
- 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