translation data load after price-box.js

[gabs77]

Preconditions

Magento 2.1
The translation-js load after some javascript.

Steps to reproduce

1. I override the price-box.js like following method : app/design/frontend/vendor/package/Magento_Catalog/web/js/price-box.js
2. i add in define array the following line :
   'mage/translate'
3. in reloaPrice function, i add the following line :
   var regexResult = $.mage.__('$1$2.$3');
   and i add in i18n file the translation
   For example :
   "$1$2.$3","my custom regex"

For debug, I edit the following file: lib/web/mage/translate.js
this.translate = function (text) { console.log(text); console.log(_data[text]); console.log(_data); return _data[text] ? _data[text] : text; };

Expected result

in console log, we have :
Translate translate.js (ligne 45) undefined translate.js (ligne 46) Object {} translate.js (ligne 47) Submit translate.js (ligne 45) undefined translate.js (ligne 46) Object {} translate.js (ligne 47) Close translate.js (ligne 45) undefined translate.js (ligne 46) Object {} translate.js (ligne 47) $1$2.$3 translate.js (ligne 45) undefined translate.js (ligne 46) Object {} translate.js (ligne 47) GET http://xxx/pub/static/frontend/vendor/package/fr_CA/js-translation.json GET http://xxx/pub/static/frontend/vendor/package/fr_CA/Magento_Ui/templates/tooltip/tooltip.html text.js (ligne 131) Select Date translate.js (ligne 45) Sélectionner une date translate.js (ligne 46) Object { Method %s does not exist on jQuery.decorate="La méthode %s n’existe p...ie dans jQuery.decorate", Close="Fermer", Please wait...="Veuillez patienter...", plus...} translate.js (ligne 47)

Actual result

Object {} must be filled with translation data before the javascript pass to reloadPrice function in price-box.js file

[OktarinTentakel]

We actually have witnessed the same behaviour, where calls to translate partly happen before translation.add and partly afterwards, resulting in completely disfunctional js-translations, partly querying empty _data objects.

The main problem seems to be the require part for translations in translation.phtml, which just tries to build data from dependencies asyncronously, but offers no real dependency chain, so that later scripts can never be sure that code has really been called already.

Just adding a name via define proves difficult, because of the dependency callback inside the outer callback. -.-

Any quick solutions for this coming to mind?

BTW: this happens in version 2.1.2

[Aldecoez]

In 2.0 sub-tree we got same bug ( we use 2.0.11 ). Translation initiation from phtml is triggered too late for many js translations used in other js files. As @OktarinTentakel said , there's no way to be sure that script inside translate.phtml is done.

[EliasKotlyar]

Hello everyone,

We encounter the same bug. The translations are triggered from the translation.phtml file and sometimes are too late for being used in the Javascript-Code. We tried several things but found only one solution for now:

We have implemented a module, which will be loaded first before all the other modules. Its a blocking thing, but it needs to be to be "on time". This solution works by loading the translations over a synchronous ajax-call or the localstorage(depending how it needs to load). I am aware that my solution is not perfect and needs refactoring - but its working pretty good. Unfortunately i am not so much familiar with Javascript to make the whole thing asynchronous. Feel free to improve it, and maybe it will become part of the core one day.

Greetings
Elias

[EliasKotlyar]

Hello everyone,

I made a video for the reproduction of this bug:
https://www.youtube.com/watch?v=Z1OyY4W1hCA&feature=youtu.be

I hope you can reproduce it and provide some better solution than me.

Greetings
Elias