Руководство дизайнера

Оглавление

Основные понятия редактора шаблонов

Для управление дизайном в SellBe используется язык шаблонов Liquid.

Liquid - это простой язык программирования, который говорит SellBe, что делать. Он используется в сочетании с HTML и CSS. Есть два вида Liquid тегов:

  • {% ... %} - это логический тег. Ничего не будет визуально отображаться на экране, когда мы его используем;
  • {{ ... }} - это тег для вывода. Что-то будет визуально отображаться на экране, когда мы используем этот тег;

Например, если мы хотим отобразить название магазина в нашем макете, то мы используем тег вывода {{}}:

<h1>{{ shop.name }}<h1>
Мой магазин

«shop» в данном примере является переменной шаблона.

Переменные шаблона

Переменные шаблона - это часть данных, которые мы можем использовать в нашем магазине. Вот несколько примеров популярных объектов

shop.url – возвращает адрес интернет магазина
product.title – возвращает название товара
cart.item_count – возвращает количество товаров в корзине

Переменные шаблона можно разделить на группы: глобальные и локальные.

Глобальные переменные шаблона

Глобальные переменные – те, которые доступны на всех шаблонах независимо от страницы.

Локальные переменные шаблона

Локальные переменные – те, которые доступны для определенного шаблона.

cart.liquid нет
client-info.liquid нет
client-order.liquid
client-orders.liquid
client-password-remind.liquid нет
client-password-reset.liquid
  • email - email для восстановления пароля
  • code - код подтверждения
client-registration.liquid нет
feedbacks.liquid
index.liquid нет
page.liquid и page.*.liquid
pricelist.liquid
product.liquid
  • product - товар (тип product)
  • parent_categories - список родительских категорий (тип item)
product-image.liquid
product-inform.liquid
products.liquid
  • products - список товаров (тип product)
  • pager - постраничная листалка (тип pager)
  • sorter - направление сортировки (тип sorter)
  • sizer - количество записей на странице (тип sizer)
  • item - категория, если это просмотр категории товаров (тип item)
  • collection - коллекция, если это просмотр коллекции товаров (тип collection)
  • brand - производитель, если это просмотр товаров производителя (тип brand)
products-search.liquid
  • text - текст для поиска
  • products - список товаров (тип product)
  • pager - постраничная листалка (тип pager)
  • sorter - направление сортировки (тип sorter)
  • sizer - количество записей на странице (тип sizer)
publication.liquid
publications.liquid
  • publications - список публикаций (тип publication)
  • pager - постраничная листалка (тип pager)
  • sizer - количество записей на странице (тип sizer)
purchase.liquid
sitemap.liquid

Шаблоны

Шаблоны определяют внешний вид и содержание страницы. Давайте предположим, что посетитель открыл главную страницу интернет магазина, тогда SellBe будет использовать index.liquid для создания содержимого страницы. Если же посетитель видит один из товаров вашего интернет магазина, то SellBe будет использовать шаблон product.liquid для формирования страницы продукта.

Шаблоны SellBe

  • 404.liquid – Ошибка 404, когда страница не найдена
  • cart.liquid – Корзина пользователя
  • client-info.liquid – Редактирование пользовательского профиля
  • client-order.liquid – Страница заказа
  • client-orders.liquid – Список заказов покупателя
  • client-password-remind.liquid – Напоминание пароля
  • client-password-reset.liquid – Установка нового пароля
  • client-registration.liquid – Регистрация пользователя
  • feedbacks.liquid – Отзывы посетителей
  • index.liquid – Главная страница
  • page.liquid и page.*.liquid – Страница, созданная в панели администрирования
  • pricelist.liquid – Прайс-лист магазина
  • product.liquid – Карточка товара
  • product-image.liquid – Изображение товара
  • product-inform.liquid – Уведомить о поступлении товара
  • products.liquid – Список товаров
  • products-search.liquid – Поиск товаров
  • publication.liquid - Публикация
  • publications.liquid – Список публикаций
  • purchase.liquid – Оформление покупки
  • sitemap.liquid – Карта сайта

Шаблоны используют разметку. Разметка - это своего рода контейнер для шаблонов.

Разметка

В разметке определена основная структура страниц сайта. Такие элементы, как меню, логотип, контакты, корзина, нижняя часть страницы со счетчиками и ссылками, проще всего подключить именно здесь, так как они отображаются на всех страницах. Для того, чтобы шаблоны в определенной части разметки имели возможность вставить свой код, существуют зоны. Зона – это контейнер для модулей шаблона.

