Блог

Ноя 13

Подсветка кода в админке опенкарт

Все предыдущие статьи по работе c cms opencart касались пользовательской части. Сегодня поговорим об административной части, а точнее о визуальном редакторе опенкарт Summer Note.

В данном примере рассматривается версия опенкарт 2.3 (OcStore 2.3).

Проверьте, какой редактор у вас установлен в настройках опенкарт. Заходим в

Система -> Настройки -> Сервер -> Визуальный редактор по умолчанию

Выбираем в качестве редактора Summer Note.

По умолчанию редактор опенкарт не подсвечивает и не нумерует исходный код, что серьезно затрудняет работу с ним. Самое интересное, что функционал, который выполняет подсветку кода, уже встроен в опенкарт версии 2.3. За подсветку кода в опенкарт отвечает javascript библиотека Codemirror, ее файлы мы и будем подключать. Еще раз обращаем внимание, что все изменения происходят в версии opencart 2.3 (OcStore 2.3).

Прямое изменение кода

Как всегда мы рассматриваем два варианта, прямое изменение кода (кому-то проще, но не всегда правильно) и модификатор подсветки кода. В обоих случаях нет никаких сложностей.

Итак, находим файл:

admin/view/template/common/header.tpl

и перед строкой:

<link type="text/css" href="view/stylesheet/stylesheet.css" rel="stylesheet" media="screen">

Подключаем библиотеку codemirror:

<link rel="stylesheet" type="text/css" href="view/javascript/codemirror/lib/codemirror.css">
 <script type="text/javascript" src="view/javascript/codemirror/lib/codemirror.js"></script>
 <script type="text/javascript" src="view/javascript/codemirror/lib/xml.js"> </script>
 <script type="text/javascript" src="view/javascript/codemirror/lib/formatting.js"> </script>

После этого не забываем сбрасывать кэш.

Вот такую картинку мы видим до изменений:

исходный код

Получаем следующий результат:

белая тема

Какие изменения произошли:

  • появилась нумерация строк;
  • реализована подсветка кода;

На этом этапе можно остановится, кому подходит светлый вариант подсветки, а меня он абсолютно не устраивает, потому что привык, когда исходный код идет в темной теме.

Исправляем данную картину, изменяя тему по умолчанию на темную (данные изменения по желанию).

Находим нашу новую строчку :

<link rel="stylesheet" type="text/css" href="view/javascript/codemirror/lib/codemirror.css">

и после нее вставляем:

<link rel="stylesheet" type="text/css" href="view/javascript/codemirror/theme/cobalt.css">

Открываем файл:

admin/view/javascript/codemirror/lib/codemirror.js

Ищем строку :

option("theme", "default", function(cm) {

Меняем на:

option("theme", "cobalt", function(cm) {

Сохраняем, сбрасываем кэш, обновляем модификаторы.

Получаем такую картинку:

скрин темы

Нам комфортнее работать с данным темным вариантом оформления.

Модуль (модификатор) подсветки и нумерации кода.

Модуль делает все изменения, что мы рассмотрели выше, без постороннего вмешательства и изменения основного кода. Работать с модулем всегда проще, быстрее, удобнее. Просто через админку опенкарт загрузите модуль, сбросьте кэш в админке, обновите модификаторы и сбросьте кэш браузера. После этого можете наслаждаться результатом.

Вариант со светлой темой не вносит никаких изменений в вашу тему, вариант с темной темой перезапишет файл codemirror.js.

Внимание! Перед установкой рекомендуем проверить вашу версию опенкарт. Если вы используете платную тему, то модификатор может не сработать. В данном случае компания NeoAgency готова прийти к вам на помощь. Оставляйте заявку на сайте или звоните менеджеру.

Скачать модификатор подсветки кода (светлая тема)

Скачать модификатор подсветки кода (темная тема)