Use of Js Mixins in Magento 2

In this blog, we’ll explore what JS Mixins are, how they work in Magento 2, and step-by-step examples to implement them.

Magento 2 is a robust e-commerce platform that allows developers to customize the frontend and backend efficiently. One powerful feature in Magento 2’s frontend architecture is JavaScript Mixins.

They let you modify or extend core JavaScript functionality without overriding original files, making your code cleaner, modular, and upgrade-safe by use of JS Mixins in Magento 2.

What Are JS Mixins in Magento 2?

JavaScript Mixins are a way to extend or override the behavior of existing JavaScript modules in Magento 2.

Instead of rewriting core JS files, you can inject additional functionality or modify existing methods using Mixins.

Benefits of using JS Mixins:

• Upgrade-safe: You don’t touch core files, so Magento upgrades won’t break your customizations.
• Modular: Changes are isolated in separate modules for better maintainability.
• Reusable: Mixins can be reused across multiple components or modules.

How JS Mixins Work

Magento 2 uses RequireJS for its JavaScript module loading system. JS Mixins rely on RequireJS configuration to link your custom JS code with an existing Magento JS module.

Key points:

1. Mixins override or extend methods of an original JavaScript module.
2. Magento loads the Mixin after the original module, merging your custom functionality.
3. You can modify return values, call original methods, or add entirely new functionality.

Steps to Implement a JS Mixin in Magento 2

Step 1: You will need to create requirejs-config.js under app/code/Company/Module/view/frontend, like below:

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/action/set-shipping-information': {
                'Company_Module/js/action/set-shipping-information-mixin': true
            }
        } // this is how js mixin is defined
    }
};
// I am extending "Magento_Checkout/js/action/set-shipping-information" this js with our custom js "Company_Module/js/action/set-shipping-information-mixin".

Step 2: Create a set-shipping-information-mixin.js file under app/code/Company/Module/view/frontend/web/js/action to extend the original function.

So I am just appending some data to the shipping address, only for example, here is the code :

/*jshint browser:true jquery:true*/
 /*global alert*/
 define([
     'jquery',
     'mage/utils/wrapper',
     'Magento_Checkout/js/model/quote'
 ], function ($, wrapper, quote) {
     'use strict';

     return function (setShippingInformationAction) {

         return wrapper.wrap(setShippingInformationAction, function (originalAction) {
            var shippingAddress = quote.shippingAddress();
            console.log(shippingAddress['middlename']);
            if (shippingAddress['middlename'] === null) {
                shippingAddress['middlename'] = "middlename";
            }
            console.log(shippingAddress);
            // you can write here your code according to your requirement
            return originalAction(); // it is returning the flow to original action
        });
     };
 });

Step 3: If you console quote.shippingAddress() in js then the result will be as follows :

I hope this blog will help you with custom functionality in your Magento 2 Development.

You can also explore headless eCommerce development to develop high-quality interactive websites with the help of JavaScript frameworks.

For technical assistance, please get in touch with us via email at support@webkul.com.

Discover powerful solutions to enhance your Magento 2 store by exploring our Magento 2 plugins page.

Bring your vision to life with custom-built solutions—hire skilled Magento 2 developers today.
Happy Coding!!