Все предыдущие статьи по работе 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 готова прийти к вам на помощь. Оставляйте заявку на сайте или звоните менеджеру.
Комментарии закрыты.