更改Magento 2.1.0中的“添加到购物车”按钮文本(覆盖js文件)


13


我已通过覆盖“ vendor\magento\module-catalog\view\frontend\templates\product\list.phtml” 将“添加到购物车”文本更改为“我想要这个”。
但是,当我单击“我想要这个”(即“添加到购物车”)按钮时,该产品即被添加到购物车,然后按钮上再次出现“添加到购物车”文本。

我认为产品是通过ajax调用添加的,这就是为什么在ajax调用后未显示新添加的文本并且显示“添加到购物车”文本的原因。

我已经试过了

我创建了一个自定义扩展Ved_Mymodule

我已检查该扩展程序是否处于活动状态。

之后,我按照以下步骤操作:

应用程序/代码/Ved/Mymodule/view/frontend/requirejs-config.js:

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

应用/代码/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'7

正如您所说的进行了更改,但仍然没有成功。但是,如果我通过主题覆盖,则它可以正常工作。
vedu 2016年

Answers:


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

您必须将想要的文本更改为此文件。

让我知道您是否有任何疑问。


非常感谢,它奏效了。以前,我试图通过使用自定义模块来覆盖它(我已经在问题中提到了它),但是它不起作用。通过将文件复制到我的主题就可以了。但不要忘记做火:php bin / magento setup:upgrade
vedu

@Suresh Chikani为什么js比语言翻译更好?
Birjitsinh Zala

一段时间CSV转换代码无法正常工作。在这种情况下,您必须更改为JS文本。
Suresh Chikani

7

您需要覆盖路径中的catalog-add-to-cart.js,

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

在ajax调用之后,文本将从此处更改。您可以在此处更改文本。


6

调用Ajax之后,文本由Javascript更改。我们可以看一下:

供应商/ magento /模块目录/视图/前端/web/js/catalog-add-to-cart.js

为了最佳实践,应使用mixins“覆盖”:

我们可以创建一个模块,然后添加以下文件:

应用/代码/供应商/模块/视图/前端/requirejs-config.js

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

应用程序/代码/供应商/模块/视图/前端/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;
        };
    });

我尝试了您的步骤,但没有成功。我已经用代码编辑了问题。
vedu 2016年

1
@Khoa TruongDinh完美的工作。
Vithal Bariya

这对我有用。
55840

2

注意:以下内容已在2.1.7中进行了测试


覆盖任何核心文件被认为是不好的做法。

您可以简单地将参数传递到catalogAddToCart函数中,该函数位于list.phtml的底部。

如果您查看(不要编辑或复制)catalog-add-to-cart.js文件,您会看到它接受参数。

供应商/ magento /模块目录/视图/前端/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

app / design / frontend / Namespace / theme / Magento_Catalog / template / product / 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:flush我已经尝试过了,对我有用。


1

您可以扩展添加到购物车的目录,而不是覆盖整个文件。这将允许您覆盖某些功能并添加适合您需要的自定义选项-看来您想这样做。

这是一种更好的方法,因为它使用了原始功能,然后您需要更改而不是复制所有内容。

只需确保在您的自定义目录中要求将其添加到购物车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,希望对您有所帮助!


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"

很高兴看到其他答案:)

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.