Плагин EnvBadge: визуальный индикатор окружения в админке MODX3

Если вы работаете с несколькими копиями одного сайта — боевой (прод), разработка (dev) и тестовый (staging) — то наверняка сталкивались с ситуацией, когда в куче открытых вкладок легко перепутать, где именно вы находитесь. Правки, сделанные «не на том» домене, в лучшем случае теряются, а в худшем ломают живой сайт.

Этот небольшой плагин решает проблему просто и наглядно: он выводит в админке цветной бейдж с названием текущего окружения. Открыли боевой сайт — сверху красная полоса «ПРОД», зашли на разработку — зелёная «РАЗРАБОТКА», на тесте — оранжевая «СТЕЙДЖИНГ». Ошибиться уже не получится: статус виден с первого взгляда, ещё до того как вы начали что-то менять.





Плагин определяет окружение автоматически по домену, с которого открыта админка — ничего вручную переключать не нужно. Для каждого окружения настраивается своя подпись, свой цвет и прозрачность фона. Бейдж можно вывести в двух вариантах: полосой во всю ширину сверху или компактным блоком по центру — на выбор.

Мелочь, но такие мелочи заметно снижают риск дорогих ошибок, особенно в командах, где над проектом работает несколько человек.

Название плагина, например EnvBadge
Событие: OnManagerPageBeforeRender

<?php
/**
 * Plugin: EnvBadge
 * Event: OnManagerPageBeforeRender
 */

// Карта: домен => [подпись, цвет RGB, прозрачность 0..1]
$environments = [
    'mysite.com'       => ['label' => 'ПРОД',       'rgb' => '192, 57, 43',  'opacity' => 0.9],
    'dev.mysite.com'   => ['label' => 'РАЗРАБОТКА', 'rgb' => '39, 174, 96',  'opacity' => 0.9],
    'staging.mysite.com' => ['label' => 'СТЕЙДЖИНГ',  'rgb' => '230, 126, 34', 'opacity' => 0.9],
];

// Размер бейджа: 'full' — полоса во всю ширину, 'small' — компактный по центру
$badgeSize = 'full';

$host = $_SERVER['HTTP_HOST'] ?? '';

if (!isset($environments[$host])) {
    return;
}

$label   = $environments[$host]['label'];
$rgb     = $environments[$host]['rgb'];
$opacity = $environments[$host]['opacity'];

// Стили под выбранный размер
if ($badgeSize === 'small') {
    $sizeCss = <<<CSS
        left: 50%;
        transform: translateX(-50%);
        padding: 8px 24px;
        font-size: 16px;
        border-radius: 5px;
CSS;
} else {
    $sizeCss = <<<CSS
        left: 0;
        right: 0;
        padding: 8px 0;
        font-size: 15px;
        text-align: center;
        border-radius: 0;
CSS;
}

$html = <<<HTML
<style>
    #env-badge {
        position: fixed;
        top: 0;
        color: #fff;
        font-family: Arial, sans-serif;
        font-weight: 700;
        letter-spacing: 2px;
        line-height: 1;
        background: rgba({$rgb}, {$opacity});
        box-shadow: 0 1px 5px rgba(0,0,0,0.3);
        z-index: 100000;
        pointer-events: none;
        {$sizeCss}
    }
</style>
<div id="env-badge">{$label}</div>
HTML;

$modx->controller->addHtml($html);
Ivan K.
Ivan K.
Сегодня в 09:10
modx.pro
91

Комментарии: 1

Scorp Satex
Scorp Satex
Сегодня в 10:59
Расскажите пожалуйста как вы настраиваете сайт на MODX 3 чтобы был dev, prod, stage.

Можете описать workflow? Допустим у меня 80% — это магазины, там клиенты, продажи, все онлайн, заказы постоянно капают.

Как вы синхронизируете базу? Как вы решаете проблему обновлений пакетов на dev\stage — чтобы перенести на prod? Вы используете docker или что-то такое чтобы делать окружение как на prod хостинге?

А если обучающую статью напишете — думаю многие будут вам благодарны.
    Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
    1