Тонкости работы с шаблонами на InSales

1. Возможности редактирования клиентской
стороны интернет-магазина на InSales
Анастасия Качалова
InSales
Старший специалист клиентской
технической поддержки

2. Как InSales формирует страницы магазина
1. GET-запрос на URL /collection/any_collection
2. Наличие collection в URL – значит
используем шаблон «категория»
3. Берем из базы данные о категории
any_collection
4. Расставляем данные по шаблону как нам
сказал разработчик шаблона
5. Отдаем то, что получилось
6. Кешируем!

3. Шаблоны
1. Нельзя создавать своих шаблонов
2. Можно использовать только клиентские языки +
liquid
3. Лучше использовать шаблоны по назначению
4. Не использовать в качестве счетчика цикла и не
переопределять переменную, уже определенную в
текущем шаблоне (collection в шаблоне Категория)
5. Есть определенный набор переменных и объектов
6. Редактор не позволит сохранить шаблон, если
нарушен порядок тегов liquid’а
7. null == false

4. Редактор
1. Сохранение темы
2. Загрузка темы
3. Копирование (с предпросмотром)
4. Бекапы
5. Редактирование
Платформа интернет-магазина

5. Выгрузка темы
Скрипты, стили, файлы темы
Settings.html – настройки темы!
Сниппеты
Шаблоны
404 Статья Блог Корзина Категория Сравнение Главная HTML Товар Страница Поиск

6. Настройки темы
1. Объект settings – методы
определяются атрибутами name
формы из settings.html.
2. Объект можно использовать в
любом шаблоне, а также в
файлах *.js.liquid, *.css.liquid
3. Пример использования –
{% if settings.show_text %}{{
blocks.smth.content }}{% endif %}

7. Liquid
http://wiki.insales.ru/wiki/Liquid
• {% теги – логика построения страницы на основе значений
переменных %}
• {{ вывод данных в код страницы }}
• product.title | фильтр – преобразование данных из product.title
(можно использовать несколько фильтров)
Теги:
• For ({% for col in collections %})
• If ({% if characteristic.handle == ‘new’ %})
• Tablerow ({% tablerow products by 3 %})
• Assign ({% assign curr_prod = product %}, можно использовать
фильтры)
• Capture ({% capture im_title%}img_{{product.title}}.jpg{% endcapture
%})
• Comment
Платформа интернет-магазина

8. Шаблон HTML (layout.liquid)
• Описывает все, что находится на всех страницах (подвал, шапка,
сайдбары, head, …)
• Контент страниц содержится в строковой переменной content_for_layout
• Самые полезные переменные:
– template
– keywords
– description
– title
– cart_url
• Объекты
– block_lists
– linklists
– collections
– cart
– blog
– account
– client
• Полная иерархия объектов и связи между ними:
http://wiki.insales.ru/wiki/Variables
http://wiki.insales.ru/wiki/Objects

9. Шаблон Категория (collection.liquid)
• Описывает страницы, содержащие в URL ‘/collection/’
• Объект collection определен!
• Методы:
– properties
– options
– products
– subcollections
– meta_description
– meta_description
– page_title
• Специальный тег paginate ({% paginate products by 21 %})
• Полезное свойство внутри paginate – current_page ({% if paginate['current_page'] == 1 %})
• Возможные параметры GET-запросов:
– ?order={price, descending_price, title, age}
– ?page_size={num до 100!}
– ?characteristics[]={{characteristic.id}} (можно несколько, в т.ч. от одного property)
– ?options[{{option.id}}][] ={{value.id}} (можно несколько, в т.ч. от одного option)
– ?price_min={num}, ?price_max={num}
– ?q={string} (поисковый запрос)
• Есть JSON, при наличии callback-функции поддерживает кроссдоменные запросы (полезно
для создания виджетов для вставки на внешние сайты)

10. Шаблон Товар (offer.liquid)
• Описывает страницы, содержащие в URL ‘/product/’
• Объект product определен!
• Если в URL также содержится ‘/collection/’, то и объект collection
определен
• Методы:
– available
– images
• small_url (48Х48)
• thumb_url (100x100)
• compact_url (160x160)
• medium_url (240x240)
• large_url (480x480)
• original_url - оригинальное
– variants
• price
• sku
• quantity
• option_values
• Тоже есть JSON (не кешируется, в отличие от страницы)

11. Шаблон Корзина (cart.liquid)
• Описывает страницу /cart_items
• Методы
– items (item == variant!)
– coupon
– discounts
• Есть JSON, на который можно отправлять GET
и POST-запросы

12. Полезные JSON’ы
• /client_account/feedback.json (POST)
• /client_account/contacts.json (GET)
• /update_all.json (POST)
• /fast_checkout.json (POST)

13. Check-out, ЛК покупателя
• Шаблоны ЛК и чекаута не редактируются!
• НО! Можно менять css - custom_checkout.css
• Есть поле для вставки любого кода на все страницы (в т.ч. js), в
т.ч. действует на страницы ЛК и чекаута, код вставляется перед
закрывающим body (требуются права администратора)
• Есть поле для кода на странице «Спасибо за заказ!», можно
использовать все методы объекта order (наследует все методы
объекта cart + имеет несколько своих, в т.ч. number, pay_url,
fulfillment_status, client и т.д.), вставляется после открывающего
body (требуются права администратора)

14. Шаблоны писем и печатной формы заказа
• Письмо покупателю о заказе
• Письмо владельцу магазина о новом заказе
• Печатная форма заказа
• Уведомление покупателю о регистрации
• Можно использовать объект order и все его
методы
• Требуется доступ к разделу Заказы
(редактирование)

15. Спасибо за внимание!
примеры применения liquid
полезные куски кода
Анастасия Качалова
InSales
Старший специалист клиентской технической
поддержки
insales.ru
e-mail: ak@insales.ru
Платформа интернет-магазина