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

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.

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.

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.

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;
        };
    });

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.

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.

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!

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 :)