Управление MODX Revolution с фронтенда. Пакет FrontendManager — настройки и кастомизация

Возможности FrontendManager

Дополнение позволяет пользователям редактировать содержимое страницы непосредственно с фронтенда, без необходимости переходить в интерфейс MODX Manager. Также в меню можно вывести ссылки на полезные ресурсы. 

Есть возможность открывать страницы админки в iframe — после сохранения страница автоматически перезагружается, поэтому вы сразу видите изменения на сайте.

Это может сэкономить время и улучшить пользовательский опыт, особенно для не знакомых с интерфейсом MODX. Полезно настраивать на клиентских сайтах для контент-менеджеров.

Установка и настройка

Перейдите в «Пакеты -> Установщик» и загрузите последнюю версию дополнения из репозитория modstore. После установите пакет.

Для корректной работы дополнения нужен установленный pdoTools в MODX, а на фронтенде - Jquery. Если вам не упало добавлять на сайт Jquery — можно подключить его непосредственно в плагине:

// после этой строки
$modx->resource->_output .=  $frontendManager->initialize($modx->context->key);
// добавьте строку
$modx->resource->_output =  '<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>' . $modx->resource->_output;

Если вы авторизованы в группе Administrator, то при открытии страниц сайта должна появиться панель управления.

Права доступа

Изначально панель показывается только пользователям группы Administrator, что не вполне удобно, если у вас на сайте несколько пользователей с разными правами доступа — например, еще контент-менеджер и копирайтеры.

Чтобы панель отображалась и у других пользователей — откройте плагин frontendmanager и добавьте новые группы пользователей на 2 строке:

$modx->user->hasSessionContext('mgr') || !$modx->user->isMember(['Administrator','CustomGroup'])) return;

На этом этапе плагин проверяет при начале загрузки страницы, авторизован ли пользователь в контексте mgr (то есть в админке), и каким группам он принадлежит.

Персонализация / Улучшение

Изначально панель выглядит так:

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

Базовый шаблон хранится в чанке tpl.frontendmanager. Скопируйте его, назовите как удобно, например tpl.frontendmanager.Custom.

Перейдите в «Системные настройки -> frontendmanager» и у ключа  frontendmanager_frontend_tpl замените значение на имя созданного чанка — tpl.frontendmanager.Custom.

Настройка кнопок

Изначально шаблон у нас такой:

<div id="frontendManager" class="fm-panel" >
	<a href="[[++manager_url]]" target="_blank" class="fm-logo"><img src="[[++manager_url]]templates/default/images/modx-icon-color.svg"></a>
	<a href="[[++manager_url]]" target="_blank" class="fm-mode"><span class="fm-icon-hide"><img src="[[++manager_url]]templates/default/images/modx-icon-color.svg"></span></a>
	<a href="[[++manager_url]]?a=resource/update&id={$_modx->resource.id}" data-action="iframe"><span class="fm-icon-edit"></span> <span class="fm-link-text">{'frontendmanager_btn_edit' | lexicon}</span></a>
	<a href="[[++manager_url]]?a=security/user" data-action="iframe"><span class="fm-icon-user"></span> <span class="fm-link-text">{'frontendmanager_btn_users' | lexicon}</span></a>
	<a href="[[++manager_url]]?a=mgr/orders&namespace=minishop2" data-action="iframe"><span class="fm-icon-ms2"></span> <span class="fm-link-text">{'frontendmanager_btn_ms2' | lexicon}</span></a>
	<a href="[[++manager_url]]?id=0&a=context/update&key={$_modx->context.key}" data-action="iframe"><span class="fm-icon-context"></span> <span class="fm-link-text">{'frontendmanager_btn_context' | lexicon}</span></a>
	<a href="[[++manager_url]]?a=system/settings" data-action="iframe"><span class="fm-icon-settings"></span> <span class="fm-link-text">{'frontendmanager_btn_settings' | lexicon}</span></a>
	<a href="[[++manager_url]]?a=system/event" data-action="iframe"><span class="fm-icon-log"></span><span class="fm-link-text">{'frontendmanager_btn_log' | lexicon}</span></a>
	<a href="[[++manager_url]]?a=system/refresh_site" data-action="iframe"><span class="fm-icon-cache"></span><span class="fm-link-text">{'frontendmanager_btn_cache' | lexicon}</span></a>
