Magento 2 JavaScript Mixins: Types, Scopes, and Best Practices

Introduction

Magento 2 JavaScript Mixins provide one of the most effective ways to customize Magento JavaScript functionality without modifying core files. One of the most effective methods for JavaScript customization is using JavaScript Mixins.

A Mixin allows developers to extend or modify existing JavaScript modules while keeping the original code untouched. This approach ensures your customizations remain upgrade-safe and easier to maintain.

In this blog, you’ll learn:

• What JavaScript Mixins are
• The different Mixin scopes
• How to declare a Mixin
• The four common types of Mixins
• How to replace an existing Mixin
• Best practices for working with Mixins

---

What Are Magento 2 JavaScript Mixins?

A JavaScript Mixin is a Magento 2 feature that lets you add, extend or override the functionality of an existing JavaScript module without editing the original file.

Instead of modifying Magento’s core JavaScript, you create a separate Mixin file that is automatically merged with the original module when it loads.

Benefits of Using Mixins

• No modifications to Magento core files
• Upgrade-safe customizations
• Cleaner and more maintainable code
• Can be implemented in both modules and themes

---

Why Mixins Instead of Editing Core Files?

Let’s consider a real-world scenario. You’re asked to customize the Checkout page. The client wants additional validation before customers can proceed. You have two options.

Option 1: Edit or Copy the Core File

Copy the whole JavaScript file to the theme and update the necessary changes; it works immediately. On the next upgrade of the module/magento, the developer is not sure how to update the file or what has changed.

Now you must compare files, reapply changes, test everything again, and hope nothing else breaks.

Option 2: Use a JavaScript Mixin

Create a JavaScript Mixin. Magento loads your custom logic alongside the original module. Core files remain untouched.

Future upgrades become dramatically easier. The customization continues to work with minimal maintenance.

Which approach would you choose?

That’s why experienced Magento developers rarely modify core JavaScript directly.

Instead, they rely on Mixins to build upgrade-friendly customizations.

“Good developers write code that works. Great developers write code that continues to work after the next update.”

---

Magento 2 JavaScript Mixin Scope

Mixins can be created inside either a custom module or a theme. Their scope depends on where they are placed inside the view directory.

Mixin JavaScript files should be placed in the following directory: app/code/Vendor/Module/view/<scope>/web/js/mixins/

Where <scope> can be:

• Frontend
• Adminhtml
• Base

Each scope also requires its own requirejs-config.js file: app/code/Vendor/Module/view/<scope>/requirejs-config.js

---

How to Declare JavaScript Mixins

Mixins are declared inside the requirejs-config.js file.

File: app/code/Mandy/Mixin/view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {

            // Extend UI Component
            'Magento_Checkout/js/view/summary/totals': {
                'Mandy_Mixin/js/mixins/totals-mixin': true
            },

            // Extend JS Object
            'Magento_Checkout/js/model/shipping-save-processor': {
                'Mandy_Mixin/js/mixins/save-processor-mixin': true
            },

            // Extend JS Function
            'Magento_Checkout/js/action/select-shipping-method': {
                'Mandy_Mixin/js/mixins/select-shipping-method-mixin': true
            }
        }
    }
};

Once registered, Magento automatically loads the Mixin whenever the original JavaScript module is loaded.

---

Types of Magento 2 JavaScript Mixins

Extend UI Component

This type is used to customize Knockout-based UI Components by extending the original component.

Original File : vendor/magento/module-checkout/view/frontend/web/js/view/summary/totals.js

Create Mixin : app/code/Mandy/Mixin/view/frontend/web/js/mixins/totals-mixin.js

Note: Register this Mixin in view/frontend/requirejs-config.js For more information, see  the  How to Declare JavaScript Mixins section

define([], function () {
    'use strict';

    let Totals = {
        isFullMode: function () {
            return true;
        }
    };

    return function (target) {
        return target.extend(Totals);
    };
});

Key Notes

• target represents the original UI Component.
• extend() merges new methods into the component.
• this._super() can be used to call the parent implementation.

---

Extend jQuery Widget

Use this type to customize Magento jQuery widgets such as Modal, Accordion, Calendar, and Dropdown.

