Top.Mail.Ru

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

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

Для построения шаблонов используются стандартные языки 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 строки до и после результата.

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

Оставить оценку

Оценка успешно отправлена.
Она будет проверена администратором перед публикацией.
Перед публикацией все оценки проходят модерацию

Оценки: 0

Остались вопросы?
Отправь тикет в техподдержку!
Еще нет своего магазина?
Создайте интернет-магазин на платформе inSales
Всё для продаж уже внутри!
Недавно просмотренные статьи