События Preline UI в Seller 2.0 — Документация Easyweb

Тема Seller 2.0 использует Preline UI, компоненты которого генерируют собственные события для модальных окон, аккордеонов, выпадающих меню и других интерактивных элементов. На эти события можно подписаться из своего кода.

Открытие и закрытие overlay

Модальные окна и offcanvas-панели темы построены на компоненте HSOverlay:

// Событие при открытии overlay
document.addEventListener('open.hs.overlay', (event) => {
    const overlay = event.target;
    console.log('Открыт overlay:', overlay.id);
});

// Событие при закрытии overlay
document.addEventListener('close.hs.overlay', (event) => {
    const overlay = event.target;
    console.log('Закрыт overlay:', overlay.id);
});

Другие события Preline, доступные для подписки

Компоненты Preline, используемые в теме, генерируют собственные события — на них можно подписаться из своего кода. Сама тема из них обрабатывает только open.hs.overlay / close.hs.overlay (блокировка прокрутки страницы при открытом модальном окне или offcanvas).

Компонент	События	Компоненты темы, где встречается
Accordion	`open.hs.accordion`, `close.hs.accordion`	Аккордеоны (описания, характеристики и т.п.)
Dropdown	`open.hs.dropdown`, `close.hs.dropdown`	Выпадающие меню
Collapse	`open.hs.collapse`, `hide.hs.collapse`	Сворачиваемые блоки
Tabs	`change.hs.tab`	Переключение вкладок
Tooltip	`show.hs.tooltip`, `hide.hs.tooltip`	Всплывающие подсказки

Пример подписки:

document.addEventListener('change.hs.tab', (event) => {
    console.log('Переключена вкладка:', event.target);
});

document.addEventListener('open.hs.accordion', (event) => {
    console.log('Открыт аккордеон:', event.target);
});

Собственные события темы

Кроме событий Preline, тема генерирует и собственные события: cart:changed, wishlist:changed, compare:changed, product:sku-changed, product:service-changed, product:service-variant-changed, lazyload:items-loaded. Они описаны в статье «События темы дизайна».

Размещение пользовательского кода

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

{literal}
<script>
document.addEventListener('DOMContentLoaded', () => {
    // Ваш код
});
</script>
{/literal}

События Preline UI