К примеру, наш дизайн имеет 3 колонки, в каждой из которых на разных страницах отображаются разные блоки, тогда код разметки будет иметь следующий вид:

<section class="center">
  <div class="left-col">
    <SB:Zone name="left" />
  </div>
  <div class="content">
    <SB:Zone name="content" />
  </div>
  <div class="right-col">
    <SB:Zone name="right" />
  </div>
</section>

Тег <SB:Zone/> определяет зону, а атрибут name имя зоны.

Для того, чтобы в шаблоне определить зону, в которой отобразятся блоки, существует тег <SB:ZoneContent />, например:

<SB:ZoneContent name="left">
  <SB:Module name="item-tree" title="Категории"></SB:Module>
  <SB:Code title="Шапка страницы">
    <h1>{{ shop.title }}</h1>
  </SB:Code>
</SB:ZoneContent>

В примере выше в зону «left» добавляется модуль «item-tree» и блок кода, который отображает название интернет магазина.

Модули

Если какой-то элемент, к примеру, постраничный переход, дерево категорий присутствует на нескольких страницах интернет магазина, то это является поводом перенести его в модули. Модули бывают двух типов: специальные и обычные.

У модуля могут быть определены атрибуты.

<SB:Module name="products" title="Список товаров">
  <collection_id>0</collection_id>
  <count>9</count>
</SB:Module>

В данном примере добавлен модуль "products.liquid" и определено два атрибута collection_id и count со значениями 0 и 9 соответственно.

Специальные модули

«products» и «products.*» – модуль для отображения списка товаров выбранной коллекции.
Параметры:
  • collection_id – идентификатор коллекции, который можно посмотреть на странице со списком коллекций. Если 0, то это случайная выборка товаров.
  • count – количество товаров, отображаемое в блоке;
«publications» и «publications.*» – модуль для отображения списка публикаций.
Параметры:
  • count – количество публикаций, отображаемое в блоке;
«questionnaire» и «questionnaire.*» – модуль для отображения опроса.
Параметры:
  • questionnaire_id – номер опроса.

Обычные модули

Обычные модули не связанны с выборками. Они создаются просто для удобства. Хорошим примером будет блок постраничного перехода. Так как он используется на нескольких шаблонах, то его код сохранен в модуле pager.liquid для удобства.

Основы Liquid

Использование языка разметки Liquid

Для управление дизайном в SellBe используется язык шаблонов Liquid. Это простой в освоении и достаточно мощный язык.

В языке Liquid есть два основных вида конструкций: Вывод данных (Output) и Теги (Tag).

  • Вывод данных заключается в {{ двойные фигурные скобки }}
  • Теги заключаются в {% фигурные скобки с процентом %}

Блоки вывода данных всегда заменяются на то, на что они ссылаются. Если в шаблон передаётся информация о товаре через переменную product, то конструкция

{{ product.title }}

выведет его имя.

Теги управляют логикой шаблонов. С их помощью вы можете организовывать циклы и логику ветвления.

Вывод данных

Пример вывода данных:

<h1>{{ shop.name }}<h1>
Мой магазин

Фильтры

Для преобразования выходных данных можно использовать фильтры. Фильтры это обычные функции. В следующем примере фильтр money применяется к стоимости товара

{{ product.price | money }}

В зависимости от выбранной пользователем валюты и стоимости товара результат может быть: $8.32 или 439грн

Теги

Теги для логики в шаблоне.

Комментарий

Комментарии заключены в "{% comment %}" - открывающий тег и "{% endcomment %}" - закрывающий тег. Как и в других языках, все символы, заключенные этими тегами, будут проигнорированы и не будут обрабатываться с помощью языка.

Интернет магазин {% comment %}«Закрыт»{% endcomment %} «Открыт»

В результате получим:

Интернет магазин «Открыт»

Не Liquid код

Не Liquid код – это код, который не будет переводиться языком Liquid. Любые теги, добавленные между открывающим тегом "{% literal %}" и закрывающим "{% endliteral %}", будут проигнорированы анализатором Liquid.

{% literal %} {{ shop.url }} – адрес интернет магазина {% endliteral %}.

В результате получим:

{{ shop.url }} – адрес интернет магазина

Условные операторы if/else/unless

if и else должны быть хорошо известны из любого языка программирования. Liquid позволяет писать простые выражения if. Unless - это противоположность if и используется, если вам нужно проверить, что что-то не истинно.

{% if product.price_old > 0 %}
  Старая цена {{ product.price_old }}
{% endif %}

Если старая цена у товара больше нуля, то появится текст - «Старая цена ...»

