События и API темы дизайна

Тема Seller 2.0 предоставляет три механизма расширения: JavaScript API-модули, собственные JS-события и Smarty-хуки для плагинов. Все API доступны через глобальный объект window.waTheme.

Доступные API-модули

Подробная документация по каждому модулю — в соответствующих разделах.

События JavaScript

Тема генерирует собственные события (CustomEvent), на которые можно подписаться из своего кода — например, для отслеживания целей Яндекс.Метрики. События корзины, избранного, сравнения, ленивой подгрузки и обновления списка товаров в категории отправляются на document; события товара — на элементе товара с bubbles: true, поэтому их тоже можно ловить на document.

Пример: цели Яндекс.Метрики

Код можно разместить в блоке site.{имя_темы}_js (Сайт — Блоки) — он подключается перед закрывающим тегом </body>:

{literal}
<script>
document.addEventListener('cart:changed', (event) => {
    if (event.detail.action === 'added') {
        // добавление товара в корзину
        // 00000000 - номер счетчика, addToCart - цель
        ym(00000000, 'reachGoal', 'addToCart');
    }
});

document.addEventListener('wishlist:changed', (event) => {
    if (event.detail.action === 'added') {
        // добавление товара в избранное
    }
});

document.addEventListener('compare:changed', (event) => {
    if (event.detail.action === 'added') {
        // добавление товара в сравнение
    }
});
</script>
{/literal}

Встроенные цели Метрики без кода

Для типовых целей писать JavaScript не обязательно: в настройках темы есть группа «Цели Яндекс.Метрики». Укажите «Номер счётчика Яндекс.Метрики» и идентификаторы целей в полях:

• «Добавление товара в корзину»

• «Добавление товара к сравнению»

• «Добавление товара в избранное»

• «Начало оформления заказа»

• «Успешное оформление заказа»

Тема отправит эти цели самостоятельно.

Кроме собственных событий, тема использует события компонентов Preline UI (open.hs.overlay, close.hs.overlay и другие) — они описаны в статье «События Preline».

Хуки темы дизайна (Smarty)

Хуки позволяют плагинам добавлять свой функционал в различные части интерфейса темы. В шаблонах места вывода помечены аннотациями вида {* @event имя_хука.%plugin_id% *}. Ниже перечислены все доступные хуки по приложениям; в именах хуков * — идентификатор плагина.

Обратите внимание: основные шаблоны (head.html, header.html, footer.html и т.д.) лежат в корне темы соответствующего приложения, а не в папке html/.

Shop (Магазин) — 18 хуков

Общие элементы страницы

Главная страница

Категории и поиск

Карточка товара

Корзина и оформление заказа

Заказы

Личный кабинет

Blog (Блог) — 10 хуков

Общие элементы

Вместо <тип> подставляется тип страницы: default, post, page, error.

Посты

Комментарии

Photos (Фотогалерея) — 10 хуков

Общие элементы

Коллекции и альбомы

Страница фотографии

Hub — 17 хуков

Общие элементы

Списки и поиск

Топики

Создание и редактирование топика

Другие приложения

Хуки в блоках конструктора (Site)

Блоки конструктора темы в приложении «Сайт» также содержат хуки:

Использование хуков в плагинах

Обработчики хуков регистрируются в конфигурации плагина lib/config/plugin.php:

return array(
    // ...
    'handlers' => array(
        'frontend_head'    => 'frontendHead',
        'frontend_product' => 'frontendProduct',
    ),
);

Метод-обработчик определяется в классе плагина. Для простых хуков он возвращает HTML-строку, для хуков с под-ключами (например, frontend_product.*.menu) — массив с соответствующими ключами:

class shopMypluginPlugin extends shopPlugin
{
    public function frontendHead($params)
    {
        return '<link rel="stylesheet" href="...">';
    }

    public function frontendProduct($product)
    {
        return array(
            'menu'  => '<li>Пункт меню</li>',
            'block' => '<div>HTML для основного блока</div>',
        );
    }
}

Рекомендации

• Используйте хук frontend_head для подключения стилей и скриптов

• Для добавления элементов в личный кабинет используйте frontend_my_nav

• Хуки prepare_* срабатывают при подготовке данных и позволяют модифицировать контент

• Хуки frontend_* срабатывают при рендеринге шаблона

• Всегда проверяйте наличие хука в актуальной версии темы перед разработкой плагина: места вывода помечены в шаблонах аннотациями {* @event ... *}