</div>

Соответственно, кнопки:

• Логотип
• Скрыть/показать панель
• Редактировать текущий ресурс
• Пользователи
• Заказы miniShop
• Настройки контекста
• Системные настройки
• Журнал ошибок
• Очистка кэша

Я убираю пользователей, заказы, настройки, ошибки и кэш — на фронтенде их почти (вообще) не использую. Вы можете настраивать как угодно — можно удалить или добавить любую страницу, мы рассматриваем общую концепцию.

Для удобства добавляю следующие ссылки:

• Яндекс Метрика
• Яндекс Вебмастер
• Google Search Console
• Проверка индексации Яндекс
• Проверка индексации Google
• Создание типовых страниц (статья, товар и тд)

С Метрикой, Вебмастером и Консолью думаю все понятно — берем обычные ссылки и вставляем. Плюс убираем иконки, добавляем открытие в новом окне и дописываем title, чтобы можно было вспомнить потом, что за кнопка, так как текст кнопки записываю сокращенно, аббревиатурой.

<a href="https://search.google.com/search-console?resource_id=sc-domain%3Adigitalsfera.ru&hl=ru" title="Google Search Console" target="_blank"><span class="fm-link-text m-0">GSC</span></a>
<a href="https://webmaster.yandex.ru/site/https:digitalsfera.ru:443/dashboard/" title="Яндекс Вебмастер" target="_blank"><span class="fm-link-text m-0">Я.В</span></a>
<a href="https://metrika.yandex.ru/dashboard?id=номерсчетчика" title="Яндекс Метрика" target="_blank"><span class="fm-link-text m-0">Я.М</span></a>

С проверкой индексации пояснение: в Яндекс можно проверить индексирование оператором url:. В Google аналогичный оператор inurl:. Для генерации полных ссылок с доменом на текущую страницу используем [[~[[*id]]?&scheme=`full`]].

<a href="https://www.google.com/search?q=inurl%3A[[~[[*id]]?&scheme=`full`]]" title="Индексация Google" target="_blank"><span class="fm-link-text m-0">GI</span></a>
<a href="https://www.yandex.ru/search/?text=url%3A[[~[[*id]]?&scheme=`full`]]" title="Индексация Yandex" target="_blank"><span class="fm-link-text m-0">YI</span></a>

Теперь про ссылки на создание типовых страниц — вы знали, что в ссылке на создание нового ресурса в параметрах можно указать его шаблон и родителя? Например, на сайте есть типовые страницы:

• Товар — шаблон 1, родитель 1
• Статья — шаблон 2, родитель 2

Делаем ссылки на создание:

• https://site.ru/admin/?a=resource/create&parent=1&template=1
• https://site.ru/admin/?a=resource/create&parent=2&template=2

И добавляем в чанк:

<a href="[[++manager_url]]?a=resource/create&template=2&parent=2" 
		data-action="iframe" 
		title="Создать новую статью">
	<span class="fm-link-text m-0">Статья</span>
</a>

Благодаря атрибуту data-action="iframe" во всплывающем окне откроется форма создания нового ресурса. При этом он будет создан в нужной папке, и в форме создания сразу будут доступны TV поля этого шаблона.

Таким образом полный обновленный чанк:

