Mixin Mechanism (4h)

A module can add a method to a class from core or other module.

Config Mixin

In the module, we register a mixin in file etc/config.js.

For example: We add mixin for MenuComponent

import ModuleConfigAbstract from "../../ModuleConfigAbstract";

class HelloWorldConfig extends ModuleConfigAbstract{
    module = ['helloworld'];
    mixin = {
        component: {
            MenuComponent: {
                // new method name: mixin method implementation
                setOrder: function(order) {
                    this.order = order;
                    return this;
                },
                getOrder: function() {
                    return this.order;
                },
                // Static methods
                static: {
                    plus: function(a, b) {
                        return b + a;
                    }
                }
            }
        }
    };
}

export default (new HelloWorldConfig());

We have 7 type of class can be plugged in:

service
resource_model
repository
container
component
data_resource

To determine which type of class, we can find Factory type in source code. Example:

/**
 *
 * @type {MenuComponent}
 */
const component = ComponentFactory.get(MenuComponent);

Exercise:

Create 1 Mixin contain the function to alert the Grand total of order to order detail component
Use plugin, add button “Show Grand Total” to order detail component
When click that button, call the function in Mixin, show grand total of order

Dev Training Document

Mixin Mechanism (4h)

Analytics

Config Mixin

Related content