Тема Seller 2.0 предоставляет три механизма расширения: JavaScript API-модули, собственные JS-события и Smarty-хуки для плагинов. Все API доступны через глобальный объект window.waTheme.
Подробная документация по каждому модулю — в соответствующих разделах.
События 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 хуков
Общие элементы страницы
Хук
Расположение
Описание
frontend_head
head.html
Хук в секции <head> для добавления meta-тегов, скриптов, стилей