<div id="frontendManager" class="fm-panel" >
	<a href="[[++manager_url]]" target="_blank" class="fm-logo"><img src="[[++manager_url]]templates/default/images/modx-icon-color.svg"></a>
	<a href="[[++manager_url]]" target="_blank" class="fm-mode"><span class="fm-icon-hide"><img src="[[++manager_url]]templates/default/images/modx-icon-color.svg"></span></a>
	<a href="[[++manager_url]]?a=resource/update&id={$_modx->resource.id}" data-action="iframe"><span class="fm-icon-edit"></span> <span class="fm-link-text">{'frontendmanager_btn_edit' | lexicon}</span></a>
	<a href="https://search.google.com/search-console?resource_id=sc-domain%3Adigitalsfera.ru&hl=ru" title="Google Search Console" target="_blank"><span class="fm-link-text m-0">GSC</span></a>
	<a href="https://webmaster.yandex.ru/site/https:digitalsfera.ru:443/dashboard/" title="Яндекс Вебмастер" target="_blank"><span class="fm-link-text m-0">Я.В</span></a>
	<a href="https://metrika.yandex.ru/dashboard?id=номерсчетчика" title="Яндекс Метрика" target="_blank"><span class="fm-link-text m-0">Я.М</span></a>
	<a href="https://www.google.com/search?q=inurl%3A[[~[[*id]]?&scheme=`full`]]" title="Индексация Google" target="_blank"><span class="fm-link-text m-0">GI</span></a>
	<a href="https://www.yandex.ru/search/?text=url%3A[[~[[*id]]?&scheme=`full`]]" title="Индексация Yandex" target="_blank"><span class="fm-link-text m-0">YI</span></a>
	<a href="[[++manager_url]]?a=resource/create&template=2&parent=2" data-action="iframe" title="Создать новую статью"><span class="fm-link-text m-0">Статья</span></a>
</div>

Настройка стилей

У меня несколько "претензий" к базовым стилям:

• маленькое окно редактирования
• на мобильном выползают кнопки в 2 ряда

Увеличить всплывающее окно:

/* Фикс если нет бустрапа - кривая верстка */
.mfp-wrap * {
	box-sizing: border-box;
}
/* Окно по ширине страницы с отступами по 20px */
.mfp-iframe-holder .mfp-content {
	max-width: calc(100% - 40px) !important;
	height: 100%;
}
/* Уменьшаем отступы снизу и сверху */
.mfp-iframe-holder {
	padding-bottom: 16px !important;
	padding-top: 38px !important;
}

Таким образом, вместо небольшого не очень удобного окна:

Получаем большое и адаптивное:

Убираем торчащие на мобильном иконки скрытой панели:

/* При скрытии панели убираем кнопки чтобы не торчали */
.fm-hide .fm-panel > :not(.fm-mode) {
    display: none;
}

Было:

Стало:

Делаем горизонтальную прокрутку не скрытой панели (в основном для мобилок):

/* Прокрутка горизонтальная */
body:not(.fm-hide) .fm-panel {
    overflow: auto hidden;
    display: flex;
}
/* Фикс исчезающего при flex лого */
.fm-logo>img {
	min-width: 16px;
	margin: 0 !important;
}
/* Выравнивание иконки лого по центру */
.fm-logo {
    display: flex !important;
    align-items: center;
}

Было:

Стало:

Все внесенные исправления:

/* Фикс если нет бустрапа - кривая верстка */
.mfp-wrap * {
	box-sizing: border-box;
}
/* Окно по ширине страницы с отступами по 20px */
.mfp-iframe-holder .mfp-content {
	max-width: calc(100% - 40px) !important;
	height: 100%;
}
/* Уменьшаем отступы снизу и сверху */
.mfp-iframe-holder {
	padding-bottom: 16px !important;
	padding-top: 38px !important;
}

/* При скрытии панели убираем кнопки чтобы не торчали */
.fm-hide .fm-panel > :not(.fm-mode) {
    display: none;
}

/* Прокрутка горизонтальная */
body:not(.fm-hide) .fm-panel {
    overflow: auto hidden;
    display: flex;
}
/* Фикс исчезающего при flex лого */
.fm-logo>img {
	min-width: 16px;
	margin: 0 !important;
}
/* Выравнивание иконки лого по центру */
.fm-logo {
    display: flex !important;
    align-items: center;
}

Этот код можно вставить либо непосредственно в чанк tpl.frontendmanager.Custom, либо в любой из файлов стилей на фронтенде.

Вроде из основного все. Мне кажется это обязательное дополнение для любого публичного сайта, так как сильно экономит время — нашли ошибку, тут же открыли и исправили. Да и добавление ссылок на полезные ресурсы с подстановкой URL адреса текущей страницы тоже штука полезная.