Ändern des Schaltflächentexts "In den Warenkorb" in Magento 2.1.0 (Überschreiben der js-Datei)

Ich habe den Text "In den Warenkorb" in "Ich möchte dies" durch Überschreiben "geändert vendor\magento\module-catalog\view\frontend\templates\product\list.phtml.
Wenn ich jedoch auf die Schaltfläche "Ich möchte dies" (dh "In den Warenkorb") klicke, wird das Produkt in den Warenkorb gelegt und der Text "In den Warenkorb" wird erneut auf der Schaltfläche angezeigt.

Ich denke, das Produkt wird über einen Ajax-Aufruf hinzugefügt. Aus diesem Grund wird nach dem Ajax-Aufruf kein neu hinzugefügter Text und der Text "In den Warenkorb" angezeigt.

Ich habe das versucht:

Ich habe eine benutzerdefinierte Erweiterung Ved_Mymodule erstellt .

Ich habe überprüft, dass die Erweiterung aktiv ist.

Danach folgte ich diesen Schritten:

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

Ich versuche, Dummy-Nachrichten in der Konsole zu drucken.

Danach: Ich habe die Bereitstellung von statischem Inhalt ausgeführt. Indizieren Sie die Daten neu. Cache gereinigt und gespült.

Änderungen werden jedoch nicht angezeigt.

Sie müssen js file from path überschreiben

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

Zu

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

Sie müssen den gewünschten Text aus dieser Datei ändern.

Lassen Sie mich wissen, wenn Sie Fragen haben.

Sie müssen "catalog-add-to-cart.js from path" überschreiben.

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

Der Text ändert sich von hier nach dem Ajax-Aufruf. Hier können Sie den Text ändern.

Der Text wurde nach Ajax-Aufruf von Javascript geändert. Wir können einen Blick darauf werfen:

Hersteller / Magento / Modul-Katalog / Ansicht / Frontend / Web / JS / Katalog-Add-to-Cart.JS

Für die beste Vorgehensweise sollte mixinsfür "Überschreiben" verwendet werden:

Wir können ein Modul erstellen und dann diese Dateien hinzufügen:

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

app / code / Vendor / Modul / view / 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;
        };
    });

Hinweis: Das Folgende wurde in 2.1.7 getestet

Das Überschreiben von Core-Dateien wird als fehlerhaft angesehen.

Sie können einfach Parameter an die Funktion catalogAddToCart übergeben, die sich am Ende der Datei list.phtml befindet

Wenn du schaust die Datei catalog-add-to-cart.js (nicht bearbeiten oder kopieren), werden Sie feststellen, dass sie Parameter akzeptiert.

Hersteller / Magento / Modul-Katalog / Ansicht / Frontend / Web / JS / Katalog-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: ''
},

Öffnen Sie als Nächstes die Datei list.phtml in Ihrem Design

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

Am Ende der Seite finden Sie

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

Fügen Sie der Funktion einfach Parameter hinzu ...

<?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; ?>

In meinem Fall habe ich dann eine Übersetzung für 'In den Warenkorb' in en_GB.csv hinzugefügt , diese ist jedoch möglicherweise nicht für Ihren Zweck geeignet. Bearbeiten Sie sie also direkt hier.

Bitte versuchen Sie dies ... Um den Text der Antwort "In den Warenkorb", "Hinzufügen ..." und "Hinzugefügt" von json zu übersetzen, gehen Sie wie folgt vor.

Schritt 1: Für Änderungen in der Produktliste Seite. Gehen Sie zum Dateipfad app / design / frontend / Your_Theme_Namespace / Theme_Name / Magento_Catalog / templates / product / list.phtml und ersetzen Sie den folgenden Code in der Zeile um 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>

Schritt 2: Für Änderungen benötigen Sie die Produktansichtsseite. Gehen Sie zum Dateipfad app / design / frontend / Your_Theme_Namespace / Themenname / Magento_Catalog / templates / product / view / addtocart.phtml und ersetzen Sie den Code in der Zeile um 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>

Führen Sie die folgenden Befehle aus:

1. php bin / magento setup: static-content: deploy de_DE ja_JP zh_Hans_CN

2. PHP bin / Magento Cache: Flush Ich habe dies versucht und es funktioniert für mich.

Sie können den Katalog zum Warenkorb hinzufügen, anstatt die gesamte Datei zu überschreiben. Auf diese Weise können Sie bestimmte Funktionen außer Kraft setzen und benutzerdefinierte Optionen hinzufügen, die Ihren Anforderungen entsprechen - anscheinend möchten Sie dies tun.

Dies ist ein besserer Ansatz, da die ursprüngliche Funktionalität verwendet wird und Sie dann ändern, was Sie benötigen, anstatt alles zu kopieren.

Stellen Sie einfach sicher, dass es in Ihrem benutzerdefinierten Katalog in den Warenkorb JS erforderlich ist, wie in diesem Beispiel gezeigt.

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

Ich habe diese Lösung erfolgreich verwendet, um den Wagen JS zu bearbeiten, hoffe, das hilft!

In Magento 2 ist es die beste und einfachste Möglichkeit, dies per CSV-Datei zu tun!

1. Erstellen Sie den Ordner i18n in Ihrem benutzerdefinierten Modul als:

   App / Code / Hersteller / Modul / i18n

2. Erstellen Sie hier die Datei en_US.csv und schreiben Sie ein Label, das Sie ändern möchten als:

   "Add to Cart","Custom Label"

Sie können auf diese Weise eine ziemlich gute Anzahl von Bezeichnungen ändern:

"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"

Schön, andere Antworten zu sehen :)