Modification du texte du bouton «Ajouter au panier» dans Magento 2.1.0 (remplacement du fichier js)


13


J'ai remplacé le texte "Ajouter au panier" par "Je le veux" en remplaçant " vendor\magento\module-catalog\view\frontend\templates\product\list.phtml".
Mais, lorsque je clique sur le bouton "Je veux ceci" (c'est-à-dire "Ajouter au panier"), le produit est ajouté au panier, puis à nouveau le texte "Ajouter au panier" apparaît sur le bouton.

Je pense que le produit est ajouté via l'appel ajax, c'est pourquoi un texte nouvellement ajouté ne s'affiche pas après l'appel ajax et le texte "Ajouter au panier" s'affiche.

J'ai essayé ceci:

J'ai créé une extension personnalisée Ved_Mymodule .

J'ai vérifié que l'extension est active.

Après cela, j'ai suivi ces étapes:

app / code / Ved / Mymodule / view / frontend / requirejs-config.js:

var config = {
    map: {
        '*': {
            catalogAddToCart:'Ved_Mymodule/js/customCatalogAddToCart'
        }
    }
};

app / code / Ved / Mymodule / view / frontend / web / js / customCatalogAddToCart.js:

define([
    'jquery',
    'mage/translate',
    'jquery/ui'
], function($, $t) {
    "use strict";

$.widget('Ved_Mymodule.customCatalogAddToCart',$.mage.catalogAddToCart, {

    //Override function
    disableAddToCartButton: function(form) {
        var addToCartButtonTextWhileAdding = this.options.addToCartButtonTextWhileAdding || $t('Adding...');
        var addToCartButton = $(form).find(this.options.addToCartButtonSelector);
        addToCartButton.addClass(this.options.addToCartButtonDisabledClass);
        addToCartButton.find('span').text(addToCartButtonTextWhileAdding);
        addToCartButton.attr('title', addToCartButtonTextWhileAdding);
        console.log('Hello 1');
    },

    enableAddToCartButton: function(form) {
        var addToCartButtonTextAdded = this.options.addToCartButtonTextAdded || $t('Added');
        var self = this,
            addToCartButton = $(form).find(this.options.addToCartButtonSelector);

        addToCartButton.find('span').text(addToCartButtonTextAdded);
        addToCartButton.attr('title', addToCartButtonTextAdded);

        setTimeout(function() {
            var addToCartButtonTextDefault = 'heya..'; //self.options.addToCartButtonTextDefault || $t('Add to Cart..');
            addToCartButton.removeClass(self.options.addToCartButtonDisabledClass);
            addToCartButton.find('span').text(addToCartButtonTextDefault);
            addToCartButton.attr('title', addToCartButtonTextDefault);
        }, 1000);

        console.log('Hello 2');
    }

});

return $.Ved_Mymodule.customCatalogAddToCart;
});

J'essaie d'imprimer des messages factices dans la console.

Après cela: j'ai exécuté le déploiement de contenu statique. Réindexez les données. Cache nettoyé et vidé.

Mais aucun changement n'apparaît.


Veuillez renommer requirejs-config.jset corriger l'emplacement app/code/Ved/Mymodule/view/frontend/requirejs-config.js.
Khoa TruongDinh

Des modifications sont apportées comme vous l'avez dit mais toujours pas de succès. Mais si je remplace via le thème, cela fonctionne.
vedu

Réponses:


10

Vous devez remplacer le fichier js du chemin

vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.js  

À

app/design/frontend/YourTheme/Packadge/Magento_Catalog/web/js/catalog-add-to-cart.js

Vous devez modifier le texte que vous souhaitez à partir de ce fichier.

Faites-moi savoir si vous avez des questions.


Merci beaucoup, cela a fonctionné. Auparavant, j'essayais de le remplacer en utilisant un module personnalisé (je l'ai mentionné dans ma question) mais cela ne fonctionnait pas. En copiant le fichier sur mon thème, cela a fonctionné. Mais n'oubliez pas de faire du feu: configuration de php bin / magento: mise à niveau
vedu

@Suresh Chikani pourquoi js est meilleur que le traducteur de langue?
Birjitsinh Zala

