Как устроено оформление

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

Главное правило: тема отвечает за то, как магазин выглядит, а не за то, как он работает. Корзина, оформление заказа, живой поиск, пересчёт сумм, выбор отделения перевозчика — всё это делает сам магазин. Тема расставляет разметку и помечает нужные места атрибутами, а магазин к ним подключается.

Из этого следует то, ради чего так и сделано: новая тема сразу получает рабочий магазин. Вам не нужно писать корзину и оформление заказа заново — достаточно поставить в разметке те атрибуты, которые магазин ищет. Их полный список — на странице Атрибуты 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}.

Шаблон работает в песочнице. Из него нельзя вызвать произвольный код, прочитать файл на диске или обратиться к настройкам сервера. Доступны только данные страницы и разрешённый набор тегов и обработчиков значений — они перечислены на странице Теги шаблонов.

С чего начать#

Свою тему почти никогда не пишут с пустого места: берут базовую, делают копию и меняют её под себя. Порядок работы описан на странице Своя тема с нуля.