Для измерения скорости используйте фильтр date.
См. пример ниже.
{% capture start_time %}{{'now' | date: '%s.%L' }}{% endcapture %}
{% include 'head' %}
<!-- Render time: {{ 'now' | date: '%s.%L' | minus: start_time }} -->
Меню это список, поэтому мы можем построить меню из любых массивов которые доступны в liquid.
Например массив категорий на сайте, массив блогов, массив статей, массив блоков и конечно массив ссылок из раздела «Меню и статьи».
Для вывода ссылок из конкретных каталогов или меню необходимо использовать пермалинки.
Для такого меню пермалинком является main-nav, значит для вывода пунктов нужно использовать linklists.main-nav.links.
Далее простые реализации меню:
Чтобы создать виджет в шаблоне нужно указать следующие данные в setup.json:
widget_types
theme_widgets -> widget_lists
widget_types отвечает за создание виджета.
widget_types имеет следующие свойства:
"block_template": шаблон блокок которые будут добавляться в виджете
"name": заголовок виджета
"handle": уникальный пермалинк для типов виджетов
"type": "block_list_widget_type"
"snippet": название сниппета который будет привязан к виджету, например - "widget_shippet.liquid". Сниппет должен присутствовать в теме.
widget_lists содержит в себе виджет листы, которые содержат в себе массивы виджетов.
В ликвид доступна переменна widget_lists в которой по ключу можно получить массив виджетов.
widget_lists.index-list.widgets
widget_lists содержит массив объектов с полями:
"name": имя виджет листа (указать уникальное имя на латинице)
"handle": пермалинк виджет листа, используется для доступа в виджетам в ликвид (в пермалинке виджет листа запрещен символ нижнего подчеркивания)
"widgets" массив виджетов
В массиве виджетов находятся с объекты с указанным типом виджета и пермалинком панели блоков
"widget_type": тут указывается handle из widget_types
"data_handle": тут пермалинк из block_lists
{% for widgetDrop in widget_lists.index-list.widgets %}
{% widget widgetDrop %}
{% endfor %}
{
"block_lists": {
"mainblock": {
"block_template": "system-image-and-content",
"title": "Наша тестовая панель блоков",
"blocks": [
"image-text-1"
]
}
},
"blocks": {
"image-text-1": {
"block_template": "system-image-and-content",
"title": "Блок внутри тестового виджета",
"content": "Контент внутри тестового виджета",
"image": "empty.jpg"
}
},
"theme_widgets": {
"widget_lists": [{
"name": "index",
"handle": "index-list",
"widgets": [{
"widget_type": "test_handle",
"data_handle": "mainblock"
}]
}],
"widget_types": [{
"block_template": "system-image-and-content",
"name": "Заголовок тестового виджета",
"handle": "test_handle",
"type": "block_list_widget_type",
"snippet": "widget_test_snippet.liquid"
}]
}
}
Темы InSales состоят из liquid-файлов, каждый из которых служит для определенных задач. Например, collection.liquid используется для отображения товаров внутри категории, а product.liquid - для отображения информации о конкретном товаре.
Структура папок:
root/
|-- config/
|-- media/
|-- snippets/
|-- templates/
Эта директория содержит ассеты, используемые в теме, в том числе изображения, стили, скрипты, svg-файлы (css, js и svg-файлы из директории media можно править с помощью редактора шаблонов в бек-офисе магазина). Для обращения к файлам из этой директории из шаблонов используйте фильтр asset_url (важно! css и картинки лежат в одном месте потому в таких случаях как background-image: url('./images/main.jpg') ссылка на файл указывается от корневой директории background-image: url('main.jpg')
, папки на платформе создавать нельзя)
Директория содержит Liquid-снипеты с кусочками кода, используемого в разных шаблонах / в разных частях сайта. Используйте include для включения снипета в шаблон.
Эта директория содержит файлы Liquid-шаблонов для основных типов страниц сайта, а также шаблоны лэйаутов, определяющий общую часть оформления и вёрстки страниц. По умолчанию в теме присутствует 2 лэйаута - layouts.layout.liquid (для всех страниц сайта, кроме личного кабинета и шаго оформления заказа) и layouts.checkout.liquid (для страниц оформления заказа).
тут файлы конфигурации темы
Нейминг шаблонов:
{{ content_for_layout }}
)Кастомные шаблоны для любой страницы можно сделать, со следующим неймингом:
Сначала идет имя лэйаута, потом кастомное имя.
product.hits.liquid
product.new.liquid
blog.news.liquid
page.contacts.liquid
Для подключения стоит использовать внутренний функционал платформы для склеивания файлов.
Для стилей нужно пользоваться директивой препроцессора sass — @import
или внутренней директивой #= require
Пример plugins.css:
#= require jquery.min
#= require magiczoomplus.min
#= require normalize.min
#= require swiper.min
#= require alertify.min
#= require magnific-popup.min
Пример main.scss:
@import 'header';
@import 'footer';
@import 'slider';
Важно! Файлы header, footer, slider могут быть как
scss
так иcss
.Используя
@import
и#= require
можно игнорировать расширение.Для удобности в файлы относящиеся к main.scss именуют с префиксом
_
, при импорте префикс игнорируется.main.scss компилируется в main.css, в тему подключается скомпилированный или склеенный main.scss.
Подключение js происходит аналогично, только используется директива #= require
.
Js файлы так же разделяются на два файла
plugins
иmain
.
Пример main.js:
#= require cart
#= require product
#= require collection
Подключение скриптов и стилей разделяется сниппетами, сниппет для стилей styles.liquid
для скриптов scripts.liquid
.
Сниппеты подключаются в главный лэйаут layouts.layout.liquid
.
Пример layouts.layout.liquid:
<!DOCTYPE html>
<html>
<head>
{% include 'head' %}
{% include 'styles' %}
</head>
<body class="adaptive">
<div class="page-wrapper">
<div class="page-inner container">
{% include 'header' %}
{{ content_for_layout }}
</div>
{% include 'footer' %}
</div>
{% include 'modals' %}
{% include 'scripts' %}
</body>
</html>
Содержимое styles.liquid:
<link rel="stylesheet" href="{{ 'plugins.css' | asset_url }}">
<link rel="stylesheet" href="{{ 'main.css' | asset_url }}">
Содержимое scripts.liquid:
<script type="text/javascript" src="{{ 'plugins.js' | asset_url }}"></script>
<script type="text/javascript" src="{{ 'main.js' | asset_url }}"></script>
Сниппеты в программировании — это небольшие фрагменты кода которые обычно повторно используются в коде программы (Статья на википедии).
Сниппеты на платформе InSales хранят в себе html код разметки и код написанный на шаблонизаторе liquid
.
Сниппеты включаются в шаблоны через директиву include
.
Пример:
Пример включения сниппета без передачи параметров.
{% include 'header' %}
Пример включения сниппета с передачей строки в виде параметра
{% include 'header' with "index" %}
При таком включении внутри сниппета header, параметр будет доступен в одноименной переменной {{ header }}
Пример кода сниппета header
{% if header == 'index' %}
# код для включения с параметром - index
{% else %}
# код обычного включения
{% endif %}
Пример включения сниппета с передачей нескольких параметров:
{% assign logo_text = 'Моя компания' %}
{% include 'logo', use_image: false, logo_text: logo_text %}
При таком виде включения, все передаваемые переменные стоит обнулять в конце кода сниппета, так как значения параметров кэшируется в переменные и можут быть использованы в следующих по коду сниппетах которые используют эти переменные.
Пример кода сниппета logo
{% if use_image %}
<img src="{{ 'logo.svg' | asset_url }}" />
{% else %}
{{ logo_text }}
{% endif %}
{% assign use_image = null %}
{% assign logo_text = null %}
Сниппеты могут содержать в себе включение других сниппетов.
Пример сниппета header
:
<div class="container">
<div class="row">
<div class="cell-2">
{% include "logo", modificator: 'in-header', use_image: true %}
</div>
<div class="cell-6">
{% include "menu", modificator: 'in-header', menu_class: 'main-menu', source_type: 'collection', source_handle: 'all', show_icon: true %}
</div>
<div class="cell-2">
{% include "search", modificator: 'in-header' %}
</div>
<div class="cell-2">
{% include "cart_widget", modificator: 'in-header' %}
</div>
</div>
</div>