В этой статье описаны основы создания собственной темы дизайна для общего понимания — без подробного описания процесса разработки. Удобнее всего начать создание собственной темы — скопировать исходный код существующей темы, например, «Дефолт 3.0», и доработать его так, как вам нужно.
Тема дизайна для Shop-Script должна содержать следующий набор основных шаблонов витрины:
- index.html (общая структура страниц витрины)
- home.html (шаблон главной страницы витрины)
- category.html (шаблон страниц с информацией о категории товаров)
- product.html (шаблон страницы с информацией об одном товаре)
- cart.html (шаблон страницы «Корзина»)
- error.html (шаблон для отображения сообщений об ошибках, например, «Страница не найдена»)
Поскольку работа интернет-магазина предполагает оформление заказа со указанием адресных данных, выбора способа доставки и оплаты, тема дизайна также должна содержать шаблоны соответствующих страниц. Для упрощения разработки вашей собственной темы дизайна можно полностью скопировать следующие шаблоны страниц оформления заказа из темы «Дефолт» (впоследствии их можно модифицировать по своему усмотрению):
- checkout.html
- checkout.contactinfo.html
- checkout.shipping.html
- checkout.payment.html
- checkout.confirmation.html
- checkout.success.html
- checkout.error.html
1. Формирование структуры темы дизайна
Новую тему дизайна необходимо создавать в виде папки с произвольным именем на вашем компьютере. В ходе создания темы в эту папку будут сохраняться отдельные HTML-шаблоны и другие необходимые файлы (CSS, JavaScript + обязательный файл-манифест theme.xml).
Тема дизайна витрины может формироваться отдельно — только для Shop-Script, либо в составе семейства тем оформления, имеющих сходные оформительские элементы и предназначенные для использования в нескольких разных приложениях Webasyst с целью создания общего внешнего вида для разных фронтендов в пределах одного сайта.
2. Содержание основных шаблонов
index.html
Шаблон index.html формирует основную структуру страниц витрины с помощью элементов <DOCTYPE>, <html>, <head> и <body>.
Внутри элемента <head> обычно подключаются CSS-стили и JavaScript-файлы.
Внутри элемента <body> могут формироваться основное навигационное меню (например, с помощью метода {$wa->apps()}, как это сделано в теме дизайна «Дефолт»), боковые панели, нижняя панель («футер») и тому подобные структурные блоки страницы, общие для всех страниц витрины.
Важно: для отображения динамически формируемой информации на витрине (в центральной части страницы) необходимо добавить в шаблон index.html переменную {$content}. В случае отсутствия этой переменной все страницы витрины окажутся одинаковыми, т. к. на них не будет отображаться динамически формируемое содержимое: списки товаров на главной странице, информация о конкретном товаре, списки товаров в категориях и т. п.
home.html
К шаблону home.html, предназначенному для отображения основной (обычно центральной) части главной страницы специальные требования не предъявляются — он может содержать списки товаров, ссылки на отдельные категории товаров, разнообразные рекламные тексты, видео-ролики и другие подобные материалы.
category.html
Свойства категории
Шаблон category.html предназначен для отображения содержимого категории товаров.
Описание, наименование, список подкатегорий, META-теги, URL страницы, количество товаров и другие свойства категории содержатся в переменной {$category} в виде элементов ассоциативного массива. Это значит, что для отображения, например, наименования категории необходимо добавить в шаблон category.html переменную {$category.name|escape} (модификатор |escape необходим для правильного отображения на витрине различных специальных символов, которые могут содержаться в названиях категорий, например, часто встречающегося символа «&»).
Списки товаров
Для формирования списка товаров следует использовать переменную {$products}, которая содержит массив элементов с информацией о товарах в этой категории. Для считывания отдельных элементов массива обычно используется цикл Smarty {foreach}...{/foreach}.
Совет: код для отображения списка товаров, используемый в шаблоне category.html, может быть использован и на других страница витрины, например, на странице с результатами поиска, поэтому удобно вынести этот код в отдельный шаблон, назвав его, например, product-list.html. Подключить такой дополнительный шаблон в шаблоне category.html можно с помощью Smarty-функции {include}:
{include file='product-list.html'}
В теме дизайна «Дефолт» для этой же цели используются 2 разных шаблона: list-table.html и list-thumbs.html — для формирования списков товаров с разным оформлением в разных местах витрины.
Фильтры
Другим ключевым элементом страниц категорий является фильтр товаров — веб-форма для поиска товаров в категории по указанным значениям характеристик. Список характеристик, выбранных для фильтрации в конкретной категории, содержится в переменной {$filters}. Для простоты разработки собственной темы дизайна рекомендуем скопировать из шаблона category.html темы «Дефолт» фрагмент кода, обозначенный комментарием <!-- filtering by product features -->, в котором используется переменная {$filters}.
product.html
Шаблон product.html используется для формирования основного содержимого страницы товара. Обычно на этой странице отображаются наименование, описание, характеристики товара и кнопка «В корзину».
Информация о товаре содержится в виде экземпляра класса shopProduct в переменной {$product}.
Исходный код класса shopProduct находится в файле wa-apps/shop/lib/classes/shopProduct.class.php.
Например, по аналогии с категориями, наименование товара можно отобразить на витрине с помощью конструкции {$product.name|escape}.
Помимо отображения информации о товаре, важной функцией страницы товара является возможность добавить товар в корзину, чтобы затем перейти к оформлению заказа. Форма добавления товара в корзину может быть создана в виде тега <form>, данные которой должны отправляться методом POST на URL, возвращаемый конструкцией {$wa->getUrl('/frontendCart/add')}.
Артикулы, услуги, информация о складских остатках, рекомендуемые товары
Эти элементы страницы товара требуют сравнительно сложного программирования с использованием Smarty и JavaScript, поэтому для первоначального ознакомления их реализацию будет полезно посмотреть в шаблоне product.html темы «Дефолт» и затем модифицировать нужным образом для адаптации к вашей собственной теме дизайна.
cart.html
Шаблон cart.html используется для отображения страницы со списком товаров, добавленных в корзину. Как правило, на такой странице можно изменить количество заказанных единиц товаров, удалить отдельные товары из корзины либо сразу перейти к оформлению заказа.
Информация о текущей покупательской корзине содержится в переменной {$cart} в виде ассоциативного массива со следующими элементами:
- items — список товаров, добавленных в корзину
- total — общая сумма цен заказанных единиц товаров с учетом выбранных артикулов и вариантов услуг
- count — общее количество заказанных единиц товаров
Добавление функций автоматического пересчета стоимости заказа после изменения количества заказанных единиц и выбора вариантов услуг для отдельных товаров, а также обновления содержимого корзины при удалении товаров без перезагрузи страницы требует использования сравнительного большого объема JavaScript-кода. Поэтому при создании собственной темы дизайна предлагаем в качестве основы использовать реализацию страницы корзины из темы «Дефолт» и при необходимости ее доработать.
error.html
Если при запросе страницы витрины возникает ошибка (например, «Страница не найдена» или «Внутренняя ошибка сервера»), то для отображения информации об этом используется шаблон error.html. Переменные, доступные в этом шаблоне:
- $error_message — сообщение об ошибке, генерируемое магазином
- $error_code — код ответа сервера, например, 404 или 500
3. Поддержка плагинов
Базовые темы дизайна Shop-Script (например, тема «Дефолт») имеют встроенную поддержку плагинов. Эта поддержка заключается в том, что в шаблонах темы дизайна присутствуют специальные вставки (хуки), которые позволяют автоматически добавлять на витрину магазина дополнительное содержимое (например, список брендов товарной продукции и т. п.). Пример хука в шаблоне product.html:
<!-- plugin hook: 'frontend_product.menu' --> {* @event frontend_product.%plugin_id%.menu *} {foreach $frontend_product as $_}{$_.menu}{/foreach}
Для того чтобы ваша тема дизайна поддерживала отображение дополнительного содержимого с помощью плагинов, скопируйте подобные фрагменты из одной из базовых тем дизайна (например, «Дефолт») в соответствующие шаблоны вашей собственной темы.
4. CSS- и JavaScript-файлы
В шаблонах темы дизайна могут подключаться CSS- и JavaScript-файлы фреймворка, а также собственные файлы, относящиеся только к этой теме. Ниже показано, как правильно подключать такие файлы в обоих случаях.
Подключение общих файлов фреймворка
Общие CSS- и JavaScript-файлы фреймворка находятся в директориях wa-content/css/ и wa-content/js/ соответственно. Для того чтобы подключить их в шаблоне темы дизайна, следует указывать URL этих директорий с учетом URL, по которому установлен фреймворк. Сделать это можно с помощью переменной {$wa_url}:
<link href="{$wa_url}wa-content/css/wa/wa-1.0.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="{$wa_url}wa-content/js/jquery-plugins/jquery.cookie.js"></script>
Подключение собственных файлов темы
Для подключения собственных CSS- и JavaScript-файлов темы необходимо в шаблонах указывать URL директории с файлами темы дизайна. Для этого рекомендуется использовать переменную {$wa_theme_url}:
<link href="{$wa_theme_url}style.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="{$wa_theme_url}script.js"></script>
Подключаемые в таком примере файлы style.css и script.js следует добавить в папку со всеми остальными шаблонами темы.
5. Создание файла-манифеста
Для того чтобы Shop-Script воспринимал набор созданных шаблонов как составные части определенной темы дизайна, необходимо указать все файлы созданной вами темы в специальном файле-манифесте theme.xml. П
Важно: идентификатор (id) вашей темы дизайна, указанный в файле-манифесте theme.xml, не должен совпадать с идентификаторами других тем, установленных в магазине!
6. Загрузка на сервер
Перед загрузкой файлов темы на сервер их необходимо вместе с файлом-манифестом запаковать в архив формата TAR.GZ. Упаковать нужно только файлы — без папки, в которой вы их создавали на вашем компьютере! Имя файла-архива не имеет значения. Архив необходимо добавить по ссылке «Загрузить тему» в разделе «Витрина».
После загрузки архива выберите новую тему в настройках маршрутизации интернет-магазина, чтобы она стала использоваться на витрине.
