13


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.

Improve this question
2
  • Please rename requirejs-config.js and correct the location app/code/Ved/Mymodule/view/frontend/requirejs-config.js. Commented Jul 26, 2016 at 9:37
  • Changes are made as you said but still no success. But if I override via theme then it is working. Commented Jul 26, 2016 at 10:25

8 Answers 8

Reset to default
10

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.

Improve this answer
3
  • Thank you very much, it worked. Previously, I was trying to override it by using a custom module (I have mentioned it in my question) but it did not work. By copying file to my theme it worked. But do not forget do fire : php bin/magento setup:upgrade Commented Jul 26, 2016 at 10:11
  • @Suresh Chikani why js is better then language translater? Commented Dec 19, 2019 at 9:59
  • Some time CSV translate code not working. In this case you have to change to JS text. Commented Dec 19, 2019 at 15:04
7

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.

Improve this answer
0
7

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; }; });
Improve this answer
3
  • I tried your steps but did not get any success. I have edited my question with my code. Commented Jul 26, 2016 at 5:27
  • 1
    @Khoa TruongDinh Perfect working. Commented Feb 5, 2018 at 13:24
  • This is worked for me. Commented Sep 22, 2018 at 7:55
3

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.

Improve this answer
2

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.

Improve this answer
1

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!

Improve this answer
0

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 :)

Improve this answer
0

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; ?>
Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.