Быстрый просмотр товара (quick view) в Битрикс

Покупатель листает каталог, видит подходящий товар — и чтобы просто посмотреть фото покрупнее и узнать, есть ли нужный размер, вынужден уходить на отдельную страницу, ждать её загрузки, а потом жать «назад» и заново искать место, где остановился. На каждом таком переходе часть людей отваливается. Быстрый просмотр товара (quick view) убирает лишний шаг: всплывающее окно открывается прямо поверх списка, показывает галерею, цену, наличие и кнопку «В корзину» — и посетитель принимает решение, не покидая каталог.

Ниже — практический разбор того, как спроектировать и реализовать быстрый просмотр в 1С-Битрикс: что показывать в окне, как подгружать данные через AJAX, как правильно работать с торговыми предложениями и корзиной, как не сломать мобильную версию и доступность. Это выжимка из наших проектов по разработке интернет-магазинов на 1С-Битрикс — с оглядкой на конверсию, а не «фича ради фичи».

Что такое быстрый просмотр (quick view)

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

Смысл паттерна — сократить путь между «увидел товар в списке» и «принял решение». В классической схеме между этими точками стоит целый переход: клик по товару, загрузка новой страницы, просмотр, возврат назад. Каждый такой переход стоит времени и внимания, а при сравнении нескольких похожих товаров превращается в утомительное «туда-обратно». Quick view схлопывает этот цикл: посетитель остаётся в одном контексте и быстро перебирает варианты.

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

Родственные паттерны, с которыми quick view легко перепутать: это не шторка корзины (она показывает содержимое заказа, а не товар), не подсказка при наведении (tooltip) и не «предпросмотр» на самой карточке. Быстрый просмотр — это именно всплывающая мини-карточка товара, вызываемая из списка.

Зачем quick view интернет-магазину

За паттерном стоит не мода, а конкретная механика влияния на поведение покупателя. Разберём, что именно даёт быстрый просмотр и в каких магазинах он окупается лучше всего.

• Сокращает число шагов до корзины. Меньше переходов между страницами — меньше точек, где посетитель может отвлечься и уйти. Это особенно заметно на длинных сессиях, когда человек перебирает десятки товаров.
• Ускоряет сравнение похожих позиций. В нишах, где товары отличаются деталями (одежда, обувь, аксессуары, инструмент, комплектующие), быстрый просмотр позволяет пробежаться по вариантам, не теряя место в списке и настройки фильтра.
• Снимает нагрузку с детальных страниц. Часть решений принимается прямо в окне, а на полную карточку идут только те, кому реально нужны подробности. Это разгружает и внимание пользователя, и иногда сервер.
• Повышает добавления в корзину из каталога. Кнопка «В корзину» внутри окна оказывается ближе к моменту интереса, чем та же кнопка на отдельной странице.

При этом quick view — не универсальное решение. В магазинах со сложным, дорогим или технически насыщенным товаром (мебель на заказ, промышленное оборудование, техника с десятками характеристик) решение о покупке требует изучения полной карточки, и окно быстрого просмотра приносит меньше пользы. А вот в товарных категориях с быстрым, «импульсным» выбором и понятными вариациями — это заметный рычаг конверсии.

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

Анатомия окна: что показывать, а что нет

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

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

Архитектура быстрого просмотра в 1С-Битрикс

Чтобы внедрять quick view осознанно, полезно держать в голове его устройство. В 1С-Битрикс быстрый просмотр — это не отдельный «волшебный» компонент, а связка из нескольких частей, каждая из которых отвечает за свою задачу.

• Список каталога (catalog.section). Выводит карточки товаров и добавляет к каждой кнопку «Быстрый просмотр» с идентификатором товара (ID или код).
• Триггер и модальное окно. JavaScript-обработчик клика по кнопке, который открывает всплывающее окно (штатный BX.PopupWindow или лёгкая модалка из шаблона) и запускает загрузку контента.
• AJAX-эндпоинт. Серверная точка, которая по ID товара отдаёт готовую HTML-разметку мини-карточки. Это может быть отдельный компонент, вызов catalog.element в упрощённом шаблоне или собственный контроллер.
• Данные каталога. Цена, наличие, торговые предложения, изображения берутся из того же инфоблока и модуля торгового каталога, что и обычная карточка, — чтобы информация не расходилась.
• Корзина (sale.basket.basket / add2basket). Обрабатывает добавление выбранного торгового предложения в корзину и возвращает обновлённое состояние заказа.
• Слой кэширования. Кэш AJAX-ответа мини-карточки, чтобы повторные открытия того же товара не нагружали сервер.

