Як влаштовано оформлення

Тема оформлення — це зовнішній вигляд магазину: розмітка сторінок, стилі, картинки і написи. Тема лежить окремою текою, її можна скопіювати, змінити під себе і поставити на вітрину, не чіпаючи сам магазин.

Головне правило: тема відповідає за те, як магазин виглядає, а не за те, як він працює. Кошик, оформлення замовлення, живий пошук, перерахунок сум, вибір відділення перевізника — усе це робить сам магазин. Тема розставляє розмітку і позначає потрібні місця атрибутами, а магазин до них підключається.

З цього випливає те, заради чого так і зроблено: нова тема одразу отримує робочий магазин. Вам не потрібно писати кошик і оформлення замовлення наново — досить поставити в розмітці ті атрибути, які магазин шукає. Їх повний список — на сторінці Атрибути data-*.

Що робить тема#

• малює всі сторінки вітрини: головну, каталог, картку товару, кошик, оформлення, особистий кабінет, інформаційні сторінки;
• задає стилі і підключає свої файли: css, js, шрифти, картинки;
• оголошує налаштування, які власник магазину змінює в панелі: кольори, ширину контейнера, товарів у ряд, копірайт, посилання на соцмережі;
• зберігає власні написи та їх переклади;
• розставляє точки, у які доповнення виводять свою розмітку.

Що робить сам магазин#

• рахує ціни, знижки, доставку та підсумок замовлення — у шаблон вони приходять готовими;
• веде кошик і оформлення замовлення: додавання, зміну кількості, перерахунок, перевірку полів і створення замовлення;
• показує підказки живого пошуку;
• оновлює значок кошика і позначки «вже в кошику» на картках товарів;
• рахує упаковки і комплекти аксесуарів на сторінці товару;
• збирає адреси розділів з урахуванням мови та обраної схеми адрес;
• підставляє мета-теги для пошуковиків.

Де лежить тема і як її відкрити#

Теми лежать у теці themes/ у корені магазину, кожна — своєю текою:

themes/
    default/     базова тема
    market/
    promo/
    ваша-тема/

Тема вважається встановленою, якщо в її теці є файл theme.json. Теки, які починаються з крапки, магазин пропускає — так називає свої тимчасові теки встановлювач тем із маркетплейсу.

Правити шаблони можна прямо в панелі управління: «Дизайн» → тема → «Редактор». Там само змінюються налаштування теми та її тексти. Редактор відкриває тільки текстові файли (html, css, js, json, txt, md, svg) і не випускає за межі теки теми.

Як влаштований шаблон#

Шаблони — це звичайні файли розмітки з розширенням .html, усередині яких крім HTML стоять теги шаблонізатора Smarty: підстановки даних, умови і цикли.

{extends file="layout.html"}

{block name="content"}
    <h1>{$product.name}</h1>
    <p class="price">{money amount=$product.price currency=$storefront.currency}</p>

    {if $product.is_available}
        <button data-add="{$product.id}" data-sku="{$product.sku_id}">До кошика</button>
    {else}
        <span>Немає в наявності</span>
    {/if}
{/block}

Дві речі, які корисно знати одразу.

Усе, що виводиться, екранується. Якщо в назві товару є <, покупець побачить саме цей знак, а не зламану верстку. Там, де потрібно вивести готову розмітку — опис товару, вміст інформаційної сторінки, — пишуть {$page.content nofilter}.

Шаблон працює в пісочниці. З нього не можна викликати довільний код, прочитати файл на диску або звернутися до налаштувань сервера. Доступні тільки дані сторінки і дозволений набір тегів та обробників значень — вони перелічені на сторінці Теги шаблонів.

З чого почати#

Свою тему майже ніколи не пишуть з порожнього місця: беруть базову, роблять копію і змінюють її під себе. Порядок роботи описаний на сторінці Своя тема з нуля.