Changing "Add to cart" button text in Magento 2.1.0 ( Overriding js file )

Question

I have changed "Add to cart" text to "I want this" by overriding "vendor\magento\module-catalog\view\frontend\templates\product\list.phtml".
But, when I click on "I want this" (i.e. "Add to cart" ) button, the product is added to the cart and then again "Add to cart" text appears on the button.

I think product is added via ajax call, that is why a newly added text is not displaying after the ajax call and "Add to cart" text is displaying.

I have tried this :

I have created a custom extension Ved_Mymodule.

I have checked that extension is active.

After that I followed these steps:

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

I am trying to print dummy messages in the console.

After this: I have run static content deploy. Reindex the data. Cache cleaned and flushed.

But changes are not appearing.

Answer 1

You have to override js file from path

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

To

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

You have to changes text which you want to from this file.

Let me know if you have any query.

Answer 2

you need to override, catalog-add-to-cart.js from path,

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

Text is changing from here after ajax call. you can change text here.

Answer 3

The text changed by Javascript after Ajax call. We can take a look:

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

For the best practice, should use mixins for "overriding":

We can create a module, and then add these files:

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

Answer 4

Note: the below has been tested in 2.1.7

---

Overriding any core files is considered bad practice.

You can simply pass parameters into catalogAddToCart function which can be found towards the bottom of list.phtml

If you look (don't edit or copy) at the catalog-add-to-cart.js file you'll see that it accepts parameters.

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: ''
},

Next open list.phtml within your theme

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

Towards the bottom of the page you'll find

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

Simply add parameters to the function...

<?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 my case I then added a translation for 'Add to Cart' within en_GB.csv but this might not be fit for your purpose so go ahead and edit it here directly.

Answer 5

Please try this... To translate the text of the "Add to cart","Adding..." and "Added" by json response follow below steps.

Step 1: For Changes need in Product list page. Go to file path app/design/frontend/Your_Theme_Namespace/Theme_Name/Magento_Catalog/templates/product/list.phtml and replace below code on line around 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>

Step 2: For changes need Product view page. Go to file path app/design/frontend/Your_Theme_Namespace/Theme_Name/Magento_Catalog/templates/product/view/addtocart.phtml and replace code on line around 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>

Run below commands:

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

2. php bin/magento cache:flush I have try this and it's working for me.

Answer 6

You can extend the catalog add to cart instead of overriding the entire file. This will allow you to override certain functions and add in custom options to suit your needs - it looks like you want to do this.

This is a better approach as it uses the original functionality and then you change what you need rather than copying everything.

Just make sure to require it within your custom catalog add to cart JS as shown in this example.

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

I've used this solution successfully to edit the cart JS, hope this helps!

Answer 7

Doing it by CSV file is the best and simplest way in Magento 2!

1. Create folder i18n in your custom module as:

   app/code/Vendor/Module/i18n

2. Create here file en_US.csv and write Label that you want to change as:

   "Add to Cart","Custom Label"
   

You can change pretty good number of labels by this way like:

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

Good to see other answers :)

Answer 8

Add this code in app/design/frontend/theme/Magento_Catalog/templates/product/view/addtocart.phtml Change Buttontitle as you want.

<?php $buttonTitle = __('Add to Cart'); ?>
<?php if ($_product->isSaleable()) :?>
<div class="box-tocart">
    <div class="fieldset">
        <?php if ($block->shouldRenderQuantity()) :?>
        <div class="field qty">
            <label class="label" for="qty"><span><?= $block->escapeHtml(__('Qty')) ?></span></label>
            <div class="control">
                <input type="number"
                       name="qty"
                       id="qty"
                       min="0"
                       value="<?= $block->getProductDefaultQty() * 1 ?>"
                       title="<?= $block->escapeHtmlAttr(__('Qty')) ?>"
                       class="input-text qty"
                       data-validate="<?= $block->escapeHtmlAttr(json_encode($block->getQuantityValidators())) ?>"
                       />
            </div>
        </div>
        <?php endif; ?>
        <div class="actions">
            <button type="submit"
                    title="<?= $block->escapeHtmlAttr($buttonTitle) ?>"
                    class="action primary tocart"
                    id="product-addtocart-button" disabled>
                <span><?= $block->escapeHtml($buttonTitle) ?></span>
            </button>
            <?= $block->getChildHtml('', true) ?>
        </div>
    </div>
</div>
<?php endif; ?>