Логика работы простая: список рисует кнопки, клик открывает окно и запрашивает разметку по ID, сервер отдаёт мини-карточку, окно её показывает, а кнопка «В корзину» внутри окна общается с компонентом корзины. Понимание этой цепочки сразу подсказывает, где искать проблему: если окно не открывается — смотрим триггер и попап, если открывается пустым — смотрим AJAX-эндпоинт, если товар не добавляется — смотрим передачу ID предложения в корзину.

AJAX-подгрузка: как окно получает данные

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

1. AJAX-запрос за готовой разметкой. По клику фронтенд шлёт запрос на серверный эндпоинт с ID товара, а тот возвращает готовый HTML мини-карточки. Плюс — вся логика цены, наличия и предложений считается на сервере одним и тем же кодом, что и на карточке. Это основной и рекомендуемый путь.
2. AJAX-запрос за JSON и сборка на клиенте. Сервер отдаёт данные о товаре в JSON, а разметку собирает JavaScript в браузере. Гибко, но дублирует логику вывода на фронтенде и легко приводит к расхождению цен и наличия с серверной версией. Оправдано только в SPA-подобных витринах.
3. Заранее встроенная разметка. Мини-карточка каждого товара уже отрендерена в списке в скрытом блоке, и окно просто показывает нужный кусок без запроса. Открывается мгновенно, но раздувает вес страницы каталога и не годится для больших списков — подходит разве что для короткой выдачи.

На практике для большинства магазинов на 1С-Битрикс оптимален первый вариант: AJAX за готовой разметкой. Он переиспользует серверную логику каталога, не раздувает список и легко кэшируется. Ключевые требования к такому эндпоинту:

• Отдаёт только мини-карточку. Без шапки, подвала и лишней обвязки — чистый фрагмент для вставки в окно.
• Кэшируется по товару. Ответ по конкретному ID кэшируется с учётом цены и наличия, чтобы повторные открытия были мгновенными и не били по базе.
• Обрабатывает ошибки. Если товар не найден или снят с продажи, эндпоинт возвращает понятное сообщение, а не пустое окно или ошибку сервера.
• Не создаёт индексируемых URL. Эндпоинт служебный, он не должен превращаться в дубль карточки в индексе поисковика.

Галерея и изображения в окне

Галерея — главный элемент окна быстрого просмотра: именно ради «посмотреть поближе» большинство и открывает quick view. Поэтому к изображениям здесь предъявляются особые требования — они должны загружаться быстро и выглядеть чётко, не заставляя пользователя ждать.

Оптимизация веса. В окне не нужны исходные фотографии в полном разрешении на несколько мегабайт. Готовьте отдельные размеры под галерею быстрого просмотра: основное изображение под размер окна и уменьшенные превью. В 1С-Битрикс для этого используют ресайз изображений (CFile::ResizeImageGet или параметры компонента), а форматы — современные, вроде WebP, с запасным JPEG.

Ленивая загрузка. Первое изображение показывайте сразу, а остальные кадры галереи подгружайте по мере пролистывания. Так окно открывается мгновенно, не дожидаясь загрузки всех фотографий. Это особенно важно для товаров с десятком снимков.

Управление галереей. Внутри окна достаточно простого переключения кадров: миниатюры-точки или стрелки, свайп на тач-устройствах. Тяжёлый зум с лупой, 3D-вращение и видео лучше оставить полной карточке — в окне быстрого просмотра они избыточны и замедляют открытие.

Единый источник изображений. Галерея в окне должна брать те же изображения, что и карточка товара, из свойства «Дополнительные картинки» или «Больше фотографий» инфоблока. Не заводите отдельный набор картинок «специально для quick view» — это гарантированно приведёт к рассинхрону, когда контент-менеджер обновит фото только в одном месте.

Цена, наличие и торговые предложения (SKU)

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

В 1С-Битрикс вариации реализуются через торговые предложения (SKU) — отдельный инфоблок предложений, привязанный к инфоблоку товаров. У каждой модели-родителя может быть множество предложений-детей, и у каждого своя цена, свой остаток и свои свойства (размер, цвет). Окно быстрого просмотра должно этот механизм повторять:

