Top.Mail.Ru

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

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

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

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

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

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

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

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

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

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

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

Общее руководство по устройству тем: https://www.insales.ru/collection/doc-sozdanie-tem

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

Поиск по файлам темы

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

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

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

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

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

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

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

Оценки: 0

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