Parfois, le code de traduction CSV ne fonctionne pas. Dans ce cas, vous devez passer au texte JS.
Suresh Chikani

7

vous devez remplacer, catalog-add-to-cart.js à partir du chemin,

vendor/magento/module-catalog/view/frontend/web/js

Le texte change à partir d'ici après l'appel ajax. vous pouvez changer le texte ici.


6

Le texte a été modifié par Javascript après l'appel Ajax. Nous pouvons jeter un oeil:

fournisseur / magento / module-catalogue / view / frontend / web / js / catalog-add-to-cart.js

Pour la meilleure pratique, devrait utiliser mixinspour "remplacer":

Nous pouvons créer un module, puis ajouter ces fichiers:

app / code / Vendor / Module / view / frontend / requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Catalog/js/catalog-add-to-cart': {
                'Vendor_Module/js/catalog-add-to-cart-mixin': true
            }
        }
    }
};

application / code / fournisseur / module / vue / frontend / web / js / catalog-add-to-cart-mixin.js

define([
        'jquery',
        'mage/translate',
        'jquery/ui'
    ],
    function ($, $t) {
        'use strict';

        return function (target) {
            $.widget('mage.catalogAddToCart', target, {
                options: {
                    addToCartButtonTextWhileAdding: $t('Adding Testing...'),
                    addToCartButtonTextAdded: $t('Added Testing'),
                    addToCartButtonTextDefault: $t('Add to Cart Testing')
                }
            });

            return $.mage.catalogAddToCart;
        };
    });

J'ai essayé vos pas mais je n'ai pas réussi. J'ai édité ma question avec mon code.
vedu

1
@Khoa TruongDinh Fonctionnement parfait.
Vithal Bariya

Cela a fonctionné pour moi.
55840

2

Remarque: ce qui suit a été testé en 2.1.7


Remplacer tous les fichiers principaux est considéré comme une mauvaise pratique.

Vous pouvez simplement passer des paramètres dans la fonction catalogAddToCart qui se trouve vers le bas de list.phtml

Si vous regardez (ne modifiez pas ou ne copiez pas) le fichier catalog-add-to-cart.js, vous verrez qu'il accepte les paramètres.

fournisseur / magento / module-catalogue / view / frontend / web / js / catalog-add-to-cart.js

options: {
    processStart: null,
    processStop: null,
    bindSubmit: true,
    minicartSelector: '[data-block="minicart"]',
    messagesSelector: '[data-placeholder="messages"]',
    productStatusSelector: '.stock.available',
    addToCartButtonSelector: '.action.tocart',
    addToCartButtonDisabledClass: 'disabled',
    addToCartButtonTextWhileAdding: '',
    addToCartButtonTextAdded: '',
    addToCartButtonTextDefault: ''
},

Ouvrez ensuite list.phtml dans votre thème

app / design / frontend / Namespace / theme / Magento_Catalog / template / product / list.phtml

Vers le bas de la page, vous trouverez

<?php if (!$block->isRedirectToCartEnabled()) : ?>
    <script type="text/x-magento-init">
    {
        "[data-role=tocart-form], .form.map.checkout": {
            "catalogAddToCart": {}
            }
        }
    </script>
<?php endif; ?>

Ajoutez simplement des paramètres à la fonction ...

<?php if (!$block->isRedirectToCartEnabled()) : ?>
    <script type="text/x-magento-init">
    {
        "[data-role=tocart-form], .form.map.checkout": {
            "catalogAddToCart": {
                "addToCartButtonTextDefault" : "<?php /* @escapeNotVerified */ echo __('Add to Cart') ?>"
            }
        }
    }
    </script>
<?php endif; ?>

Dans mon cas, j'ai ensuite ajouté une traduction pour «Ajouter au panier» dans en_GB.csv, mais cela pourrait ne pas convenir à votre objectif, alors allez-y et modifiez-le ici directement.


2

Veuillez essayer ceci ... Pour traduire le texte des réponses "Ajouter au panier", "Ajouter ..." et "Ajouté" par json, suivez les étapes ci-dessous.

Étape 1: Pour les changements nécessaires dans la page Liste des produits. Accédez au chemin du fichier app / design / frontend / Your_Theme_Namespace / Theme_Name / Magento_Catalog / templates / product / list.phtml et remplacez le code ci-dessous en ligne vers 121

