Hook Development Guide

Introduction

InnoShop's Hook mechanism is a highly flexible extension tool that draws on the design philosophy of the WordPress plugin architecture. This mechanism empowers developers to easily integrate and extend system functionality in the form of plugins, while maintaining the integrity of the original system code, covering various aspects such as data processing, process control, and template rendering.

In the InnoShop system, the fire operation refers to the activation or triggering of specific Hook events, which are usually called internally within the system. Conversely, listen refers to the monitoring and response to these events, which typically requires developers to explicitly bind corresponding processing logic or actions in the plugin.

In short, methods starting with fire_ are called by the InnoShop system; while methods starting with listen_ are called by plugins.

Overview of Hook Types

Data Hook (Filter)

Data Hooks focus on modifying the data returned by specific methods in the system. It provides a mechanism that allows developers to capture and adjust output data.

• fire_hook_filter: The InnoShop system internally calls this function to trigger data filtering.
• listen_hook_filter: Plugins use this function to listen and modify data.

Process Hook (Action)

Process Hooks are used to perform actions in specific processes of the system, such as order processing, user registration, etc.

• fire_hook_action: The InnoShop system internally calls this function to trigger process operations.
• listen_hook_action: Plugins use this function to listen to process events and intervene at the appropriate time.

Template Hook (Blade)

Template Hooks allow developers to modify the content of Blade templates, providing a way to add or change content on the existing interface.

• listen_blade_insert: Plugins use this function to insert new content into Blade templates.
• listen_blade_update: Plugins use this function to update existing content in Blade templates.

Hook Usage Examples

Data Hook Example

Imagine you want to add a new menu item to the top navigation menu of the website. With listen_hook_filter, you can easily achieve this:

listen_hook_filter('global.header.menus', function ($data) {
    $data[] = [
        'name' => 'InnoShop Homepage',
        'link' => 'https://www.innoshop.cn', 
    ];
    return $data;
}, 0);

Process Hook Example

Suppose you need to send order information to WeChat Work or DingTalk after the user completes the order, or push it to the ERP system. Using listen_hook_action can meet this need:

listen_hook_action('front.checkout.confirm.after', function ($data) {
    // Send information to WeChat Work, DingTalk, or push to the ERP system after order generation
}, 0);

Template Hook Example

If you want to add some text before the telephone display at the top of the page, you can achieve it through listen_blade_update:

listen_blade_update('layouts.header.telephone', function ($output, $data) {
    return 'Phone:' . $output;
});

How to Listen to Hooks in Plugins

Listen to Hooks in the init method of the Boot class in the plugin, here is a specific example:

namespace Plugin\YourPlugin;

class Boot
{
    public function init()
    {
        listen_hook_action('front.checkout.confirm.after', function ($data) {
            // Send information to WeChat Work, DingTalk, or push to the ERP system after order generation
        }, 0);
    }
}

Hook Usage in Blade Templates

Insert Content (@hookinsert)

In InnoShop's Blade templates, the @hookinsert directive is used to insert content at a specified location.

If the system-provided template tags do not meet the requirements, you can enrich them by submitting a Pull Request (PR).

Example:

In the /innopacks/front/resources/views/layouts/header.blade.php template, you can see the following code:

@hookinsert('layout.header.top')

Then define the content to be inserted in the plugin:

listen_blade_insert('layout.header.top', function ($data) {
    return 'Inserted dynamic content';
});

Update Content (@hookupdate and @endhookupdate)

In Blade templates, the @hookupdate and @endhookupdate directives can be used to wrap content that needs to be updated.

Example:

In the same header.blade.php template, you can use it like this:

@hookupdate('layouts.header.telephone')
<span><i class="bi bi-telephone-outbound"></i> {{ system_setting('telephone') }}</span>
@endhookupdate

Then modify or replace the content in the tag in the plugin:

listen_blade_update('layouts.header.telephone', function () {
    return '<span>Updated content display</span>';
});

Conclusion

InnoShop's Hook mechanism greatly enhances the system's extensibility and customizability. Through this guide, developers can gain a deeper understanding of the working principles and application scenarios of Hooks, thereby using them more freely in plugin development to implement various innovative business needs.