[{"data":1,"prerenderedAt":172},["ShallowReactive",2],{"post-ru-redesign-recovery-mode":3},{"id":4,"title":5,"body":6,"category":152,"cover":153,"coverAlt":154,"date":155,"description":156,"extension":157,"locale":158,"meta":159,"navigation":160,"path":161,"published":160,"readingMinutes":162,"seo":163,"slug":164,"stem":165,"tags":166,"__hash__":171},"posts\u002Fru\u002Fposts\u002Fredesign-recovery-mode.md","Редизайн убрал сайдбар, а вместе с ним единственный способ починить сломанную страницу",{"type":7,"value":8,"toc":144},"minimark",[9,13,16,19,22,27,30,33,36,39,42,46,49,52,63,66,69,72,75,79,82,85,89,92,95,98,108,111,115,118,132,135],[10,11,12],"p",{},"Визуальный редактор сайта в inSales — то место, где владельцы магазинов меняют дизайн и управляют виджетами. inSales — e-commerce-платформа с 60 000+ магазинов, и этот редактор один из её основных инструментов. Страница магазина открывается в iframe внутри админки, а редактор позволяет работать с виджетами на этой странице.",[10,14,15],{},"В старом редакторе рядом с предпросмотром постоянно висел большой сайдбар, и он делал четыре дела сразу: общие настройки дизайна, секции страницы, списки виджетов и настройки выбранного виджета. Добавлять, редактировать и удалять виджеты можно было ещё и кнопками внутри предпросмотра. Два способа сделать одно и то же, и ни один из них не был очевидно главным.",[10,17,18],{},"Редизайн, который мне передали, это исправлял. Общие настройки и навигация по страницам ушли в верхнее меню. Действия с виджетом переехали в предпросмотр: выбираешь виджет, нажимаешь «Редактировать», и поверх витрины открывается плавающая панель с его настройками. Постоянного сайдбара больше не было. Я получил макеты и примерно восемь недель реализовывал frontend.",[10,20,21],{},"Интерфейс получился лучше. Но в нём была дыра, которую не показывал ни один макет, потому что на макетах страницы всегда работают.",[23,24,26],"h2",{"id":25},"что-тихо-делал-сайдбар","Что тихо делал сайдбар",[10,28,29],{},"Владельцы магазинов и их разработчики могут добавлять в виджеты собственный HTML, CSS, JavaScript и Liquid. Критическая ошибка в таком коде может сделать так, что страница магазина перестанет загружаться или вернёт серверную ошибку.",[10,31,32],{},"В старом редакторе это было неприятно, но поправимо. Предпросмотр сломан, но сайдбар-то в него не входил. Можно было открыть список виджетов, найти тот, что сломал страницу, и исправить его код или удалить.",[10,34,35],{},"После редизайна основной путь к виджету — кнопки внутри iframe. Если страница не загрузилась, этих кнопок просто нет. Пользователь теряет доступ как раз к тому виджету, который всё сломал, а редактор, который должен помочь, показывает ошибку, где не на что нажать.",[10,37,38],{},"Без отдельного решения пришлось бы уходить в другой раздел админки и искать виджет там или скачивать шаблон, править его и загружать обратно. Это непросто, даже если знаешь, что пошло не так. Владелец магазина, который не понимает, какой виджет вызвал ошибку, тут застрянет. У техподдержки та же проблема: нельзя просто открыть страницу и починить её прямо из редактора.",[10,40,41],{},"Я заметил это, пока реализовывал новую структуру, до того как кто-то из клиентов успел на это наткнуться. Сайдбар никогда не задумывался как инструмент восстановления. Он просто им был, потому что не зависел от страницы, которую редактировал.",[23,43,45],{"id":44},"технический-режим","Технический режим",[10,47,48],{},"Я предложил технический режим, который работает без iframe, и сделал его.",[10,50,51],{},"При открытии редактор проверяет, загрузилась ли страница и появилось ли на ней ожидаемое содержимое. Если страница не загрузилась или вместо неё пришла ошибка, пользователь видит сообщение с предложением открыть технический режим. Если упростить, идея такая:",[53,54,60],"pre",{"className":55,"code":57,"language":58,"meta":59},[56],"language-js","\u002F** Сообщает о сломанном предпросмотре, если на странице так и не появилось ожидаемое содержимое. *\u002F\nfunction watchPreview({ iframe, timeout, onBroken }) {\n  const timer = setTimeout(onBroken, timeout)\n\n  iframe.addEventListener('load', () => {\n    clearTimeout(timer)\n    if (!hasExpectedContent(iframe.contentDocument)) onBroken()\n  }, { once: true })\n}\n","js","",[61,62,57],"code",{"__ignoreMap":59},[10,64,65],{},"Сам режим — отдельное окно со списком всех виджетов текущей страницы: названия, идентификаторы и доступные действия. Отсюда можно открыть настройки виджета, перейти к его коду или удалить его. Список не зависит от того, что внутри iframe, поэтому мёртвый предпросмотр его не уронит.",[10,67,68],{},"Важнее кода тут были два решения.",[10,70,71],{},"Первое: режим доступен и тогда, когда страница загрузилась нормально. В этом случае это просто ещё один способ увидеть полный список виджетов и быстро перейти к нужному блоку. Мне не хотелось делать аварийный выход, который появляется только в аварии: тогда его никто не видел до того момента, когда он понадобился.",[10,73,74],{},"Второе: режим сделан не только для владельцев магазинов, но и для поддержки. Если клиент не понимает, какой виджет вызвал ошибку, сотрудник поддержки открывает страницу, переходит в технический режим, находит проблемный блок, исправляет или удаляет его код и снова открывает страницу в обычном режиме. Именно так режимом пользуются в продакшене.",[23,76,78],{"id":77},"та-же-дыра-только-тише","Та же дыра, только тише",[10,80,81],{},"Сломанная страница была не единственной задачей, которую сайдбар молча решал. Некоторые виджеты вообще не видны в обычном содержимом страницы: форма предзаказа, которая появляется только после нажатия «Предзаказ», форма обратной связи, панели в нижней части. В старом редакторе до них добирались через сайдбар. В новом навести курсор на то, чего ещё нет на странице, невозможно.",[10,83,84],{},"Поэтому в верхнем меню появился отдельный раздел для таких виджетов, где их по-прежнему можно найти, добавить и настроить. Симптом другой, причина та же. Редизайн убрал часть интерфейса, и всё, что она позволяла делать, пришлось осознанно перенести в другое место.",[23,86,88],{"id":87},"что-вышло-в-продакшен","Что вышло в продакшен",[10,90,91],{},"Новый редактор стал стандартной версией для шаблонов последнего поколения и используется более чем в 90% магазинов inSales. Старый редактор с постоянным сайдбаром остался только для шаблонов, созданных до 2020 года, на нём несколько сотен пользователей.",[10,93,94],{},"Новая структура позволила сделать нормальный онбординг из восьми шагов, где каждый шаг указывает на одну стабильную часть интерфейса, и пользователю не приходится следить, как один сайдбар меняет содержимое.",[10,96,97],{},"Цифры ниже относятся к редизайну целиком, а не только к техническому режиму:",[99,100,101,105],"ul",{},[102,103,104],"li",{},"При закрытых верхнем меню и панели настроек предпросмотр на экране 1920 px стал шире примерно на 17%: сайдбар больше не отнимает у него постоянную полосу.",[102,106,107],{},"Среди новых пользователей доля тех, кто в первой сессии сам изменил настройку шаблона или виджета и успешно сохранил результат, выросла с 60% до 80%. Это плюс 20 процентных пунктов, то есть разница между двумя долями: было трое из пяти новых пользователей, стало четверо из пяти.",[10,109,110],{},"У технического режима своей цифры нет. Его результат в том, что сломанную страницу теперь чинят прямо из редактора, и поддержка пользуется им именно для этого.",[23,112,114],{"id":113},"прежде-чем-удалять-панель","Прежде чем удалять панель",[10,116,117],{},"Теперь, когда редизайн убирает или объединяет часть интерфейса, я прохожу по такому списку:",[99,119,120,123,126,129],{},[102,121,122],{},"Выписать все задачи, которые решает старый элемент, включая те, что никто не рисовал: состояния ошибки, пустые состояния, элементы, которые не видны до определённого действия, сценарии поддержки.",[102,124,125],{},"Для каждой задачи найти её место в новом дизайне. Если ответ «нигде», сказать об этом вслух до релиза, а не ждать, пока это обнаружит поддержка.",[102,127,128],{},"Посмотреть на новый дизайн в состоянии, когда его главная поверхность не работает. Если кнопки живут внутри того, что редактируется, что будет, когда это не отрисуется?",[102,130,131],{},"Оставить аварийный выход доступным в обычной работе, чтобы о нём знали заранее.",[10,133,134],{},"Дизайн-ревью обычно смотрит на работающие страницы, и это справедливо: большую часть времени пользователи видят именно их. А разработчик, который реализует дизайн, постоянно натыкается на сломанные состояния, поэтому такие дыры проще всего поймать как раз на его этапе.",[10,136,137,138,143],{},"Подробнее о проекте — в ",[139,140,142],"a",{"href":141},"\u002Fru\u002Fwork\u002Fvisual-storefront\u002F","кейсе о визуальном редакторе",".",{"title":59,"searchDepth":145,"depth":145,"links":146},2,[147,148,149,150,151],{"id":25,"depth":145,"text":26},{"id":44,"depth":145,"text":45},{"id":77,"depth":145,"text":78},{"id":87,"depth":145,"text":88},{"id":113,"depth":145,"text":114},"Продуктовый UX","\u002Fimages\u002Fblog\u002Fredesign-recovery-mode.svg","Три схемы: старый сайдбар, редизайн, где сломанный предпросмотр прячет все кнопки виджетов, и режим восстановления со списком виджетов без предпросмотра","2026-10-21","В новом визуальном редакторе управление виджетами переехало в предпросмотр витрины. Если пользовательский код ломает предпросмотр, кнопки пропадают вместе с ним. Как я нашёл эту дыру и какой режим восстановления для неё сделал.","md","ru",{},true,"\u002Fru\u002Fposts\u002Fredesign-recovery-mode",5,{"title":5,"description":156},"redesign-recovery-mode","ru\u002Fposts\u002Fredesign-recovery-mode",[167,168,169,170],"Product UX","Redesign","iframe","Error recovery","2GKQcPtMC7R-oOJGYho_3JsLHPgtHU3epmLD_G9GX8g",1793195987056]