How to handle translations, site w multiple languages

Wappler General How To
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