JS-события

Скрипты шаблона общаются через собственную шину событий EventHandler (файл assets/js/libs/event.js). Подписка на события позволяет реагировать на корзину, формы и подгрузку контента, а также менять параметры AJAX-запросов — без правки файлов шаблона.

Как подписаться

Подписывайтесь в файле assets/js/custom.js шаблона: он подключается последним и не перезаписывается при обновлении — подробнее в разделе «Свои скрипты и стили».

EventHandler.register(['FormHandler', 'action'], function (params) {
    console.log('Отправлена форма', params.type, params.data);
});

• Имя события состоит из двух частей: источник и событие. Их передают массивом ['FormHandler', 'action'] или строкой через вертикальную черту: 'FormHandler|action'.
• Обработчик получает один объект с параметрами события.
• Обработчики вызываются в порядке регистрации. EventHandler.fire() возвращает значение последнего обработчика — так работают настраивающие события ajax::options и data::<действие>.
• Если в момент события на него ещё никто не подписан, шина запоминает событие и вызовет обработчик сразу при подписке. Поэтому подписка из custom.js не пропустит события, которые сработали при загрузке страницы, — например, первый initScripts.
• Ошибка внутри обработчика перехватывается и выводится в консоль, но прерывает вызов следующих обработчиков этого события.

Список событий

Встроенная аналитика шаблона (цели Яндекс Метрики, электронная коммерция, пиксель VK) сама подписана на события action всех источников. Ваши обработчики работают параллельно с ней.

Примеры

Свой плагин на подгружаемом контенте

Каталог, фильтр и всплывающие окна подгружаются по AJAX. Чтобы ваш код работал и в подгруженных блоках, инициализируйте его в initScripts — внутри переданного блока, а не во всём документе:

EventHandler.register(['MainHandler', 'initScripts'], function (params) {
    params.parent.find('[data-my-tooltip]').each(function () {
        $(this).attr('title', $(this).data('my-tooltip'));
    });
});

Своя аналитика по отправке формы

EventHandler.register(['FormHandler', 'form:callback'], function (params) {
    // params.data — поля формы, params.result — ответ сервера
    if (typeof window.myAnalytics === 'object') {
        window.myAnalytics.track('callback_request');
    }
});

Реакция на добавление в корзину

EventHandler.register(['AjaxHandler', 'action'], function (params) {
    if (params.type === 'cart:add') {
        console.log('Товар добавлен', params.data, params.res);
    }
});

Данные и проверка перед своим действием

Обработчик data::<действие> решает, что отправить на сервер. Верните объект вида { 'действие': параметры } — отправится он; верните 'prevent' — действие отменится; ничего не верните — шаблон возьмёт параметры из атрибута data-params.

EventHandler.register(['AjaxHandler', 'data::promo:coupon'], function (params) {
    var email = $('#promo-email').val();
    if (!email) {
        PopupHandler.error('Укажите e-mail');
        return 'prevent';
    }
    return { 'promo:coupon': { email: email } };
});

Заголовок для всех AJAX-запросов

EventHandler.register(['AjaxHandler', 'ajax::options'], function (params) {
    return {
        headers: { 'X-Client-Version': '2' }
    };
});

Своя кнопка с AJAX-действием

Любой элемент с атрибутом data-ajaxaction отправляет действие на сервер по клику, а поле или список — при изменении. Параметры передаются в атрибуте data-params строкой JSON. Ответ на своё действие формируется в PHP-событии onAjaxResult:

<button type="button" class="btn" data-ajaxaction="promo:coupon" data-params='{"code":"SPRING"}'>
    Получить купон
</button>

Если в ответе есть message, шаблон покажет всплывающее окно — успешное при success: true. Кнопки в подгруженном по AJAX контенте подключаются автоматически.

Полезные объекты шаблона