• Показывать доступные варианты. Выводите свойства предложений как выбираемые опции: кнопки размеров, свотчи цветов, выпадающие списки. Недоступные комбинации помечайте неактивными, а не прячьте молча.
• Обновлять цену и наличие при выборе. Когда пользователь выбирает размер, цена, остаток и картинка должны подстроиться под выбранное предложение — как на полной карточке.
• Требовать выбор перед добавлением. Если опция не выбрана, кнопка «В корзину» либо неактивна, либо мягко подсказывает: «Выберите размер». Нельзя добавлять товар «без размера».
• Честно показывать отсутствие. Если предложения нет на складе, покажите это явно и предложите альтернативу (уведомить о поступлении, выбрать другой размер), а не блокируйте окно без объяснений.

Технически данные о предложениях удобно отдавать вместе с мини-карточкой: серверный код собирает JSON-массив предложений с ценами, остатками и свойствами (штатный механизм JS_OFFERS компонента catalog.element), а фронтенд переключает отображение при выборе опции. Так вы переиспользуете ровно ту же логику, что и на детальной странице, и цены гарантированно совпадают.

Добавление в корзину прямо из окна

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

Что происходит по клику. Кнопка отправляет AJAX-запрос к компоненту корзины, передавая ID выбранного торгового предложения и количество. В 1С-Битрикс это обычно делается через штатный механизм добавления (add2basket / вызов метода корзины из sale.basket.basket). Сервер добавляет позицию и возвращает обновлённые данные заказа: число товаров и сумму.

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

Пограничные случаи. Именно на них ломается большинство самописных реализаций:

• Не выбрано предложение. Кнопка не должна добавлять «пустой» товар. До выбора размера/цвета она неактивна или подсказывает, что выбрать.
• Товара нет на складе. Если остаток нулевой, добавление блокируется с понятным сообщением, а не молча «проваливается».
• Ограничение по количеству. Если задан минимальный или кратный шаг заказа (частая история в B2B), окно обязано его учитывать.
• Повторное добавление. Второй клик по той же кнопке не должен создавать дубль-позицию с неверным количеством — количество либо увеличивается, либо кнопка меняется на «В корзине».
• Ошибка сети. Если запрос не прошёл, окно показывает ошибку и даёт повторить, а не делает вид, что всё хорошо.

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

Реализация в 1С-Битрикс пошагово

Соберём всё в практический порядок действий. Ниже — путь внедрения быстрого просмотра на стандартном интернет-магазине 1С-Битрикс, от разметки списка до кнопки в корзину.

1. Добавьте кнопку в список каталога. В шаблоне компонента catalog.section (или catalog.top, bestsellers) добавьте к карточке кнопку «Быстрый просмотр» с атрибутом data-product-id, содержащим ID товара. Кнопку удобно показывать при наведении на карточку.
2. Подготовьте AJAX-эндпоинт мини-карточки. Создайте отдельный шаблон или контроллер, который по ID товара отдаёт упрощённую разметку: галерея, название, цена, наличие, торговые предложения (JS_OFFERS), кнопка «В корзину» и ссылка «Подробнее». Переиспользуйте логику catalog.element, чтобы цены и остатки считались тем же кодом, что на карточке.
3. Настройте модальное окно. На клик по кнопке откройте всплывающее окно через BX.PopupWindow (штатный механизм ядра) или лёгкую модалку шаблона и запросите разметку у эндпоинта. Пока идёт запрос, покажите индикатор загрузки.
4. Оживите галерею и выбор опций. В подгруженной разметке подключите переключение изображений и выбор торговых предложений так, чтобы при выборе размера/цвета обновлялись цена, наличие и картинка.
5. Свяжите кнопку с корзиной. Кнопка «В корзину» отправляет ID выбранного предложения и количество в компонент корзины через AJAX, после чего обновляет счётчик корзины и показывает подтверждение (или открывает шторку).
6. Включите кэширование. Кэшируйте ответ эндпоинта по товару с учётом цены и наличия, чтобы повторные открытия были мгновенными. Не забудьте про сброс кэша при изменении товара.
7. Проверьте пограничные случаи. Прогоните товары без предложений, с одним предложением, с отсутствующими на складе вариантами, с минимальным заказом. Убедитесь, что окно ведёт себя корректно во всех сценариях.
8. Проверьте мобильную версию и доступность. На узких экранах окно должно превращаться в удобный лист, закрываться по кнопке и клавише Esc, а фокус — не «убегать» на фон.

Как это выглядит: компоненты и шаблон

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