Условный оператор case

Если вам нужно больше, чем одно условие, то вы можете использовать case

{% case condition %}
  {% when 1 %}
    Первый
  {% when 2 %}
    Второй
  {% else %}
    Не первый и не второй
{% endcase %}

Цикл for

Цикл применяется для обхода массивов элементов

{% for item in array %}
  {{ item }}
{% endfor %}

При обходе массива доступны дополнительные переменные:

forloop.length  # => количество элементов в массиве
forloop.index   # => номер текущей итерации
forloop.index0  # => номер текущей итерации (считая от нуля)
forloop.rindex  # => сколько элементов осталось
forloop.rindex0 # => сколько элементов осталось (считая от нуля)
forloop.first   # => первая итерация?
forloop.last    # => последняя итерация?

Можно задавать сдвиг и максимальное число элементов для обхода:

limit позволяет ограничить число обходимых элементов. offset позволяет начать обход с n-ого элемента.

# Если array = [1,2,3,4,5,6] ...
{% for item in array limit:2 offset:1 %}
  {{ item }}
{% endfor %}
# вернёт 2,3

Вместо обхода значений существующего массива, можно задать диапазон чисел, которые нужно обойти. Диапазон можно прописать в коде или задать переменной:

# Если item.quantity = 4 ...
{% for i in (1..item.quantity) %}
  {{ i }}
{% endfor %}
# вернёт 1,2,3,4

Таблицы

Liquid позволяет разбить массив элементов на таблицу, состоящую из определенного количества колонок:

{% tabulate product in products cols:3 %}
  {{ tabulateloop.col }} {{ product.title }}
{% endtabulate %}

Вы также можете узнать, находится ли ячейка таблицы в первой или последней колонке в строке запроса или же прямо номер столбца:

tabulateloop.length    # => количество элементов в массиве
tabulateloop.index     # => номер текущей итерации
tabulateloop.index0    # => номер текущей итерации (считая от нуля)
tabulateloop.rindex    # => сколько элементов осталось
tabulateloop.rindex0   # => сколько элементов осталось (считая от нуля)
tabulateloop.first     # => это первая итерация?
tabulateloop.last      # => это последняя итерация?
tabulateloop.col       # => номер столбца в текущей строке
tabulateloop.col0      # => номер столбца в текущей строке (считая от нуля)
tabulateloop.col_first # => это первый столбец в строке?
tabulateloop.col_last  # => это последний столбец в строке?

Вставка модуля

Liquid позволяет вставить модуль в любое место разметки. К примеру, добавим модуль со списком случайных товаров.

{% module products collection_id:0, count:4 %}

Выполнить

Тег parse позволяет выполнить Liquid код. К примеру, следующий код даст одинаковый результат:

{% parse "<h1>{{ shop.title }}</h1>" %}

и

<h1>{{ shop.title }}</h1>

Этот тег полезен, когда вы храните часть Liquid кода в переводах.

Объекты и их свойства

Магазин (тип shop)

title Название интернет магазина
url Адрес интернет магазина
domain Доменное имя интернет магазина
logo Адрес изображения логотипа
create_date Дата регистрации магазина
map_location Координаты магазина на карте
counters Счетчики магазина
min_order_amount Минимальная сумма заказа
comments_enabled Отображать комментарии
theme_root_url Путь к папке с файлами текущего дизайна
files_root_url Путь к папке с файлами магазина
currencies Список валют магазина (тип currency)
menu Список пунктов меню (тип menu_item)
contacts Список контактов (тип contact)

Валюта (тип currency)

code Коды валюты в формате ISO 4217
sign Знак валюты

Пункт меню (тип menu_item)

title Название пункта меню
url Адрес пункта меню

Контакт (тип contact)

key Ключ
value Значение

Товар (тип product)

id Номер
articul Артикул
title Название товара
announce Анонс
description Описание
image_small Фото товара уменьшенное
image_large Фото товара не уменьшенное
price Цена
price_old Старая цена
available_count Количество в наличии
url Адрес товара
url_inform Адрес страницы уведомить о поступлении
item Категория товара (тип item)
brand Производитель товара (тип brand)
properties Список дополнительных свойств товара (тип property)
images Список изображений галереи (тип image)
comments Список комментариев (тип comment)
related Список связных товаров (тип product)
labels Список ярлыков (тип label)

Категория (тип item)

id Номер
title Название категории
description Описание
image_small Фото категории уменьшенное
image_large Фото категории не уменьшенное
url Адрес категории
sub_categories Список подкатегорий (тип item)

Производитель (тип brand)

