Magento 2 Mixins

Reading Time: 2 minutes

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

], 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!

Beginners Level
An Intro To Using VueJS for Front End Development
Best Practices
Profiling on React Native apps
JQuery: How To Limit Two Decimal Digits
Copy link
Powered by Social Snap