События и 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)

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

Как читать таблицы

• Хуки frontend_* тема вызывает при рендеринге шаблона, prepare_* — при подготовке данных.

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