Recently I came across a strange word "Mixin". Got to know that it is something related to "has-a-relationship" in OOPS. A class can be utilized without inheriting it but by having its object in another class. This is very clear. Coming to Magento 2, I have seen many articles which are relating this term to javascript, CSS Less etc.

I am curious to know the application of "mixins" in Magento 2. I can understand that as it is related to OOPs it can apply everywhere but what is the situation or a real time scenario where this will be more helpful and meaningful?

  • Hi @Teja may I know please why the last line was removed? Apr 2 '18 at 14:57
  • Hello Kalyan, The description which you have explained above is enough. So i removed the thing Apr 3 '18 at 11:47

In terms of javascript, the mixin approach allows to modify (extend/overwrite) result that a JavaScript component returns before it is used anywhere.

In my case, I needed to add a function called getBgColor in order to change the backgound and the font color of the grid element.

see my exemple:

'prototype'], function (listing, prototype) {
'use strict';

var mixin = {

    defaults: {
        template: 'MyModule_ColorOrders/grid/listing'

     * Handler of the colors
    getBgColor: function (data) {

        if (typeof data.admin_color_order != 'undefined' || data.admin_color_order != null) {

            return {
                "backgroundColor": '#' + data.admin_color_order,
                "color": '#' + data.admin_color_order_text,


return listing.extend(mixin); });

You can see more examples at Magento DevDocs Js-Mixin

  • Feel free to set this answer as correct :P Feb 11 '18 at 16:44
  • Sure :) let me try please Feb 11 '18 at 17:02
  • Just to let you know, this code is just a part of an entire Color Orders extension. This snippet itself has no effective result at all. Feb 11 '18 at 17:04
  • Yes, I got it. Will use yours as a base and build my example. Feb 11 '18 at 17:06

magento 2 doing for checkout agreement

check below file for same:- https://github.com/magento/magento2/blob/2.2-develop/app/code/Magento/CheckoutAgreements/view/frontend/requirejs-config.js

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.