Magento – Magento 2 – Extend catalogAddToCart widget

addtocartmagento2requirejs-config.jswidgets

What i am trying to do is extend the catalogAddToCart widget so i can write some custom code without modifying the widget itself. So I've doen the requirejs file here:

Vendor/default/Magento_Catalog/requirejs-config.js

Inside of this is:

var config = {
map: {
    '*': {
        myAddToCart: 'Magento_Catalog/js/my-catalog-add-to-cart'
    }
}
};

And then added my js file to this locaiton:

Vendor/default/Magento_Catalog/web/js/my-catalog-add-to-cart.js

with the following in it:

define([
    'jquery',
    'mage/translate',
    'jquery/ui'
], function ($, $t) {
    'use strict';
    $.widget('myCatalogAddToCart', $.mage.catalogAddToCart, {
        open: function() {
            console.log( "open" );
        }

    });
});

I've then tried to call this widget in:

Vendor/default/Magento_Catalog/templates/product/view/addtocart.phtml

<script type="text/x-magento-init">
    {
        "#product_addtocart_form": {
            "Magento_Catalog/js/validate-product": {},
            "Magento_Catalog/js/my-catalog-add-to-cart":{}
        }
    }
</script>

However all i get from this, is an error!!

Uncaught TypeError: base is not a constructor at Function.$.widget

Im not 100% sure where i am going wrong, but something isn't right, obviously and I'm not sure what I have done wrong.

Any help?

Best Answer

try use mixins,

Create a module and add files as below:

app/code/Vendor/Module/view/frontend/requirejs-config.js

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

};

app/code/Vendor/Module/view/frontend/web/js/catalog-add-to-cart-mixin.js

define([
    'jquery'
],
function ($) {
    'use strict';
    return function (widget) {
        $.widget('mage.catalogAddToCart', widget, {
            /**
             * Handler for the form 'submit' event
             *
             * @param {Object} form
             */
            submitForm: function (form) {
                //add new functionality
                console.log('my code works.');
                var addToCartButton, self = this;

                if (form.has('input[type="file"]').length && form.find('input[type="file"]').val() !== '') {
                    self.element.off('submit');
                    // disable 'Add to Cart' button
                    addToCartButton = $(form).find(this.options.addToCartButtonSelector);
                    addToCartButton.prop('disabled', true);
                    addToCartButton.addClass(this.options.addToCartButtonDisabledClass);
                    form.submit();
                } else {
                    self.ajaxSubmit(form);
                }
            }
        });
        return $.mage.catalogAddToCart;
    }
});
Related Topic