Magento 2 Mixins

In this article, I will let you know how to use Mixins in Magento 2.

What is a Mixin?

“A Mixin is a language concept that allows a programmer to inject some coding into a class. Mixin programming is a style of software development in which units of functionality are created in a class, and then mixed in with other classes”. Extracted from Wikipedia

Let's get started

Let's imagine the following scenario; you want to perform an extra action or extend a Javascript functionality without completely overwriting it. First of all, You need to place the file require-config.js in the module where you want to extend that JS functionality as is shown in the following path app/code/Vendor/Module/view/frontend/

If it does not exist, You need to create it into the previously mentioned directory above.

To show in-depth the creation of a mixin, I will exemplify how to add a new action when adding a product to the cart in Magento 2 product view

Our file require-config.js should have the following content

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

Now let's create the file catalog-add-to-cart-mixin.js. That will extend the JS functionality in the following directory Vendor/Module/view/frontend/web/js/catalog-add-to-cart-mixin.js. Use the following content

define([
], function () {
    'use strict';
    return function (widget) {
        $.widget('mage.catalogAddToCart', widget, {
            /**
             * Handler for the form 'submit' event
             *
             * @param {jQuery} form
             */
            submitForm: function (form) {
                this.ajaxSubmit(form); // original code
                this.doSomething(); // add every thing you want
            },
            /**
             * Do something
             */
            doSomething: function () {
                // Do stuff
            },
        });
        return $.mage.catalogAddToCart;
    }
});

Wrapping up

Mixins help you to modify features for special and more specific uses of your e-commerce. Remember that you have them as part of your ‘Swiss army knife’!

Keep reading and Happy coding!