Редактор кода

На всех тарифах, начиная со «Стандартного», платформа дает возможность редактировать исходный код установленного шаблона.

Для построения шаблонов используются стандартные языки HTML, CSS и JavaScript. Помимо этого, InSales задействует шаблонизатор Liquid.

Liquid позволяет напрямую обращаться к информации из бэк-офиса (например, выводить названия и цены), а также производить базовые операции из классического программирования: выполнять циклы, создавать массивы и т.п.
Особенностью Liquid является то, что он выполняется на серверной стороне – в отличие от JavaScript, исполняющегося на стороне браузера и лишь после начала загрузки страницы.

Для полноценной работы с шаблонами желательно изучить данный язык. В этом вам могут помочь следующие материалы: https://liquidhub.ru

1. Вход в редактор
2. Общий вид редактора
3. Начало работы
4. Редактирование файлов
5. Поиск по файлам шаблона

Вход в редактор

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

Если ваш тариф «Стартовый», при попытке перейти в редактор система перенаправит вас в раздел «Показатели» бэк-офиса.

Общий вид редактора

1. Поиск по названиям позволяет найти файлы шаблона по их наименованию. Например, если у вас есть сниппет breadcrumb, можно ввести crumb, и лишние файлы отображаться не будут:
   
2. Файловая структура шаблона делится на составляющие:
   
   • шаблоны – отвечают за формирование общих страниц (главная, категория, товар, блог, статическая страница и т.п.); 
   • сниппеты – функциональные фрагменты, т.е. "кирпичики", из которых состоит шаблон; 
   • стили – файлы форматов .css и .scss; 
   • скрипты – файлы формата .js; 
   • SVG – векторные изображения;
   • файлы шаблона – картинки и шрифты;
   • настройки шаблона – системные файлы .html и .json 
3. Поиск по файлам шаблона позволяет найти именно те файлы, в коде которых встречается искомое слово. Это удобно, например, для поиска по HTML-классам или конкретным словам.
4. Сохранить - предназначена для сохранения изменений в коде шаблона.

Подробнее о структуре шаблонов

Начало работы

Чтобы развернуть или свернуть нужную папку, просто кликните по ее названию (кликабельная область обозначена серым цветом при наведении):

Шаблоны обычно раскрыты по умолчанию, так как используется чаще остальных.

Иконка шестеренки позволяет добавить шаблон, сниппет или иной файл:

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

Редактирование файлов

Нажмите на название нужного файла, чтобы открыть его в редакторе:

В процессе редактирования вы можете использовать горячие клавиши:

• tab: добавить отступ для выделенных строк;
• tab + shift: отформатировать выделенные строки;
• зажать alt: вертикальное выделение строк.

Элементы шаблонизатора Liquid для удобства имеют серый фон (см. предыдущий скриншот).

Кликнув по открывающему HTML-тегу, можно увидеть закрывающий, и наоборот:

Как и в большинстве других редакторов, доступна отмена операции (Ctrl+Z) и повтор отмененной операции (Ctrl+Y).

Когда одновременно открыто несколько файлов, можно быстро переключаться между ними, кликая по названиям:

Чтобы закрыть вкладку с файлом, нажмите на крестик:

Поиск по файлам шаблона

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

Например, в корзине есть сообщение с текстом "Ваша корзина пуста". Можно просто ввести эту фразу в поиск:

Система выдаст все файлы, в которых встречается вхождение:

В данном случае такой файл один – messages.json. На 7-й строке мы видим нужную фразу.
Дополнительно показываются по 3 строки до и после результата.

Если нажать на название файла, мы откроем окно его редактирования, при этом редактор сразу подсветит строку: