1. Как создать тему оформления
для магазина на CMS InSales?

3. Ключевые страницы магазина

4. Ключевые страницы магазина
• Необходимо их продумать
• Нарисовать структуру
• Создать графическое воплощение
• Сверстать в HTML и CSS
• Добавить функциональность на liquid
• Дополнительные JS-эффекты (по желанию)

5. Страницы сайта магазина
В шаблонах страниц возможно выделить Layout
Например, включить в него: шапку, фон, боковое
меню, футер.
Layout Layout
шаблоны
Layout ключевых
страниц

6. Структура файлов темы оформления
• Layout
(шаблон «HTML»)
• Шаблоны
основных
страниц
• CSS-cтили
• JS-скрипты
• Медиа-файлы
(картинки,
иконки и т.п.)

7. Тема оформления
• Редактируема через веб
• Скачиваема как zip-архив

8. Какая есть функциональность?
• Старая цена, краткое и полное описание товара, кнопка «под заказ»
• Выбор модификации товара (цвет, размер и т.п.)
• Сопутствующие товары
• Отзывы на товары, рейтинги
• Много уровней вложенности каталога товаров
• Фильтрация списка каталога по параметрам
• Описания, изображения и SEO-текст для категории товаров
• Сортировка товаров по цене, алфавиту
• Поиск по товарам + выдача результаты
• Боковые/верхние/нижние панельки с блоками (баннерами, анонсами,
другими HTML- и JS-вставками)
• Меню (верхнее, нижнее, любые списки ссылок)
• Блог с комментариями или новости магазина
• Скидки и купоны в корзине
• Специальные категории товаров для вывода на главной или в корзине

9. Всю ли функциональность добавлять?
• Можно реализовывать в теме не всю
функциональность
• Это позволит не перегружать её, а сделать
лёгкой и удобной
• С другой стороны будет меньше применимость
темы, владельцы магазинов могут её не
выбрать из-за того, что в ней не хватает чего-то
• Решать Вам

10. Шаблонизатор Liquid
• Вся функциональность темы реализуется на
языке шаблонов Liquid
• Достаточно простой и мощный язык
• Был разработан для shopify.com и сейчас
является open source проектом
Документация на русском:
http://wiki.insales.ru/wiki/Liquid

11. Шаблонизатор Liquid
Примеры:
{{ product.title }} — вывод названия товара
Кнопка «под заказ», если товара нет в наличии:
{% if product.available == true %}
<input src="{{ 'buy.gif' | asset_url }}" type="image" />
{% else %}
<input src="{{ 'wait.gif' | asset_url }}" type="image" />
{% endif %}
http://wiki.insales.ru/wiki/Примеры_применения_Liquid

12. Основные переменные
• collection – категория товаров
• cart – содержимое корзины
• product – товар
• client, blocks, order, image, page, property, …
Пример:
{% for product in collection.products %}
{{product.title}}
{% endfor %}
(Вывод списка названий товаров в текущей категории)
http://wiki.insales.ru/wiki/Variables

13. Высший пилотаж
Создание настраиваемой пользователем
темы оформления
Пользователь
сможет загрузить
логотип,
поменять фон,
цвет кнопки и т.п.

14. Высший пилотаж
Создание настраиваемой пользователем
темы оформления:
1. Определить, какие элементы будут доступны как
настройки
2. После вёрстки заменить эти элементы на
переменные settings.****** и, соответственно,
переименовать style.css в style.css.liquid
3. Добавить файл settings_data.json со значениями
по умолчанию для данных переменных
4. Отредактировать settings.html из одной из
стандартных тем, чтобы организовать вывод
конструктора настроек для пользователя

15. Высший пилотаж
Стили CSS и работа с SVG:
1. основной файл style.css или style.css.liquid;
2. wysiwyg.css – для корректного отображения результатов
редактирования контента через админку;
3. custom_checkout.css – стиль страниц оформления заказа
задаётся отдельно, так как для них нет шаблона доступного
для редактирования;
4. можно добавлять другие css-файлы, если это вам удобно;
5. если вы создаёте настраиваемую тему оформления, то
можно добавлять даже настраиваемые градиенты для
фона или генерируемую картинку логотипа из текстового
названия магазина (всё это с помощью SVG).

16. Итого: Создание темы оформления
Мы рекомендуем следующий подход:
1. Познакомиться с платформой, создав аккаунт
2. Покопаться в стандартной теме оформления
3. Посмотреть документацию
4. Набросать какая функциональность будет на каких страницах
5. Выделить layout, как общую часть всех страниц
6. Создать графический дизайн, держа в голове, какие элементы можно
отдать на настройку пользователю
7. Сверстать с учётом того, что вёрстку нужно будет перекладывать на liquid
8. Добавить функциональность на liquid для привязки к объектам системы
9. Добавить JS-функциональность (добавление в корзину, эффекты при
просмотре изображений и т.п.)
10. Решить будете ли добавлять настройки стилей. Если будете, то добавить
.liquid и по желанию SVG.

17. Остались вопросы?
Создавайте партнёрский аккаунт
http://www.insales.ru/new_partner
и обращайтесь в поддержку.
Мы ответим.
http://www.insales.ru/blog
twitter:@insales