Сторінки теми

Сторінку теми малює сніпет з певним імʼям у snippets/. Якщо тема має такий сніпет, він замінює основну область сторінки; шапка й підвал лишаються своїми секціями. Без сніпета, з помилкою в ньому або з порожнім результатом магазин показує сторінку свого дизайну — вітрина не лишається порожньою.

Який сніпет яку сторінку

Обовʼязковий компонент, якого сніпет не поставив, додається після його розмітки: кошик без кнопки «Оформити» чи каталог без товарів нічого не продадуть. Глобальні обʼєкти (shop, request, routes, settings, linklists, collections …) доступні в кожному сніпеті.

Варіанти сніпета

Спершу шукається сніпет з суфіксом, потім загальний. Шаблони товару й категорії створюються в редакторі дизайну й призначаються типу товару чи категорії.

Картка товару: product-card

Сніпет отримує свою картку — з уже відформатованими цінами, на відміну від карток у списках Liquid:

Свої кольори й розміри можна намалювати з product.colors, а можна поставити {% component 'product.swatches' %} — він робить те саме з підміною фото при наведенні.

Товар: product-page

Малює всю область товару: крихти, фото, опис і деталі. Смуга під товаром (схожі товари, відгуки, поставлені туди в дизайні) і липка панель лишаються дизайну. Отримує product, breadcrumbs і template.

<nav class="bloom-crumbs">{% for crumb in breadcrumbs %}<a href="{{ crumb.url }}">{{ crumb.name }}</a>{% endfor %}</nav>
<div class="bloom-product">
  <div class="bloom-product__media">{% component 'product.gallery' %}</div>
  <div class="bloom-product__summary">
    {% component 'product.title' %}
    {% component 'product.price' %}
    {% component 'product.variant-picker' %}
    {% component 'commerce.add-to-cart' %}
    {% if template.settings.show_sku and product.selected_or_first_available_variant %}…{% endif %}
  </div>
</div>
{% component 'product.description' %}
{% component 'product.specifications' %}

{% schema %}
{"settings": [{"id": "show_sku", "type": "checkbox", "label": "Показувати артикул", "default": false}]}
{% endschema %}

Назва, ціна, галерея, наявність, вибір варіанта й кнопка «У кошик» — по одному на сторінку.

Каталог: collection-page

Малює заголовок, вступ і результати каталогу, категорії, бренду й SEO-сторінки фільтра; смуга під сторінкою лишається дизайну. Отримує collection і template. catalog.results — фільтри, сортування, сітка й сторінки одним компонентом зі станом сторінки; картки в ньому — ваш product-card, якщо він є. Розкладку фільтрів (збоку, зверху, шухляда) задають токени дизайну.

Кошик: mini-cart і cart-page

mini-cart малює вміст мінікошика, cart-page — сторінку кошика. Обидва отримують cart; порожній стан — {% if cart.item_count == 0 %}. Ціни в cart.items уже відформатовані так, як обрав власник; для власного числа — {{ сума | money }}, а не свій знак валюти. Налаштування шаблону (template.settings) має лише cart-page.

Оформлення: checkout

Розкладає оформлення всередині форми магазину з обʼєктом checkout і компонентами оформлення. Не пишіть власних полів чи кнопок оплати. Скрипти теми на оформленні, оплаті, «Дякуємо», вході й у кабінеті не виконуються ніколи, навіть у магазині з дозволеним JavaScript.

Блог, пошук, записи, кабінет, вхід, 404

account.status і auth.status — повідомлення після дії (наприклад, «лист надіслано») або nil. article.content — блоки статті, які власник редагує в редакторі.

Налаштування шаблону

Сніпет сторінки може закінчуватися {% schema %} з settings, як секція. Редактор дизайну показує їх у бічній панелі цього шаблону, а сніпет читає їх як template.settings; template.name — вид сторінки, template.suffix — назва шаблону або nil для default.

Дайте шаблону те, що власник захоче змінити: показ артикулу, бік галереї, заголовки. Текст — з порожнім default і підставою з перекладу: {{ template.settings.title | default: 'tpl.cart_title' | t }}.

Набір спільних сторінок

Тема з "kit": "pages" у theme.json отримує з набору Storeforma кожен сніпет, якого не має сама, і файл assets/kit.css:

account-page   auth-page      cart-page      checkout
entry-page     entry-list-page  mini-cart    not-found-page
order-page     search-page    products-count
assets/kit.css

Сторінок товару, каталогу, картки, блогу й статті в наборі немає: їх тема малює сама або лишає дизайну. Тема без набору показує на решті сторінок дизайн магазину.