Категории на отдельной странице каталога: как передать управление заголовками редактору

Страница подборок и дерево каталога решают разные задачи

Представим учебную страницу «Оборудование для мастерской». На ней есть подборки инструмента, расходных материалов и систем хранения. Каждая подборка ведёт в уже существующий раздел, но её заголовок может быть короче названия раздела. Редактор меняет порядок блоков к сезону, скрывает временно ненужный блок и добавляет пояснение. Это оформление входа в каталог, а не новая классификация всех товаров.

Если хранить такое содержимое прямо в шаблоне, любая замена заголовка потребует разработчика и выпуска кода. Обратная крайность тоже неудобна: разрешить редактору менять произвольный HTML всей страницы. Тогда небольшая правка может сломать сетку, скрыть ссылку или добавить небезопасный код. Между этими вариантами подходит модель ограниченных полей с понятным предпросмотром результата.

Сначала выписывают, какие действия действительно нужны редактору. Например, выбрать категорию из списка, задать публичное название блока, изменить его позицию и включить публикацию. Цвета, отступы и способы загрузки не стоит автоматически превращать в настройки. Чем больше неподконтрольных комбинаций допускает форма, тем труднее гарантировать читаемость страницы. Дополнительное поле оправдано конкретным редакционным сценарием.

Как описать один блок без лишних связей

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

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

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

Порядок блоков должен быть предсказуемым

Когда нескольким записям присвоено одинаковое значение сортировки, публичная страница всё равно должна строиться одинаково. Дополнительный критерий, например устойчивый внутренний ключ, помогает избежать случайной перестановки после сохранения или обновления кэша. Сам ключ не показывают покупателю. Редактору достаточно видеть фактический порядок и возможность его изменить понятным способом.

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

При большой странице помогают группы блоков. Например, верхняя подборка для основного ассортимента и отдельная полоса для дополнительных направлений. При этом группа остаётся редакционной сущностью. Она не обязана менять родительский раздел каталога и наследуемые свойства товаров. Проверка границы важна: настройка витрины не должна случайно запускать обмен или массовое обновление карточек.

Что делать с удалённой или скрытой категорией

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

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

На учебном стенде стоит проверить четыре случая: раздел доступен, скрыт, удалён и существует на другом сайте многосайтовой установки. Последний вариант часто упускают, когда выбор категорий в админке не ограничен текущим сайтом. Редактор видит запись с подходящим названием, но публичная ссылка ведёт в другую витрину. Фильтр доступных сущностей и проверка назначения должны работать вместе.

Предпросмотр нужен до публикации

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

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

После публикации проверяют страницу заново обычным посетителем без административной сессии. Авторизованный редактор может обходить кэш или видеть дополнительные элементы, которых нет у остальных. Сравнение двух режимов помогает обнаружить распространённую ошибку: админка показывает новый порядок, а публичный кэш продолжает отдавать старые блоки. Инвалидация должна затрагивать конкретную страницу и связанные языковые варианты по принятому правилу.

Как сохранить право редактора на ошибку

Небольшая опечатка не должна требовать восстановления всей базы. Для редакционной страницы полезны предыдущая версия, история изменений или хотя бы сохранённый снимок настроек перед крупной заменой. Подход зависит от возможностей CMS, но задача остаётся одной: вернуть содержимое без отката заказов и каталога. История такой страницы должна быть отделена от резервного копирования всего магазина.

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

В форме редактирования достаточно конкретных сообщений. Вместо «Ошибка сохранения» лучше указать, что выбранная категория больше недоступна или что опубликованный блок не имеет заголовка. Введённые значения при отказе сохраняют. Если исправить нужно одно поле, редактор не должен заново собирать всю подборку. Это относится и к конфликту одновременного редактирования двумя сотрудниками: новая версия не должна незаметно стирать чужие правки.

Проверка на узком экране и с увеличенным текстом

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

Изображениям задают подходящие размеры и пропорции, чтобы загрузка не перестраивала весь экран. При этом новая фотография не должна требовать ручного изменения CSS. В предпросмотр добавляют горизонтальное и вертикальное исходное изображение и проверяют выбранный способ вписывания. Смысловой объект не должен обрезаться так, что подборка становится непонятной. Если нужен индивидуальный фокус изображения, это отдельная осознанная настройка.

Клавиатурный маршрут должен соответствовать порядку блоков на экране. Не стоит делать всю карточку ссылкой с несколькими вложенными интерактивными элементами без проверки разметки. Пользователь должен понимать, где находится фокус и куда ведёт нажатие. Такая приёмка проверяет результат редакторской настройки, а не только внешний вид исходного шаблона.

Как принять работу без проверки всего каталога

Для этой задачи подходит ограниченный сценарий. Редактор создаёт блок, выбирает категорию, меняет заголовок, сохраняет, проверяет публичный вывод, затем скрывает запись и возвращает её. После этого меняет порядок двух блоков, очищает необязательный текст и выбирает недоступную категорию. Каждый переход имеет ожидаемый результат. Проверять все товары магазина ради этой настройки не требуется, если модель не меняет товарные данные.

Отдельно подтверждают отсутствие побочных эффектов. Название исходной категории, её адрес, состав товаров и метаданные не должны меняться после редактирования названия блока. Для контроля достаточно нескольких связанных записей до и после сохранения. Если разработчик выбрал общую сущность для двух разных задач, такая проверка обнаружит проблему раньше, чем редактор случайно переименует рабочий раздел.

Готовая функция передаёт редактору управление содержимым, сохраняя устойчивую структуру магазина. Вместе с ней полезно оставить короткую инструкцию на одном учебном примере: что меняет заголовок, откуда берётся ссылка, как скрыть блок и где увидеть ошибку. Такой материал конкретнее большого руководства по всей CMS и позволяет следующему редактору безопасно обновить страницу самостоятельно.

Учебная правка без изменения дерева

Редактору дают три блока:«Приводы»,«Системы хранения» и «Расходные материалы». Он меняет публичную подпись первого на «Приводы для небольших установок», перемещает второй выше и скрывает третий. После сохранения проверяют две области: страница подборок получила новый вид, а исходные категории сохранили названия, адреса и связи с товарами. Это конкретно подтверждает границу функции. Одного просмотра новой страницы недостаточно: ошибка общей сущности могла одновременно переименовать раздел каталога.

Затем удаляют учебную категорию, на которую ведёт один блок. В админке появляется понятная проблема связи, а публичная страница выполняет выбранное безопасное правило. Если блок исчез, редактор должен увидеть причину, а не искать потерянный текст. После выбора новой категории запись возвращается без повторного создания всей страницы. Такой переход проверяет поддержку, а не только первоначальное заполнение.

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

Смежная тема разобрана в материале Большой интернет-магазин: каталог, поиск и ассортимент.

Вопросы по теме

Как обновлять подборку категорий без правки шаблона разработчиком?

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

Документация и источники

• MDN: проверка данных формы: Клиентская проверка не заменяет серверную; прикладной сценарий спроектирован в статье.