Étiquette : localisation

[Magento 2] js-translation.json Localisation de chaînes de caractères récalcitrantes (qui restent en anglais) dans les notifications messages d’alerte

Bug inhérent à Magento 2. Les chaînes non-traduites sont dasn des fichiers javaScript. Un fichier js-translation.json contenant les traductions nécessaires est généré en front au chargement de la page, mais il est incomplet!

The cause of issue is: Sometime file js-translation.json is loaded slower or later than other javascript file (I assume file a.js contain some texts need to translate) which contains some texts need to translate so at this time translated texts still not push to storage. Source: Magento 2 javascript translation sometime translate sometime not work – Why and how to fix?.

Voir ici:

Attention: les solutions 1 à 4 ont été testées alors qu’aucun language pack pour le core de Magento 2 n’avait été installé. Il se trouve que les clés de traduction n’étaient présentes qu’en anglais dans le projet. Le front ne pouvait de ce fait pas afficher de libellés en français. Il est impératif d’avoir installé un language pack au préalable, avant de procéder à des tests sur les problèmes de build du fichier js-translation.json.

Solution #1 (testée Magento 2.3.4, non fonctionnelle)

Dans la DB, virer les rangées de inline translation qui sont importées dans la table core_config_data:

Puis:

Solution #2 (non testée)

Il faut impérativement qu’on ait un environnement où les traductions fonctionnent pour mettre en place cette solution: Magento 2 – Translations : how does js-translation.json get populated? Mine is empty!

Solution #3 (testée Magento 2.3.4, non fonctionnelle)

Magento 2 Knockout Translation Bug

Solution #4 (non testée)

js-translation.json fails to generated

Solution #5 (testée non fonctionnelle Magento 2.3.3, 2.3.4)

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

Packs de langues (traductions)

Installer mageplazza

Créer un token depuis Github

  • Vous logguer sur votre compte GitHub
  • Settings > Developer settings > Personal access tokens
  • Button « Generate new token »
  • Cocher la case read:packages
  • Copier-coller le token généré. Il vous sera demandé au composer require

Outils


ATTENTION: Magento 2 est très buggué au niveau des localisations traductions, notamment lorsque celles-ci reposent sur JavaScript. La solution ci-dessous permet de contourner le problème mais n’est pas propre. Dans le fichier app/design/frontend/MyVendor/myTheme/Magento_Theme/templates/messages.phtml, rajouter à la fin:

Axes d’amélioration: améliorer le code en le séparant en 2 plugins. Les mutation observers et le traducteur.

[Magento 2] Corriger les libellés non traduits ou localisés

  • Magento 2.x DevDocs – Translate theme strings. This topic describes how to add theme strings so that the i18n tool can collect and add the strings to the dictionary.

    • Strings added in .phtml templates.
    • Strings added in email templates.
    • Strings added in UI component templates.
    • Strings added in UI components configuration files.
    • Strings added in .js files.

Problème: Des libellés comme celui du bouton « Add to Cart/Ajouter au panier » dans la fiche produit et celui du placeholder « Start Searching…/Rechercher… » du champ de recherche dans le bandeau du site ne sont pas traduits/localisés lors du passage du site en français (ou dans une autre langue que l’anglais) et restent affichés en anglais!

En ligne de commande (à envisager, d’autres solutions existent)

Source: magento 2 translate shipping method title

[Méthode globale pour corriger les erreurs de localisation] Les traductions pour certains libellés de base sont déclarées dans un fichier dictionary.csv

…mais restent pourtant affichées en anglais sur mes pages, alors même que la grande majorité des libellés sont traduits correctement.

De manière générale, un libellé déclaré dans le fichier vendor/imaginaerum/magento2-language-fr-fr/dictionary.csv, comme par exemple:

…peut être exploité dans un fichier PHTML en l’invoquant de la manière suivante:

Si vous avez repéré le fichier PHTML incriminé (celui qui ne traduit pas votre libellé), vous pouvez remplacer l’appel de traduction de la manière suivante: <?= $block->escapeHtml(__('Un libellé tel que déclaré dans le fichier: vendor/imaginaerum/magento2-language-fr-fr/dictionary.csv')); ?>.

