Magento 2.2 – How to Extend mage.catalogAddToCart Widget

addtocartmagento2.2

Tried to extend mage.catalogAddToCart by following the steps here:
http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/js_practice.html

However, it didn't work

Best Answer

The reason that this way using the alias

catalogAddToCart

does not work is because in templates/product/view/addtocart.phtml

Magento uses a validation widget to help with product validation which also plugs the add to cart form's submit handler.While, following the dev docs instructions one might use the Alias to try and extend the widget, Magento invokes the widget internally.

{
    "#product_addtocart_form": {
        "Magento_Catalog/js/validate-product": {}
    }
}

To make it work correctly so the validations aren't lost, follow the steps below:

  1. addtocart.phtml should have

    { "#product_addtocart_form": { "js/custom-validate-product": {} } }

  2. create a new file js/custom-validate-product like this:

    define([
        'jquery',
        'mage/mage',
        'Magento_Catalog/product/view/validation',
        'customAddToCart'
        ], function ($) {
        'use strict';
        
        $.widget('mage.productValidate', {
            options: {
                bindSubmit: false,
                radioCheckboxClosest: '.nested'
            },
            
            /**
                * Uses Magento's validation widget for the form object.
                * @private
            */
            _create: function () {
                var bindSubmit = this.options.bindSubmit;
                
                this.element.validation({
                    radioCheckboxClosest: this.options.radioCheckboxClosest,
                    
                    /**
                        * Uses catalogAddToCart widget as submit handler.
                        * @param {Object} form
                        * @returns {Boolean}
                    */
                    submitHandler: function (form) {
                        var jqForm = $(form).customAddToCart({
                            bindSubmit: bindSubmit
                        });
                        
                        jqForm.customAddToCart('submitForm', jqForm);
                        
                        return false;
                    }
                });
            }
        });
        return $.mage.productValidate;
    });
  1. In the theme's requirejs-config.js add:
    var config = {
        "map": {
            "*": {
                "customAddToCart": "js/custom-add-to-cart",
            }
        }
    };
  1. Finally you can add the file custom-add-to-cart.js and modify the behavior of mage.catalogAddToCartWidget
    define([
        "jquery",
        "Magento_Catalog/js/catalog-add-to-cart"
        ], function ($, $t) {
        "use strict";
        
        $.widget('ebow.customAddToCart', $.mage.catalogAddToCart, {
            options: {
                processStart: null,
                processStop: null,
                bindSubmit: true,
                minicartSelector: '[data-block="minicart"]',
                messagesSelector: '[data-placeholder="messages"]',
                productStatusSelector: '.stock.available',
                addToCartButtonSelector: '#product-addtocart-button',
                addToCartButtonDisabledClass: 'disabled',
                addToCartButtonTextWhileAdding: '',
                addToCartButtonTextAdded: '',
                addToCartButtonTextDefault: ''
            },
            
            _create: function () {
                if (this.options.bindSubmit) {
                    this._bindSubmit();
                }
            }
            
        });
        
        return $.ebow.customAddToCart;
    });
Related Topic