23:30 Руководство дизайнера | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ОглавлениеОсновные понятия редактора шаблоновДля управление дизайном в SellBe используется язык шаблонов Liquid. Liquid - это простой язык программирования, который говорит SellBe, что делать. Он используется в сочетании с HTML и CSS. Есть два вида Liquid тегов:
Например, если мы хотим отобразить название магазина в нашем макете, то мы используем тег вывода {{}}: <h1>{{ shop.name }}<h1> Мой магазин «shop» в данном примере является переменной шаблона. Переменные шаблонаПеременные шаблона - это часть данных, которые мы можем использовать в нашем магазине. Вот несколько примеров популярных объектов shop.url – возвращает адрес интернет магазина product.title – возвращает название товара cart.item_count – возвращает количество товаров в корзине Переменные шаблона можно разделить на группы: глобальные и локальные. Глобальные переменные шаблона Глобальные переменные – те, которые доступны на всех шаблонах независимо от страницы.
Локальные переменные шаблона Локальные переменные – те, которые доступны для определенного шаблона.
ШаблоныШаблоны определяют внешний вид и содержание страницы. Давайте предположим, что посетитель открыл главную страницу интернет магазина, тогда SellBe будет использовать index.liquid для создания содержимого страницы. Если же посетитель видит один из товаров вашего интернет магазина, то SellBe будет использовать шаблон product.liquid для формирования страницы продукта. Шаблоны SellBe
Шаблоны используют разметку. Разметка - это своего рода контейнер для шаблонов. РазметкаВ разметке определена основная структура страниц сайта. Такие элементы, как меню, логотип, контакты, корзина, нижняя часть страницы со счетчиками и ссылками, проще всего подключить именно здесь, так как они отображаются на всех страницах. Для того, чтобы шаблоны в определенной части разметки имели возможность вставить свой код, существуют зоны. Зона – это контейнер для модулей шаблона. К примеру, наш дизайн имеет 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="category-tree" title="Категории"></SB:Module> <SB:Code title="Шапка страницы"> <h1>{{ shop.title }}</h1> </SB:Code> </SB:ZoneContent> В примере выше в зону «left» добавляется модуль «category-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.*» – модуль для отображения списка товаров выбранной коллекции. Параметры:
«publications» и «publications.*» – модуль для отображения списка публикаций. Параметры:
«questionnaire» и «questionnaire.*» – модуль для отображения опроса. Параметры:
Обычные модули Обычные модули не связанны с выборками. Они создаются просто для удобства. Хорошим примером будет блок постраничного перехода. Так как он используется на нескольких шаблонах, то его код сохранен в модуле 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/unlessif и 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)
Валюта (тип currency)
Контакт (тип contact)
Товар (тип product)
Категория (тип category)
Производитель (тип brand)
Свойство (тип property)
Значение свойства (тип property_value)
Изображение (тип image)
Комментарий (тип comment)
Ярлык (тип label)
Корзина (тип сart)
Товар в корзине (тип cart_item)
Выбранное свойство (тип property_selection)
Заказ (тип order)
Способ оплаты (тип payment_type)
Способ доставки (тип delivery_type)
Сообщение (тип message)
Публикация (тип publication)
Опрос (тип questionnaire)
Ответ (тип questionnaire_answer)
Страница (тип page)
Отзыв (тип feedback)
Параметры текущего запроса (тип request)
Коллекция (тип collection)
Пользователь (тип client)
SEO (тип seo)
Постраничная листалка (тип pager)
Ссылка для постраничной листалки (тип page_link)
Количество записей на странице (тип sizer)
Ссылка для количества записей на странице (тип size_link)
Направление сортировки (тип sorter)
Ссылка для направление сортировки (тип sort_link)
Настройки SellBe (тип sellbe)
Словарь Позволяет получить значение по ключу. К примеру, мы знаем что в словаре records есть ключ hello_text, который имеет значение «Добрый день». {{ records['hello_text'] }}. В результате получим: Добрый день. Смотрите также руководство пользователя. Источник http://sellbe.com/help/designer-guide.aspx#liquid_cart | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Всего комментариев: 0 | |