Кастомизация интерфейса (CSS, JS, перевод)

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

Перевод и переименование разделов

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

Зачем это нужно:

перевод интерфейса на другой язык;
замена терминов без смены языка — чтобы интерфейс говорил на языке вашей компании. Например, переименовать «Комплектующие» в «Аксессуары» или «Фурнитуру», если так привычнее вашим менеджерам.

Это безопасный инструмент, доступный без программирования: вы просто меняете надписи.

Панель пользовательского кода

В кабинете есть панель пользовательского кода — единый редактор с переключением режима JS / CSS / HTML. Введённое сохраняется в три файла рядом со сценой: assets/custom.js, assets/custom.css и assets/custom.html. Они автоматически подключаются на сцену.

Пользовательский CSS (стили)

CSS управляет внешним видом — цветами, размерами, видимостью элементов. С его помощью можно, например:

скрыть ненужные элементы спецификации или интерфейса;
изменить отображение отдельных частей под ваш фирменный стиль.

Ваш CSS подключается последним, поэтому перекрывает стандартные стили. Это территория, близкая к разработке, но относительно простая: многие задачи решаются парой строк. Если не уверены — обратитесь к веб-специалисту или в поддержку.

Пользовательский JavaScript (логика)

JavaScript добавляет поведение и интеграции. Через панель можно, например:

подключить системы аналитики (Яндекс.Метрику, счётчики) — чтобы видеть, как клиенты пользуются конструктором;
показывать дизайнеру модальные окна и уведомления;
модифицировать спецификацию, цены и артикулы на лету;
реализовать расширенную кастомизацию под конкретные задачи.

Это инструмент для разработчиков (четвёртый, продвинутый уровень — см. «Обзор системы и роли»). Если вы не пишете код, привлеките программиста или поддержку.

Подробная документация для разработчиков — в отдельном разделе:

«Основы кастомизации (JS / HTML / CSS)» — точка входа PP_ready, объект pp, хуки;

«Модальные окна и уведомления»;

«Спецификация и артикулы на лету»;

«Артикул из комбинации параметров».

HTML-разметка

Помимо CSS и JS, поддерживается добавление HTML-разметки — например, для вставки дополнительных блоков. Также HTML используется в описаниях позиций прайс-листа, где можно вставлять таблицы, ссылки и форматированный текст.

Кастомные пункты меню

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

Граница между «безопасным» и «для разработчиков»

Доступно всем: перевод и переименование разделов через таблицы. Меняйте смело.
Требует осторожности: CSS — простые правки можно делать, но проверяйте результат.
Для разработчиков: JavaScript, JSON-меню, события. Трогайте только если умеете или по инструкции поддержки.

Совет. Перед экспериментами с CSS/JS сделайте резервную копию и проверяйте изменения на сцене с жёсткой перезагрузкой.

Коротко

Интерфейс PlanPlace настраивается на нескольких уровнях: перевод и переименование разделов (доступно всем, без кода), CSS для внешнего вида (простая разработка), JavaScript и JSON-меню для логики и интеграций (для программистов). Самое полезное для большинства — таблицы перевода: они позволяют говорить с пользователем на привычном ему языке.