Обратите внимание: специализированного компонента «quick view» в базовой поставке нет — это осознанно собранная связка. Такой подход выгоден тем, что вы не зависите от стороннего модуля: обновления ядра, редакции «Малый бизнес» и «Бизнес», перенос на другой шаблон проходят без сюрпризов, потому что под капотом — стандартные catalog.element, catalog.section и корзина. Если каталог организован по продуманной структуре разделов каталога, добавить быстрый просмотр во все списки — вопрос одного шаблонного включения.

Быстрый просмотр на мобильных

Мобильная версия — тот случай, где бездумный перенос десктопного окна вредит. На маленьком экране всплывающее окно с галереей и опциями либо не помещается, либо превращается в неудобную «форточку» с прокруткой во все стороны. Поэтому мобильный quick view проектируют отдельно.

Есть три рабочих стратегии для смартфонов:

• Bottom sheet (выезжающий лист). Окно выезжает снизу почти на весь экран, с галереей сверху и опциями/кнопкой снизу, закрывается свайпом вниз. Это самый удобный мобильный вариант — привычный по мобильным приложениям.
• Полноэкранный оверлей. Мини-карточка занимает весь экран как отдельный слой поверх каталога. Близко к обычной карточке, но без перезагрузки страницы и с быстрым возвратом.
• Отказ в пользу карточки. На мобильных клик по товару ведёт сразу на детальную страницу, а быстрый просмотр работает только на десктопе и планшетах. Иногда это честнее, чем городить окно там, где полноценная карточка удобнее.

Выбор стратегии — вопрос аналитики. Посмотрите, как ведёт себя мобильная аудитория: если люди на смартфонах и так активно ходят на карточки и там конвертируются, тяжёлое мобильное окно им не нужно. Если же на мобильных много быстрого перебора вариантов, bottom sheet заметно ускоряет покупки. Не переносите десктопное решение вслепую — проверяйте на своей аудитории.

Доступность модального окна (a11y)

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

• Управление фокусом. При открытии окна фокус переходит внутрь него, при закрытии — возвращается на кнопку, которая окно вызвала. Пользователь не должен «терять» место в каталоге.
• Ловушка фокуса (focus trap). Пока окно открыто, клавиша Tab перемещает фокус только внутри окна, не «убегая» на фоновый каталог.
• Закрытие по Esc. Клавиша Escape закрывает окно — это ожидаемое поведение любого модального окна.
• Правильные роли и подписи. Окну задают роль диалога (role="dialog", aria-modal="true") и доступное имя, а кнопке закрытия — понятную подпись «Закрыть».
• Блокировка фона. Пока окно открыто, фоновый контент не прокручивается и не доступен для взаимодействия — ни мышью, ни с клавиатуры, ни для скринридера.

Хорошая новость: штатный BX.PopupWindow в 1С-Битрикс закрывает часть этих требований из коробки. Но управление фокусом и корректные ARIA-атрибуты часто приходится доводить руками, особенно в кастомных шаблонах. Не пренебрегайте этим: доступное окно — это не только про инклюзивность, но и про то, что интерфейсом удобнее пользоваться всем, включая тех, кто просто предпочитает клавиатуру мыши.

Производительность и SEO

Быстрый просмотр не должен становиться тормозом каталога или источником проблем с индексацией. Разберём обе стороны.

Производительность. Главные риски — лишний вес на каждой странице каталога и медленное открытие окна. Держите под контролем несколько вещей:

• Не грузите тяжёлые скрипты заранее. Логику окна подключайте так, чтобы она не мешала первичной отрисовке списка. Идеально — подгружать код окна по первому клику.
• Кэшируйте ответ эндпоинта. Повторное открытие одного товара должно браться из кэша, а не пересчитываться. Это снимает нагрузку при массовом переборе.
• Оптимизируйте изображения окна. Отдельные ресайзы под галерею, WebP, ленивая загрузка кадров — иначе окно «весит» как полноценная карточка.
• Не дублируйте запросы. Если пользователь быстро открывает и закрывает окно, не запускайте новый запрос, пока не завершился предыдущий.

SEO. Само окно на ранжирование не влияет — его содержимое подгружается по действию пользователя и не является отдельной страницей. Но есть два правила, которые нельзя нарушать:

