0

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

2

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;
    

    });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.