Редизайн визуального редактора сайта inSales

Задача

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

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

Так было: общие настройки, секции и списки виджетов в одной панели, которая не закрывается.

Моя роль

Макет нарисовал дизайнер. Я был единственным frontend-разработчиком и за восемь недель реализовал его целиком: структуру интерфейса, загрузку данных, поведение iframe и онбординг из восьми шагов. Новый контракт данных прорабатывал вместе с backend. Технический режим предложил сам: в макете этого сценария не было.

Что я сделал

У каждой части экрана своя роль

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

Данные загружаются, когда они нужны интерфейсу

Старый редактор при открытии одним запросом забирал дизайн, лейауты и все списки виджетов, потому что сайдбар показывал их сразу. Ответ весил всего 5–10 КБ, так что ускорения здесь не было. Смысл был в другом: API должен соответствовать новому экрану. Теперь при старте редактор запрашивает только данные для верхнего меню, а списки виджетов — когда пользователь их открывает.

Переключение страниц держит редактор и магазин в одном состоянии

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

Доступ к виджетам, которых не видно на странице

Форма предзаказа, обратная связь и всплывающие окна появляются только после действия покупателя. Когда сайдбар убрали, а управление перенесли в предпросмотр, до них стало бы не добраться. Я добавил в верхнее меню отдельный раздел, где их можно найти, добавить и настроить.

Технический режим, который не зависит от iframe

Продавцы и их разработчики пишут в виджетах собственный HTML, CSS, JavaScript и Liquid. Критическая ошибка в таком коде может не дать магазину загрузиться. В новом дизайне все кнопки управления виджетами находились внутри этого магазина, и сломанная страница прятала бы как раз тот виджет, который её сломал. Обходной путь — искать виджет в другом разделе админки или перезаливать шаблон.

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

Список работает без предпросмотра, поэтому сломанный виджет можно исправить или удалить.

Результат

• Новым редактором пользуются больше 90% магазинов inSales, для шаблонов актуального поколения он стандартный. Старый остался только для шаблонов, сделанных до 2020 года.
• Доля новых пользователей, которые в первой сессии сами изменили настройку шаблона или виджета и сохранили результат, выросла с 60% до 80%, то есть на 20 процентных пунктов.
• При закрытых панелях предпросмотр сайта на экране 1920 px стал примерно на 17% шире.
• Технический режим работает в продакшене: если код виджета ломает страницу, продавец или поддержка чинят её прямо из редактора.