• Не создавайте индексируемых URL-дублей. AJAX-эндпоинт мини-карточки — служебный. Он не должен попадать в индекс как ещё одна версия карточки товара, иначе вы плодите дубли.
• Не подменяйте карточки окном. Детальные страницы товаров остаются главным SEO-активом магазина. Быстрый просмотр — надстройка над каталогом, а не замена карточкам, которые ранжируются в поиске.

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

Метрики: как понять, что окно работает

Быстрый просмотр внедряют ради конверсии, поэтому его эффект нужно измерять, а не оценивать «на глаз». Настройте отслеживание событий и смотрите на понятный набор показателей.

Лучший способ доказать пользу быстрого просмотра — A/B-тест: показывайте окно части аудитории и сравнивайте конверсию и средний чек с контрольной группой. Если разница положительная и устойчивая — фича окупается. Если же люди активно открывают окно, но всё равно уходят на карточку и оттуда покупают, значит, в окне не хватает данных для решения — стоит пересмотреть его содержимое, а не выпиливать паттерн.

Частые ошибки при внедрении

• Пытаются впихнуть в окно всю карточку — характеристики, отзывы, сопутствующие товары. Окно тяжелеет, медленно открывается и перестаёт быть «быстрым».
• Считают цену и скидки на клиенте — рано или поздно они расходятся с сервером, и в окне одна цена, а в корзине другая.
• Не обрабатывают торговые предложения — окно позволяет добавить товар «без размера» или показывает цену родителя вместо выбранной вариации.
• Забывают про наличие — окно бодро добавляет в корзину товар, которого нет на складе, а покупатель узнаёт об этом уже при оформлении.
• Нет обратной связи после добавления — счётчик корзины не меняется, подтверждения нет, и человек жмёт кнопку по несколько раз, создавая дубли.
• Ломают доступность — окно не закрывается по Esc, фокус убегает на фон, с клавиатуры окном пользоваться невозможно.
• Переносят десктопное окно на мобильные без адаптации — на маленьком экране получается неудобная «форточка» с прокруткой во все стороны.
• Заводят отдельный набор картинок «для quick view» — контент-менеджер обновляет фото только на карточке, и в окне остаются устаревшие изображения.
• Не кэшируют AJAX-ответ — при активном переборе товаров каждый клик бьёт по базе, и каталог просаживается под нагрузкой.
• Убирают ссылку «Подробнее» — тем, кому нужны детали, некуда идти, и они просто уходят с сайта.

Чек-лист внедрения

Сведём всё в практический список, по которому удобно принимать готовность быстрого просмотра перед запуском.

1. Кнопка заметна. «Быстрый просмотр» виден в списке каталога и понятен пользователю; на десктопе появляется при наведении, на тач-устройствах доступен явно.
2. Окно содержит нужный минимум. Галерея, название, цена, наличие, выбор опций, «В корзину», ссылка «Подробнее» — и ничего лишнего.
3. Данные с сервера. Цена, скидки, наличие и предложения считаются на сервере тем же кодом, что на карточке; расхождений нет.
4. Предложения работают. Выбор размера/цвета обновляет цену, картинку и остаток; недоступные варианты помечены; без выбора добавить нельзя.
5. Корзина отвечает. Добавление обновляет счётчик и сумму, показывает подтверждение или открывает шторку; пограничные случаи обработаны.
6. Мобильная версия адаптирована. На смартфонах окно — bottom sheet или полноэкранный лист, закрывается свайпом и крупной кнопкой.
7. Доступность в порядке. Фокус управляется, работает Esc и focus trap, заданы роли диалога и подписи, фон заблокирован.
8. Производительность под контролем. Скрипты не тормозят список, ответ эндпоинта кэшируется, изображения оптимизированы.
9. SEO не пострадало. Служебный эндпоинт не индексируется, карточки товаров остаются главным SEO-активом.
10. Метрики настроены. Отслеживаются открытия окна, добавления в корзину и переходы «Подробнее»; запланирован A/B-тест.

Вывод

Быстрый просмотр товара в 1С-Битрикс — это не декоративная фича, а рычаг конверсии, который сокращает путь от каталога до корзины. Он окупается там, где покупатель перебирает и сравнивает похожие товары с понятными вариациями, и требует аккуратной реализации: AJAX-подгрузка мини-карточки, честная работа с торговыми предложениями и наличием, корректное добавление в корзину, адаптация под мобильные и доступность. Соберите окно из штатных компонентов, положите в него только необходимое, измерьте эффект A/B-тестом — и quick view начнёт приносить заказы, а не просто украшать каталог.