Кастомный CSS/JS и события

Витрина даёт продвинутую кастомизацию через поля Custom CSS и Custom JS (админка → «Оформление витрины»). Здесь описан стабильный публичный контракт — то, на что можно опираться: эти селекторы, переменные и window.tirify не меняются между релизами без предупреждения.

Что стабильно

Опираться можно только на то, что описано здесь: атрибуты data-tirify-*, CSS-переменные (токены) и объект window.tirify (версия 1).

Нельзя опираться на внутренние классы (вида Header-module__abc123) и структуру DOM вне data-tirify-* — они меняются между релизами.

---

CSS: токены (переменные темы)

Переопределяйте в Custom CSS. Цвета хранятся как HSL-триплеты (H S% L%).

Переменная	Назначение
--primary	Акцент: кнопки, ссылки, активная навигация
--primary-foreground	Текст на акценте
--background	Фон страницы
--foreground	Основной текст
--card	Поверхности: карточки, модалки
--secondary	Тинтованные поверхности
--muted / --muted-foreground	Приглушённый фон / вторичный текст
--border	Границы
--radius	Базовый радиус скругления (12px)

:root[data-theme] {
  --primary: 20 88% 53%;   /* свой оранжевый акцент */
  --radius: 0.5rem;        /* углы поострее */
}

CSS: селекторы data-tirify-*

Стабильные хуки для точечного оформления элементов.

Атрибут	Значение	Где
data-tirify-region	header	шапка
data-tirify	имя блока (product-card, productsGrid, hero, nav…)	соответствующий элемент
data-tirify-page	home / category / product / account …	контейнер страницы
data-tirify-product-kind	item / kit / lootbox / variant_picker …	карточка/модалка товара
data-tirify-slug	slug товара/категории	элемент сущности
data-tirify-product	slug товара	карточка товара в сетке

/* Спрятать блок */
[data-tirify="hero"] { display: none; }

/* Подпись под конкретный сервер в мониторинге */
[data-monitoringserverid="33049"]::before {
  content: "Вайп по понедельникам:";
  display: block; font-weight: 500;
}

---

JS: объект window.tirify

В Custom JS доступен объект window.tirify — снимок состояния витрины (только чтение) и события жизненного цикла.

window.tirify = {
  version: "1",                            // версия контракта
  ready: boolean,                          // true после загрузки магазина
  getStore(): StoreSnapshot | null,        // снимок магазина (копия)
  getPlayer(): PlayerSnapshot | null,      // снимок игрока или null (гость)
  on(event, callback): () => void,         // подписка; возвращает функцию отписки
  off(event, callback): void,
}

Снимки — копии: их изменение не влияет на витрину.

StoreSnapshot: slug, name, currency, themeCode, accentColor, supportEnabled, wipeScheduleEnabled, showTopupBonuses, capabilities.

PlayerSnapshot: id, steamId64, displayName, avatarUrl, balance, bonus, joined.

События

Событие	Когда вызывается	Данные (detail)
tirify:ready	после первичной загрузки магазина	{ store, player }
tirify:player	вход / выход / изменение баланса игрока	{ player | null }
tirify:locationchange	переход в другой раздел витрины	{ path }

Подписаться можно двумя способами:

// 1) через tirify.on — вернёт функцию отписки
const off = window.tirify.on("player", ({ player }) => {
  console.log("Игрок обновился:", player);
});

// 2) через стандартный addEventListener — данные в e.detail
window.addEventListener("tirify:locationchange", (e) => {
  console.log("Открыт раздел:", e.detail.path);
});

подсказка

on("ready", cb) сработает сразу, даже если магазин уже загрузился к моменту подписки — вы не пропустите событие ready.

Пример: аватар игрока в шапке

window.tirify?.on("ready", ({ player }) => {
  if (!player) return;
  const header = document.querySelector('[data-tirify-region="header"]');
  if (!header) return;
  const img = document.createElement("img");
  img.src = player.avatarUrl ?? "";
  img.style.cssText = "width:32px;height:32px;border-radius:50%;";
  header.prepend(img);
});

Пример: реакция на смену раздела

window.tirify?.on("locationchange", ({ path }) => {
  // напр. отправить событие в свою аналитику
  console.log("Переход:", path);
});

---

Чего избегать

• Внутренних классов CSS-модулей (*-module__*) — нестабильны.
• DOM-структуры вне data-tirify-* хуков.
• Любых window.* кроме window.tirify.