Как создать тему для магазина на платформе InSales?
1 like776 views
Документ описывает процесс создания темы оформления для интернет-магазина на платформе cms Insales, включая проектирование ключевых страниц, разработку макета и функциональности с использованием языка шаблонов liquid. В нем перечислены основные составляющие темы оформления, такие как layout, CSS стили, и javascript, а также обсуждаются настройки для пользователей. Рекомендуется последовательный подход к созданию темы, начиная с изучения платформы и заканчивая добавлением функциональности и стилей.
Как создать тему для магазина на платформе InSales?
- 1. Как создать тему оформления для магазина на CMS InSales?
- 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