id Номер
title Название категории
description Описание
url Адрес категории

Свойство (тип property)

id Номер
name Название свойства
values Значения свойства (тип property_value)

Значение свойства (тип property_value)

id Номер
name Название
price_delta Изменение стоимости

Изображение (тип image)

id Номер
position Порядковый номер
title Название
image_small Фото уменьшенное
image_large Фото не уменьшенное
url Адрес страницы изображения

Комментарий (тип comment)

id Номер
author Автор комментария
text Текст
Date Дата

Ярлык (тип label)

title Название
key Ключ

Корзина (тип сart)

total_price Итоговая цена
discount Размер скидки
item_count Количество товаров
items Товары в корзине (тип cart_item)

Товар в корзине (тип cart_item)

product Товар (тип product)
selected_properties Список выбранных свойств товара (тип property_selection)
quantity Количество единиц товара с указанным списком свойств
price Цена единицы

Выбранное свойство (тип property_selection)

property_id Номер свойства
property_name Название свойства
value_id Номер значения свойства
value_name Название значения свойства
price_delta Изменение стоимости

Заказ (тип order)

id Номер
code Код
url Адрес страницы с информацией о товаре
user_name Имя покупателя
email Email
phone Телефон
contact_info Контактная информация
additional_info Дополнительная информация
discount_percent Процент скидки
products_price Стоимость товаров
discount Размер скидки
payment_fee Размер комиссии за выбранный тип оплаты
delivery_fee Размер комиссии за доставку
total_sum Итоговая стоимость заказа
create_date Дата заказа
payment_status Код статуса платежа
order_status Статус заказа
payment_url Адрес для оплаты через платежную систему
payment Способ оплаты (тип payment_type)
delivery Способ доставки (тип delivery_type)
cart Корзина (тип сart)
messages Список сообщений (тип message)

Способ оплаты (тип payment_type)

id Номер
title Название

Способ доставки (тип delivery_type)

id Номер
title Название

Сообщение (тип message)

is_shop Сообщение от администратора магазина
text Текст
date Дата

Публикация (тип publication)

id Номер
title Название публикации
announce Анонс
description Описание
date Дата публикации
image_small Фото публикации уменьшенное
image_large Фото публикации не уменьшенное
url Адрес товара
images Список изображений галереи (тип image)

Опрос (тип questionnaire)

id Номер
question Вопрос
total_votes Количество проголосовавших
answers Список ответов (тип questionnaire_answer)

Ответ (тип questionnaire_answer)

id Номер
text Текст ответа
vote_count Количество голосов
vote_percent Процент проголосовавших за этот пункт от общего количества

Страница (тип page)

title Заголовок страницы
html HTML код страницы
url Адрес страницы

Отзыв (тип feedback)

id Номер
author Автор
text Текст отзыва
date Дата добавления

Параметры текущего запроса (тип request)

url Адрес запрашиваемой страницы
currency Валюта (тип currency)

Коллекция (тип collection)

title Название коллекции
url Адрес страницы со списком товаров коллекции

Пользователь (тип client)

name Имя клиента
email Email
phone Телефон
contact_info Контактная информация
discount_percent Процент скидки

SEO (тип seo)

title Заголовок страницы
meta_description meta description
meta_keywords meta keywords

Постраничная листалка (тип pager)

current_page Номер текущей страницы
size Размер страницы
pages Количество страниц
items Количество записей всего
previous Предыдущая страница (тип page_link)
next Следующая страница (тип page_link)
parts Список ссылок для перехода (тип page_link)

Ссылка для постраничной листалки (тип page_link)

page Номер страницы
url Адрес страницы

Количество записей на странице (тип sizer)

current_size Текущее количество записей на странице
parts Список ссылок для перехода (тип size_link)
size Количество записей на странице
url Адрес страницы

Направление сортировки (тип sorter)

current_direction Текущее направление для сортировки
parts Список ссылок для сортировки (тип sort_link)
direction Направление для сортировки
url Адрес страницы

Настройки SellBe (тип sellbe)

ads_250x250 Рекламный блок 250 на 250
ads_468x60 Рекламный блок 468 на 60
ads_728x90 Рекламный блок 728 на 90
counters Счетчики SellBe
captcha_url Адрес для получения CAPTCHA изображения
core_js Адрес с основным скриптом SellBe, который отвечает за работу магазина

Словарь

Позволяет получить значение по ключу. К примеру, мы знаем что в словаре records есть ключ hello_text, который имеет значение «Добрый день».

{{ records['hello_text'] }}.

В результате получим:

Добрый день.