Рекомендации по структуре проекта темы на платформе InSales
- Особенности шаблонов на InSales
- Подключение стилей и скриптов
- Как пользоваться сниппетами
- Как работать с API магазина на платформе InSales
Темы 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 (для страниц оформления заказа).
тут файлы конфигурации темы
Нейминг шаблонов:
- Главный лэйаут - layouts.layout.liquid (Все остальные шаблоны не являющиеся лэйаутами наследуют содержимое данного файла. Контент шаблонов будет вставлен на место тега
{{ content_for_layout }}
) - Главная - index.liquid
- Категория - collection.liquid
- Товар - product.liquid
- Корзина - cart.iquid
- Страница page.liquid
- Поиск search.liquid
- Блог blog.liquid
- Статья article.liquid
Кастомные шаблоны для любой страницы можно сделать, со следующим неймингом:
Сначала идет имя лэйаута, потом кастомное имя.
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>
Разрабатывая сайт на платформе InSales самым важным аспектом является знание всех возможностей которые предоставляет платформа.
API магазина это набор готовых контроллеров со стороны backend для работы с корзиной, получением информации о товаре, добавлением отзывов, фильтрации товаров в категории и т.д.
Обращение к API может быть как через отправки форм, так и через AJAX-запросы.
Пример формы добавления товара в корзину:
<form action="{{ cart_url }}" method="post">
<input type="hidden" name="variant_id" value="{{ product.variants.first.id }}" />
<input type="number" name="quantity" value="1" />
<button type="submit">Купить</button>
</form>
Пример AJAX-запроса для получения информации о товаре:
$.post('/products_by_id/62898073.json')
.done(function (product) {
console.log(product);
})
Для успешной разработки тем необходимо знать максимум возможностей API.
Описание AJAX-запросов можно почитать на liquidhub.ru.