<script type="text/x-magento-init">
{
    "[data-role=tocart-form], .form.map.checkout": {
        "catalogAddToCart": {
            "product_sku": "<?php /* @escapeNotVerified */  echo $_product->getSku() ?>",
            "addToCartButtonTextDefault": "<?php echo __('Add to Cart'); ?>",
            "addToCartButtonTextWhileAdding": "<?php echo __('Adding...'); ?>",
            "addToCartButtonTextAdded": "<?php echo __('Added'); ?>"
        }
    }
 }
</script>

Étape 2: Pour les modifications, vous avez besoin de la page d'affichage du produit. Accédez au chemin du fichier app / design / frontend / Your_Theme_Namespace / Theme_Name / Magento_Catalog / templates / product / view / addtocart.phtml et remplacez le code en ligne vers 54

 <script>
    require([
        'jquery',
        'mage/mage',
        'Magento_Catalog/product/view/validation',
        'Magento_Catalog/js/catalog-add-to-cart'
    ], function ($) {
        'use strict';
        $('#product_addtocart_form').mage('validation', {
            radioCheckboxClosest: '.nested',
            submitHandler: function (form) {
                var widget = $(form).catalogAddToCart({
                    bindSubmit: false,
                    "addToCartButtonTextDefault": "<?php echo __('Add to Cart'); ?>",
                    "addToCartButtonTextWhileAdding": "<?php echo __('Adding...'); ?>",
                    "addToCartButtonTextAdded": "<?php echo __('Added'); ?>"
                });

                widget.catalogAddToCart('submitForm', $(form));

                return false;
            }
        });
    });
</script>

Exécutez les commandes ci-dessous:

  1. configuration de php bin / magento: contenu statique: déployer en_US ja_JP zh_Hans_CN

  2. php bin / magento cache: flush J'ai essayé ceci et ça marche pour moi.


1

Vous pouvez étendre le catalogue à ajouter au panier au lieu de remplacer le fichier entier. Cela vous permettra de remplacer certaines fonctions et d'ajouter des options personnalisées en fonction de vos besoins - il semble que vous souhaitiez le faire.

Il s'agit d'une meilleure approche car elle utilise la fonctionnalité d'origine, puis vous modifiez ce dont vous avez besoin plutôt que de tout copier.

Assurez-vous simplement de l'exiger dans votre catalogue personnalisé ajouter au panier JS comme indiqué dans cet exemple.

requirejs-config.js

var config = {
    map: {
        '*': {
            catalogAddToCart:'Ved_Mymodule/js/customCatalogAddToCart'
        }
    }
};

customCatalogAddToCart.js

define([
    'jquery',
    'mage/translate',
    'jquery/ui',
    'Magento_Catalog/js/catalog-add-to-cart' // Important, require the original!
], function($, $t) {
    'use strict';

    $.widget('Ved_Mymodule.catalogAddToCart', $.mage.catalogAddToCart, {
        options: {
            customOption: 'hello!'
        },

        enableAddToCartButton: function(form) {

            console.log('extended the original add to cart.');
            console.log('my new option', this.options.customOption);

        }
    });

    return $.Ved_Mymodule.catalogAddToCart;
});

J'ai utilisé cette solution avec succès pour éditer le panier JS, j'espère que cela vous aidera!


0

Le faire par fichier CSV est le moyen le plus simple et le plus simple de Magento 2!

  1. Créez le dossier i18n dans votre module personnalisé en tant que:

    application / code / fournisseur / module / i18n

  2. Créez ici le fichier en_US.csv et écrivez l'étiquette que vous souhaitez modifier comme:

    "Add to Cart","Custom Label"

Vous pouvez modifier un assez bon nombre d'étiquettes de cette façon, comme:

"Add to Cart","Add to Order"
"Go to Checkout","Complete Order"
"Shopping Cart","Current Order"
"Proceed to Checkout","Proceed to Confirm"
"Summary","Details"
"Estimate Shipping and Tax","Aproximate Sum"
"You added %1 to your shopping cart.","Successfully added %1 to your current order."
"Add Your Review","Add Review"

Bon de voir d'autres réponses :)

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.