Зміна тексту кнопки "Додати в кошик" у Magento 2.1.0 (переопределення js-файлу)


13


Я змінив текст "Додати в кошик" на "Я хочу це" шляхом зміни " vendor\magento\module-catalog\view\frontend\templates\product\list.phtml".
Але коли я натискаю кнопку "Я хочу це" (тобто "Додати в кошик"), продукт додається у кошик, а потім знову з'являється текст "Додати в кошик".

Я думаю, що продукт додається через дзвінок ajax, тому недавно доданий текст не відображається після виклику Ajax, а текст "Додати в кошик".

Я спробував це:

Я створив спеціальне розширення Ved_Mymodule .

Я перевірив, що розширення активне.

Після цього я виконував наступні кроки:

app / code / Ved / Mymodule / view / frontend / Requjs-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;
});

Я намагаюся надрукувати фіктивні повідомлення в консолі.

Після цього: я запустив статичний вміст розгортання. Повторно налаштуйте дані. Кеш очищений і промитий.

Але зміни не з’являються.


Перейменуйте requirejs-config.jsта виправте місцезнаходження app/code/Ved/Mymodule/view/frontend/requirejs-config.js.
Khoa TruongDinh

Як ви сказали, зміни вносяться, але успіху досі немає. Але якщо я перекрию тему, то вона працює.
вiд

Відповіді:


10

Ви повинні замінити 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

Ви повинні змінити текст, який ви хочете, з цього файлу.

Повідомте мене, якщо у вас є запити.


Дуже дякую, це спрацювало. Раніше я намагався змінити це за допомогою спеціального модуля (про це я вже згадував у своєму запитанні), але це не вийшло. Скопіювавши файл на мою тему, він спрацював. Але не забувайте робити fire: php bin / magento setup: upgrade
vedu

@Suresh Chikani, чому js краще, ніж перекладач мови?
Birjitsinh Zala

Деякий час код перекладу CSV не працює. У цьому випадку вам доведеться перейти до тексту JS.
Суреш Чікані

7

вам потрібно перекрити, додати до каталогу-cart.js з шляху,

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

Текст змінюється звідси після виклику Ajax. ви можете змінити текст тут.


6

Текст змінився Javascript після виклику Ajax. Ми можемо поглянути:

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

Для найкращої практики слід використовувати mixinsдля "переосмислення":

Ми можемо створити модуль, а потім додати ці файли:

app / code / Постачальник / Модуль / view / frontend / Requjs-config.js

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

додаток / код / ​​Постачальник / Модуль / перегляд / frontend / web / 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;
        };
    });

Я спробував ваші кроки, але не досяг успіху. Я відредагував своє запитання зі своїм кодом.
вів

1
@Khoa TruongDinh Ідеально працює.
Віталій Барія

Це для мене працює.
55840

2

Примітка: наведене нижче було випробувано в 2.1.7


Перезавантаження будь-яких основних файлів вважається поганою практикою.

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

Якщо ви подивитесь (не редагуйте та не скопіюйте) файл каталогу-add-to-cart.js, ви побачите, що він приймає параметри.

vendor / magento / module-catalog / 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: ''
},

Далі відкрийте list.phtml у межах вашої теми

додаток / дизайн / frontend / Простір імен / тема / 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, але це може не відповідати вашим цілям, тому продовжуйте редагувати його тут безпосередньо.


2

Будь ласка, спробуйте це ... Щоб перекласти текст відповіді json "Додати в кошик", "Додавання ..." та "Додано", виконайте наведені нижче дії.

Крок 1: Для змін потрібна сторінка зі списком продуктів. Перейдіть до програми app / 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: Для змін потрібна сторінка перегляду товару. Перейдіть до програми app / 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: статичний контент: розгорнути en_US ja_JP zh_Hans_CN

  2. php bin / magento cache: flus я спробував це, і він працює на мене.


1

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

Це кращий підхід, оскільки він використовує оригінальну функціональність, а потім ви змінюєте те, що вам потрібно, а не копіювати все.

Просто переконайтеся, що вимагаєте цього у своєму користувальницькому каталозі, додайте до кошика JS, як показано в цьому прикладі.

Requjs-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, сподіваюся, це допоможе!


0

Зробити це за допомогою файлу CSV - це найкращий і найпростіший спосіб у Magento 2!

  1. Створіть у власному модулі папку i18n як:

    додаток / код / ​​Постачальник / Модуль / i18n

  2. Створіть тут файл en_US.csv і напишіть мітку, яку потрібно змінити як:

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

Приємно бачити інші відповіді :)

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.