How to extend mage.catalogAddToCart widget in Magento 2.2

by Paras Sood   Last Updated January 13, 2018 21:09 PM

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



Answers 1


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

  3. In the theme's requirejs-config.js add:

    var config = { "map": { "*": { "customAddToCart": "js/custom-add-to-cart", } } };

  4. 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;

});

Paras Sood
Paras Sood
January 13, 2018 20:38 PM

Related Questions



Add to cart url do not work

Updated April 25, 2016 08:03 AM