Поведінки й стилі

Секції теми працюють без власного JavaScript: вивід проходить санітайзер, а меню, шухляди, вкладки й каруселі вмикає скрипт ядра за атрибутами data-sf-*. Він знає клавіатуру, Esc, тач і aria-expanded, працює після оновлень Livewire і поважає prefers-reduced-motion. Власний JavaScript теми працює на власному домені магазину (на адресі storeforma.shop — лише в офіційних темах без змін), тож тема має працювати й без нього.

Поведінки data-sf-*

<div class="bloom-item" data-sf-disclosure data-sf-hover>
  <a href="{{ link.url }}">{{ link.title }}</a>
  <button data-sf-disclosure-trigger aria-expanded="false" aria-controls="bloom-sub-{{ forloop.index }}" aria-label="{{ link.title }}">▾</button>
  <div id="bloom-sub-{{ forloop.index }}" data-sf-disclosure-panel hidden>…</div>
</div>

<button data-sf-disclosure-trigger aria-controls="bloom-drawer" aria-expanded="false">{{ 'ui.main_menu' | t }}</button>
<div id="bloom-drawer" data-sf-disclosure-panel data-sf-drawer hidden>
  <button data-sf-close aria-label="{{ 'ui.prev' | t }}">×</button> …
</div>

<header data-sf-sticky="40">…</header>

<div data-sf-tabs>
  <button data-sf-tab aria-controls="tab-a" aria-selected="true">…</button>
  <button data-sf-tab aria-controls="tab-b" aria-selected="false">…</button>
  <div id="tab-a">…</div><div id="tab-b" hidden>…</div>
</div>

<div data-sf-scroller>
  <div class="bloom-strip" data-sf-scroller-track>…картки…</div>
  <button data-sf-scroll="prev" aria-label="{{ 'ui.prev' | t }}">‹</button>
  <button data-sf-scroll="next" aria-label="{{ 'ui.next' | t }}">›</button>
</div>

Що лишає санітайзер

У звичайному (захищеному) режимі вивід секцій і сніпетів проходить санітайзер. Компоненти ядра вставляються після нього й не чіпаються.

CSS у файлах теми, у <style> і {% stylesheet %} очищується тими самими правилами: url() лишається лише для шляхів магазину й файлів теми.

Іконки

Inline SVG вирізається. Іконка — файл у assets/, який CSS малює маскою в кольорі тексту чи акценту. Відносна адреса в CSS теми вказує на файл тієї самої теми:

/* assets/theme.css */
.bloom-ico::before { content: ""; display: inline-block; width: 1.25rem; height: 1.25rem; background: currentColor;
  -webkit-mask: var(--bloom-ico) center / contain no-repeat; mask: var(--bloom-ico) center / contain no-repeat; }
.bloom-ico--truck { --bloom-ico: url("icon-truck.svg"); }

{# у секції #}
<span class="bloom-ico bloom-ico--truck" aria-hidden="true"></span>

В атрибуті src картинки — фільтр asset_url: <img src="{{ 'logo.svg' | asset_url }}" alt="…">. Іконки пунктів меню дає саме меню: link.icon_svg (іконка ядра) і link.icon_url (власна іконка власника).

Змінні дизайну --store-*

Кольори, шрифти, заокруглення й відступи власник змінює в «Стилях магазину». Тема, що пише лише змінні, змінюється разом з ними без жодної правки коду.

Одна тінь і один радіус на тему через ці змінні. Фіксовані кольори лишайте для власних акцентів, яких немає серед токенів.

Вибір власника в дизайні стоїть атрибутами на <html>: data-sf-headings (normal, caps), data-sf-weight (regular, light), data-sf-nav (normal, caps), data-sf-catalog-columns (3, 4, 5), data-sf-catalog-filters (sidebar, sidebar-right, top, drawer), data-sf-catalog-header (default, minimal, centered), data-sf-catalog-options (list, chips, swatches), data-sf-catalog-pagination (pages, more), data-sf-catalog-gap (theme, lines, small, medium, large). CSS теми може на них спиратися. Свій відступ між картками тема задає лише для «Як у темі»: [data-sf-catalog-gap="theme"] .store-product-grid { gap: 1.5rem; } — тоді вибір власника його перекриває. Стилі Storeforma лежать у каскадних шарах, тож будь-яке правило теми їх перекриває без !important; лише приховані панелі ([hidden]) лишаються прихованими.

Стилізація компонентів ядра

Розмітку навколо компонента пишете вільно. Сам компонент стилізуйте трьома способами — вони контракт; класи й вкладеність усередині компонента можуть змінюватися.

.bloom-header { --sf-menu-gap: 2rem; --sf-cart-count-bg: var(--store-ink); --sf-mega-panel-shadow: none; }
.bloom-header [data-sf-part="menu-badge"][data-tone="sale"] { letter-spacing: .1em; }
.bloom-product [data-component="product.price"] { font-size: var(--store-text-2xl); }

Внутрішню розмітку мінікошика й рядків кошика тема не замінює — лише стилізує. Вигляд компонента в цілому (варіант кнопки, пропорції фото, вигляд вибору варіанта) задає дизайн магазину; з Liquid можна обрати один з його іменованих стилів: {% component 'product.gallery', style: 'square' %}.

Нижня панель на телефоні

Панель mobile.nav стоїть унизу екрана на телефоні; пункти (home, catalog, filters, search, wishlist, cart, account — до пʼяти) обирає власник у «Налаштування сайту». Тема її не малює, а фарбує змінними:

Частини: item (з data-item — назва пункту, у поточного aria-current="page"), label, count. Вітрина сама лишає під панель місце внизу сторінки. Перевіряйте телефон 390 px: власні фіксовані елементи теми (кнопка «Нагору», липка панель) не мають ховатися під нею.