UniversalEventBus - обмен событиями между сервером и фронтом

Приветствую! Если у вас возникала потребность выполнить какое-то действие на фронте, при возникновении события на сервере и при этом требовалось много дополнительных данных эта утилита вам поможет.

Как работает: вы создаёте плагин, который будет отслеживать интересующие вас события, при этом компонент будет собирать данные: о пользователе ($output['userData']), о корзине ($output['cartData']), о заказе ($output['orderData']) если указан id, о товарах ($output['productsData']), о странице с которой пришёл запрос ($output['pageData']) и немного вспомогательной информации: название события, идентификатор события, и отправлять их на фронт, где эти данные можно получить добавив обработчик события eventbus. Кроме того, если вы добавили на страницу атрибут data-ueb-event, то компонент будет отправлять браузерные события на сервер, собирать данные и возвращать ответ, при этом пользователь может перейти на другую страницу и получить ответ там. В дополнение к стандартным событиям можно отслеживать показ/скрытие элемента в области просмотра, открытие/закрытие модальных окон.

Как пользоваться:
1. Создать в админке плагин с любым именем и подключить его к нужным событиям.

use UniversalEventBus\Services\EventBus;

$basePath = $modx->getOption('base_path', null, $_SERVER['DOCUMENT_ROOT'] . '/');
require_once $basePath . 'core/components/universaleventbus/services/vendor/autoload.php';

$eventBus = new EventBus($modx, $srcriptProperties);
$eventBus->sendEvent($modx->event->name);

2. В JavaScript нужно ловить событие «eventbus» и в обработчике выполнять необходимое действие.

document.addEventListener('eventbus', (event) => {
    console.log(event.detail.data);
});

3. Вы можете передавать на сервер информацию о браузерных событиях. Например, для передачи на сервер информации о клике по ссылке

<a href="{$uri}" data-ueb-event="click" data-ueb-once="1" data-ueb-params="rid:{$id};eventName:productClick">{$menutitle}</a>

Атрибут data-ueb-once указывает на то, что событие будет отправлено только один раз.

Доступны нестандартные значения для атрибута data-ueb-event:
— close/open — установите его элементам которые должны закрыться/открыться
— show/hide — установите его элементам которые должны появляться/исчезать (например при скролле)
При использовании событий close/open у целевых элементов должны меняться классы отвечающие за показ/скрытие
и эти классы надо перечислить в системных настройках.

В атрибуте data-ueb-params можно указать произвольные параметры, которые будут переданы в событие на сервер.

4. Вы можете добавить обработчик события eventbus:before:send и добавить любые данные для передачи на сервер

document.addEventListener('eventbus:before:send', (event) => {
       const {target, params} = event.detail;
       if(target.id === '#product-1') {
            params.append('product_id', 1);
       }
    });

Системные события:
— OnUebInit (после инициализации компонента): $EventBus
— OnBeforeUebHandleEvent (перед получением данные и добавления в очередь): $EventBus, $dispatch
— OnUebHandleEvent (после получения данных, но перед добавлением в очередь): $output, $EventBus
— OnUebGetProductsData (получение данных о товаре): $product, $EventBus.
— OnGetUebWebConfig (получение конфигурации фронтенда): $webConfig, $EventBus.

Вы можете отменить добавление события в очередь в плагине: $EventBus->dispatch = false.
Вы можете изменить данные перед отправкой в очередь в плагине: $EventBus->output = [];
Вы можете изменить данные товара в плагине: $EventBus->product = [];
Вы можете изменить конфигурации фронтенда в плагине: $EventBus->webConfig = [];
Вы можете изменить получателя в плагине: $EventBus->branch = 'branch_name';
Вы можете изменить получателя при инициализации: $EventBus = new EventBus($modx, ['branch' => 'branch_name']);

Для того, чтобы в данных была информация о модификациях, нужно передать на сервер id модификации в параметре mid
или опции в параметре options, по которым можно получить модификацию.