Plugin Mechanism (4h)

A module can modify a method of a class from core or other module.

Config Plugin

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

For example: We plugin for MenuComponent

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

class HelloWorldConfig extends ModuleConfigAbstract{
    module = ['helloworld'];
    plugin = {
        component: {
            MenuComponent: {
                // method: plugin
                changeRoute: {
                    // name: plugin config
                    giftcard: {
                        sortOrder: 20,
                        disabled: false,
                        before: (item) => {
                            console.log('20 Before' + item.path);
                            return item;
                        },
                        around: (proceed, item) => {
                            console.log('20 Before Around' + item.path);
                            let result = proceed(item);
                            console.log('20 After Around' + item.path);
                            return result;
                        },
                        after: (result, item) => {
                            console.log('20 After' + item.path);
                            return result;
                        },
                    },
                    rewardpoint: {
                        sortOrder: 10,
                        disabled: true,
                        before: (item) => {
                            console.log('10 Before' + item.path);
                            return item;
                        },
                        around: (proceed, item) => {
                            console.log('10 Before Around' + item.path);
                            let result = proceed(item);
                            console.log('10 After Around' + item.path);
                            return result;
                        },
                        after: (result, item) => {
                            console.log('10 After' + item.path);
                            return result;
                        },
                    }
                },
            }
        }
    };
}

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);

Plugin Type and Running Order

Please read in Magento Plugin

Some important notes:

We use this to reference to original object of plugin class. So, we don't need $subject like Magento
Each plugin (after, before, around) is a function

Exercise: Use plugin to change all product image in product list to Magestore Logo

Dev Training Document

Plugin Mechanism (4h)

Analytics

Config Plugin

Plugin Type and Running Order

Related content