Original File : vendor/magento/module-ui/view/base/web/js/modal/modal.js

Create Mixin : app/code/Mandy/Mixin/view/base/web/js/mixins/modal-mixin.js

Note: Register this Mixin in view/base/requirejs-config.js . For more information, see  the  How to Declare JavaScript Mixins section

define(['jquery'], function ($) {
    'use strict';

    let customWidget = {
        options: {
            optionInfo: "This is Testing Message",
            closeConfirmation: 'This is close confirmation'
        },

        openModal: function () {
            alert(this.options.optionInfo);
            return this._super();
        },

        closeModal: function () {
            if (!confirm(this.options.closeConfirmation)) {
                return this.element;
            }

            return this._super();
        }
    };

    return function (target) {
        $.widget('mage.modal', target, customWidget);
        return $.mage.modal;
    };
});

---

Extend JavaScript Function

Use mage/utils/wrapper to execute custom logic before or after a standalone JavaScript function.

Original File : vendor/magento/module-checkout/view/frontend/web/js/action/select-shipping-method.js

Create Mixin : app/code/Mandy/Mixin/view/frontend/web/js/mixins/select-shipping-method-mixin.js

Note: Register this Mixin in view/frontend/requirejs-config.js . For more information, see  the  How to Declare JavaScript Mixins section

define(['mage/utils/wrapper'], function (wrapper) {
    'use strict';

    return function (target) {
        return wrapper.wrap(target, function (originalFunction, shippingMethod) {

            if (shippingMethod && shippingMethod.carrier_title) {
                alert('You selected ' + shippingMethod.carrier_title);
            }

            return originalFunction(shippingMethod);
        });
    };
});

---

Extend JavaScript Object

This approach enhances or overrides methods in Magento JavaScript models or processors.

Original File : vendor/magento/module-checkout/view/frontend/web/js/model/shipping-save-processor.js

Create Mixin :app/code/Mandy/Mixin/view/frontend/web/js/mixins/save-processor-mixin.js

Note: Register this Mixin in view/frontend/requirejs-config.js . For more information, see  the  How to Declare JavaScript Mixins section

define(['mage/utils/wrapper', 'jquery'], function (wrapper, $) {

    return function (processor) {
        processor.saveShippingInformation = wrapper.wrap(
            processor.saveShippingInformation,
            function (originalFunction) {

                if (!confirm('Are you OKay?')) {
                    console.log('You clicked Cancel');
                    return $.Deferred().reject().promise();
                }

                return originalFunction.apply(this, arguments);
            }
        );

        return processor;
    };
});

---

Overwriting an Existing Mixin

If another module has already declared a Mixin for the same JavaScript module, you can replace it by disabling the existing Mixin and registering your own.

Step 1: Set Module Dependency

File : app/code/Mandy/MixinMixin/etc/module.xml

<module name="Mandy_MixinMixin">
    <sequence>
        <module name="Mandy_Mixin"/>
    </sequence>
</module>

Step 2: Disable the Existing Mixin

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/model/shipping-save-processor': {
                'Mandy_Mixin/js/mixins/save-processor-mixin': false,
                'Mandy_MixinMixin/js/mixins/disable-save-processor-mixin': true
            }
        }
    }
};

---

Best Practices

When working with JavaScript Mixins, keep the following recommendations in mind:

• Keep each Mixin focused on a single responsibility.
• Place Mixins in the correct scope (frontend, adminhtml, or base).
• Use this._super() or wrapper.wrap() when extending existing functionality.
• Clear Magento cache and deploy static content after making changes.
• Test your customization thoroughly before deploying to production.

“The best customization is the one another developer can understand six months later.”

---

Conclusion

JavaScript Mixins provide a powerful and flexible way to customize Magento 2 JavaScript without modifying core files.

By understanding the different Mixin scopes and choosing the appropriate Mixin type whether it’s a UI Component, jQuery Widget, JavaScript Function, or JavaScript Object you can create clean, maintainable, and upgrade-safe customizations.

Using JavaScript Mixins is the recommended approach for extending Magento JavaScript while ensuring compatibility with future Magento updates.