Fil d'Ariane

Problème de traductions dans Magento 2: les traductions ne fonctionnent pas

Par Jérôme Megel le 31 janvier 2018
Traduction

Après avoir pas mal galéré sur un problème de traductions récalcitrante, j'ai décidé de partager la solution avec vous:

En fait ce qui se passe exactement est que certaines traductions Magento 2 passent par Knockout.js (j'écrirai un article prochainement sur Knockout) et ce sont ces traductions qui peuvent poser problème.

Les fichiers de template Knockout sont en html (et pas phtml) et c'est donc la surcouche JS qui va gérer la traduction. Dans notre exemple nous allons voir comment traduire 'View and Edit Cart'.

Pour qu'une traduction fonctionne il faut:

  1. Ajouter  
    <span data-bind="i18n: 'View and Edit Cart'"></span>
    dans le fichier html, voici un exemple: https://github.com/magento/magento2/blob/develop/app/code/Magento/Checkout/view/frontend/web/template/summary/cart-items.html

    Vous pourrez voir tous les cas disponibles dans la documentation officielle de Magento 2 : http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/translations/translate_theory.html#add_strings_ui_html

     
  2. Ensuite au moment de la génération Magento 2 va chercher dans tous les fichiers de template tous les data-bind i18n et les rassembler dans un fichier bundleX.js situé dans le dossier public.
     
  3. Une fois tous les fichiers bundleX.js constitués, Magento 2 va générer un fichier de traduction dédié à la trad JS qui sera chargé en front-office. Ce fichier s'appelle js-translation.json et est également situé dans le dossier public : /pub/static/frontend/{nom du thème}/default/fr_FR/js-translation.json
     
  4. Les termes de traduction sont remplacés en JS grâce au fichier js-translation.json
     

Le hic c'est que lors de la génération, le système ne va pas chercher dans les fichiers de thème, pour que la traduction soit prise en compte et ajoutée dans bundleX.js il vous faudra ajouter les termes de traduction dans un fichier de module:

  1. Si ce n'est pas déjà fait, créer un module custom
     
  2. Créer un fichier qui sera dédié à la traduction dans ce module, par ex: /app/code/{area}/Checkout/view/frontend/web/template/i18n.html
     
  3. Ajouter les termes à traduire dans ce ficher:

    <span data-bind="i18n: 'View and Edit Cart'"></span>

    Ils seront ainsi pris en compte et la traduction fonctionnera parfaitement.

Ajouter un commentaire

Vous avez un projet ?contactez-moi
Me contacter par email