Traduction/Localisation du libellé du bouton « Add to Cart/Ajouter au panier » dans la fiche produit

Note: cet exemple est propre au thème Supro pour Magento 2.

Surcharger le template app/design/frontend/Mgs/supro/Magento_Catalog/templates/product/view/addtocart.phtml dans votre thème enfant (si vous n’en avez pas, il faudra en créer un… Dans notre exemple: app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/view/addtocart.phtml) et remplacer les lignes suivantes:

…par:

Traduction/Localisation du libellé du placeholder « Start Searching…/Rechercher… » du champ de recherche dans le bandeau du site

Note: cet exemple est propre au thème Supro pour Magento 2.

Surcharger le template app/design/frontend/Mgs/supro/Magento_Search/templates/form.mini.phtml dans votre thème enfant (si vous n’en avez pas, il faudra en créer un… Dans notre exemple: app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/view/addtocart.phtml) et remplacer les lignes suivantes:

(c’est en fait uniquement la ligne placeholder="<?php /* @escapeNotVerified */ echo __('Start Searching...'); ?>" qu’on remplace) …par:

Traduction dans un fichier JS

La méthode de traduction de chaînes de caractères incluses dans des fichiers JS dans Magento 2 est expliquée ici.

Note: notre exemple tient toujours compte du fait que nous utilisions le thème Supro, mais il reste appliquable dans d’autres cas. Nous allons surcharger le fichier app/code/MGS/AjaxCart/view/frontend/web/js/action/product-add-to-cart.js dans app/design/frontend/Vendor/theme/MGS_AjaxCart/web/js/action/product-add-to-cart.js.

(Si ce n’est pas fait) lier la librairie 'mage/translate' via requireJS

Utiliser la fonction $.mage.__('<chaîne de caractères>');

ATTENTION: les clés de traduction sont sensibles à la casse. Respectez les minuscules/majuscules! Exemple d’un cas que j’ai dû déboguer:

Note: il est également possible de déclarer un alias pour la fonction $.mage.__('<chaîne de caractères>');. Exemple:

Traduction dans un composant UI de Magento 2 (fichier *.html)

Dans notre exemple, nous allons surcharger le fichier natif vendor/magento/module-checkout/view/frontend/web/template/cart/shipping-rates.html dans app/design/frontend/MyVendor/myTheme/Magento_Checkout/web/template/cart/shipping-rates.html pour corriger un bug de Magento 2.3 sur le libellé Flat Rate qui n’est pas traduit dans la page panier. Nous remplacerons pour ce faire la ligne:

…par:

Note: la traduction française de l’expression Flat Rate existe déjà dans le fichier vendor/imaginaerum/magento2-language-fr-fr/dictionary.csv, donc nul besoin de la recréer.

La partie à ne pas oublier dans ce cas (surcharge de composant UI sous forme de fichier HTML), est d’exécuter les commandes suivantes: »

1. Pour faire en sorte que la surcharge du fichier HTML soit prise en compte:

…et si vous utilisez Grunt:

2. Pour faire en sorte que la traduction de votre libellé soit prise en compte (nous sommes dans un cas où le libellé est généré via JavaScript):

Traduction inline via l’interface d’admin de Magento 2

Pas testé. Source: How to use the inline translation?

Chemin en BO: Stores > Configuration > Advanced > Developer > Translate Inline > Enable for Storefront > Yes.

[Thème Supro uniquement] Surcharge de styles

C’est honteux mais, dans la source du thème Supro, certains textes se retrouvent dans les feuilles de style. Si votre site est multilingue, il faut créer un thème par langue pour corriger le problème de traduction.

Si vous suivez ce tuto: [Magento 2] Astuces d’utilisation du thème Supro: surcharger (override) les valeurs de style par défaut (ou celles définies depuis l’interface d’admin)… la surcharge LESS ci-dessous est à placer dans le fichier app/design/frontend/Vendor/theme/web/css/supro-override.less.