Изменение текста кнопки «Добавить в корзину» в Magento 2.1.0 (переопределение файла js)

Я изменил текст "Добавить в корзину" на "Я хочу это" путем переопределения " vendor\magento\module-catalog\view\frontend\templates\product\list.phtml".
Но когда я нажимаю кнопку «Я хочу это» (т.е. «Добавить в корзину»), товар добавляется в корзину, а затем снова появляется текст «Добавить в корзину».

Я думаю, что продукт добавляется через вызов ajax, поэтому вновь добавленный текст не отображается после вызова ajax и отображается текст «Добавить в корзину».

Я пробовал это:

Я создал собственное расширение Ved_Mymodule .

Я проверил, что расширение активно.

После этого я выполнил следующие действия:

Приложение / код / ​​Ved / MyModule / просмотр / интерфейс / requirejs-config.js:

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

Приложение / код / ​​Ved / MyModule / вид / интерфейс / веб / 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;
});

Я пытаюсь напечатать фиктивные сообщения в консоли.

После этого: я запустил развертывание статического контента. Переиндексировать данные. Кеш чистил и промывал.

Но изменения не появляются.

Вы должны переопределить файл JS из пути

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

Вы должны изменить текст, который вы хотите из этого файла.

Дайте мне знать, если у вас есть запрос.

вам нужно переопределить catalog-add-to-cart.js из пути,

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

Текст меняется здесь после вызова ajax. Вы можете изменить текст здесь.

Текст, измененный Javascript после вызова Ajax. Мы можем посмотреть:

продавец / Magento / модуль-каталог / вид / интерфейс / веб / JS / каталог-дополнение к cart.js

Для лучшей практики следует использовать mixinsдля «переопределения»:

Мы можем создать модуль, а затем добавить эти файлы:

Приложение / код / ​​Vendor / модуль / просмотр / интерфейс / requirejs-config.js

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

Приложение / код / ​​Vendor / модуль / вид / интерфейс / веб / JS / каталог-дополнение к проселочному 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;
        };
    });

Примечание: ниже был протестирован в 2.1.7

Переопределение любых файлов ядра считается плохой практикой.

Вы можете просто передать параметры в функцию catalogAddToCart, которую можно найти внизу list.phtml.

Если вы посмотрите (не редактируете и не копируете) файл catalog-add-to-cart.js, вы увидите, что он принимает параметры.

продавец / Magento / модуль-каталог / вид / интерфейс / веб / JS / каталог-дополнение к 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: ''
},

Затем откройте list.phtml в вашей теме

приложение / дизайн / интерфейс / пространство имен / тема / Magento_Catalog / шаблон / продукта / list.phtml

В нижней части страницы вы найдете

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

Просто добавьте параметры в функцию ...

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

В моем случае я затем добавил перевод «Добавить в корзину» в en_GB.csv, но это может не подходить для вашей цели, так что продолжайте и отредактируйте его здесь напрямую.

Пожалуйста, попробуйте это ... Чтобы перевести текст "Добавить в корзину", "Добавление ..." и "Добавлено" по ответу json, выполните следующие действия.

Шаг 1: Для изменений нужно на странице списка товаров. Перейдите в путь к файлу приложения / design / frontend / Your_Theme_Namespace / Theme_Name / Magento_Catalog / templates / product / list.phtml и замените приведенный ниже код на строку около 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>

Шаг 2: Для внесения изменений нужна страница просмотра товара. Перейдите в путь к файлу приложения / design / frontend / Your_Theme_Namespace / Theme_Name / Magento_Catalog / templates / product / view / addtocart.phtml и замените код в строке около 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>

Запустите следующие команды:

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

2. php bin / magento cache: flush Я попробовал это, и это работает для меня.

Вы можете расширить каталог добавить в корзину вместо перезаписи всего файла. Это позволит вам переопределить определенные функции и добавить настраиваемые параметры в соответствии с вашими потребностями - похоже, вы хотите это сделать.

Это лучший подход, поскольку он использует оригинальную функциональность, и тогда вы меняете то, что вам нужно, а не копируете все.

Просто убедитесь, что он включен в ваш пользовательский каталог и добавлен в корзину JS, как показано в этом примере.

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

Я успешно использовал это решение для редактирования корзины JS, надеюсь, это поможет!

Делать это с помощью файла CSV - лучший и самый простой способ в Magento 2!

1. Создайте папку i18n в вашем пользовательском модуле как:

   Приложение / код / ​​Vendor / модуль / i18n

2. Создайте здесь файл en_US.csv и напишите Label, который вы хотите изменить как:

   "Add to Cart","Custom Label"

Вы можете изменить довольно большое количество меток следующим образом:

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

Рад видеть другие ответы :)