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? Commented Apr 2, 2018 at 14:57
  • Hello Kalyan, The description which you have explained above is enough. So i removed the thing Commented Apr 3, 2018 at 11:47

2 Answers 2


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 Commented Feb 11, 2018 at 16:44
  • Sure :) let me try please Commented Feb 11, 2018 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. Commented Feb 11, 2018 at 17:04
  • Yes, I got it. Will use yours as a base and build my example. Commented Feb 11, 2018 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 and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.