-
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
|
1 |
php -dmemory_limit=6G bin/magento setup:static-content:deploy en_US nl_NL de_DE |
[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:
|
1 |
"Search entire store here...",Rechercher... |
…peut être exploité dans un fichier PHTML en l’invoquant de la manière suivante:
|
1 |
<?= $block->escapeHtml(__('Search entire store here...')); ?> |
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:
|
1 2 3 4 5 6 |
<button type="submit" title="<?= __('Add To Cart') ?>" class="action primary tocart" id="product-addtocart-button"> <?= __('Add To Cart') ?> </button> |
…par:
|
1 2 3 4 5 6 |
<button type="submit" title="<?= $block->escapeHtml(__('Add to Cart')); ?>" class="action primary tocart" id="product-addtocart-button"> <?php /* @escapeNotVerified */ echo __('Add to Cart') ?> </button> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<input id="search" data-mage-init='{"quickSearch":{ "formSelector":"#search_mini_form", "url":"<?php /* @escapeNotVerified */ echo $block->getUrl('search/ajax/suggest', ['_secure' => $block->getRequest()->isSecure()]); ?>", "destinationSelector":"#search_autocomplete"} }' type="text" name="<?php /* @escapeNotVerified */ echo $helper->getQueryParamName() ?>" value="<?php /* @escapeNotVerified */ echo $helper->getEscapedQueryText() ?>" placeholder="<?php /* @escapeNotVerified */ echo __('Start Searching...'); ?>" class="input-text" maxlength="<?php /* @escapeNotVerified */ echo $helper->getMaxQueryLength();?>" role="combobox" aria-haspopup="false" aria-expanded="false" aria-autocomplete="both" autocomplete="off"/> |
(c’est en fait uniquement la ligne placeholder="<?php /* @escapeNotVerified */ echo __('Start Searching...'); ?>" qu’on remplace) …par:
|
1 |
placeholder="<?= $block->escapeHtml(__('Search entire store here...')); ?>" |
Traduction dans un fichier JS
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
|
1 2 3 4 5 6 |
require([ 'jquery', 'MGS_AjaxCart/js/config', 'Magento_Ui/js/modal/modal', 'mage/translate' ], function($, mgsConfig, modal) { |
Utiliser la fonction $.mage.__('<chaîne de caractères>');
|
1 2 3 4 5 6 7 |
$(document).on("click","#product-addtocart-button",function() { var $_this = jQuery(this); var form = jQuery('#product_addtocart_form'); var isValid = form.valid(); if(isValid){ // $_this.text("Adding..."); $_this.text($.mage.__('Adding...')); |
ATTENTION: les clés de traduction sont sensibles à la casse. Respectez les minuscules/majuscules! Exemple d’un cas que j’ai dû déboguer:
|
1 2 3 |
success: function(response, status) { // $_this.text("Add to cart"); $_this.text($.mage.__('Add to Cart')); |
Note: il est également possible de déclarer un alias pour la fonction $.mage.__('<chaîne de caractères>');. Exemple:
|
1 2 3 4 5 |
require([ 'mage/translate' ], function($t) { ... $t('Add to Cart'); |
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:
|
1 |
<dt class="item-title"><span data-bind="text: $data"></span></dt> |
…par:
|
1 |
<dt class="item-title"><span data-bind="i18n: $data"></span></dt> |
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:
|
1 2 3 |
php bin/magento setup:upgrade php bin/magento setup:static-content:deploy php bin/magento cache:clean |
…et si vous utilisez Grunt:
|
1 2 3 4 |
grunt less && grunt watch rm -rf pub/static/*; rm -rf var/view_preprocessed/* php bin/magento setup:upgrade php bin/magento cache:clean |
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):
|
1 |
rm -rf pub/static/*; rm -rf var/view_preprocessed/* |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
// from: app/design/frontend/Mgs/supro/supro/web/css/mgs_theme.less /* Update Ajax Loading Cart */ .products-grid .items .product-item .product-item-info { &.adding-cart-text { .product-top { &.loading-ajax{ .product-item-inner { .action.tocart { &:before { content: "Ajout en cours..."; } } } } } } } .lookbook-container .popup__content--product .product-details { &.adding-cart-text { .action.tocart.tocart-loading { &:after { content: "Ajout en cours..."; } } } } .catalog-product-view .product-info-main .box-tocart, .catalog-product-view .block-bundle-summary .box-tocart { &.adding-cart-text { .action.tocart.tocart-loading { &:after { content: "Ajout en cours..."; } } } } // end: app/design/frontend/Mgs/supro/supro/web/css/mgs_theme.less |