Быстрый просмотр товара (popup)

Быстрый просмотр — это карточка товара в модальном окне, которое открывается прямо из списка каталога. Покупатель видит фото, цену, торговые предложения и кнопку «В корзину», не покидая страницу выдачи. Разберём, как собрать такой popup штатными средствами 1С-Битрикс.

Что такое быстрый просмотр и когда он нужен

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

В 1С-Битрикс нет отдельного «компонента быстрого просмотра» — фича собирается из уже существующих кирпичей: компонента bitrix:catalog.element, ядрового попапа BX.PopupWindow и AJAX-загрузки. Поэтому важно понимать, как эти части соединяются, а не искать готовую галочку в настройках.

Из чего собирается popup

Механика быстрого просмотра в Битрикс распадается на три слоя, и каждый отвечает за свою задачу:

• Кнопка-триггер в шаблоне списка (bitrix:catalog.section или bitrix:catalog.item) с идентификатором товара в data-атрибуте.
• AJAX-эндпоинт — лёгкая страница, которая подключает bitrix:catalog.element в упрощённом шаблоне и возвращает только HTML карточки.
• Клиентский попап на базе BX.PopupWindow из модуля main (файл /bitrix/js/main/core/core_popup.js), в который подгружается ответ.

Такое разделение даёт гибкость: детальную карточку и её «быструю» версию можно оформлять разными шаблонами компонента, а логику показа окна держать в одном JS-файле темы.

Кнопка быстрого просмотра в списке

Первый шаг — добавить триггер в шаблон компонента вывода списка. В template.php внутри цикла по товарам выводим кнопку и кладём в неё ID элемента и код информблока:

<a href="#" class="quick-view-btn" data-id="<?=$arItem['ID']?>" data-iblock="<?=$arItem['IBLOCK_ID']?>">Быстрый просмотр</a>

Обработчик вешаем через делегирование, чтобы он работал и на товарах, догруженных постраничной подгрузкой:

BX.bindDelegate(document.body, 'click', {className: 'quick-view-btn'}, function(e){ BX.PreventDefault(e); QuickView.open(this.getAttribute('data-id')); });

AJAX-эндпоинт с catalog.element

Popup должен получать готовую карточку. Для этого делаем отдельную страницу (например /ajax/quick_view.php), которая подключает пролог без визуальной обёртки, чистит буфер и выводит только компонент:

define('NO_KEEP_STATISTIC', 'Y'); require($_SERVER['DOCUMENT_ROOT'].'/bitrix/modules/main/include/prolog_before.php'); $APPLICATION->RestartBuffer();

Далее подключаем компонент детальной карточки в облегчённом шаблоне и завершаем эпилогом ядра:

$APPLICATION->IncludeComponent('bitrix:catalog.element', 'quick_view', array('IBLOCK_ID'=>..., 'ELEMENT_ID'=>(int)$_REQUEST['id'], ...)); require($_SERVER['DOCUMENT_ROOT'].'/bitrix/modules/main/include/epilog_after.php');

Шаблон quick_view — это копия .default компонента без хлебных крошек, отзывов и лишних блоков. Так вы контролируете, что именно попадёт в модальное окно, и не тянете тяжёлый header/footer.

Торговые предложения и корзина внутри окна

Главная сложность быстрого просмотра — сохранить работу торговых предложений (SKU) и кнопки «В корзину» внутри popup. Шаблон catalog.element инициализирует JS-объект JCCatalogElement, который отвечает за смену цены, картинки и артикула при выборе свойства. Но если вставить ответ через innerHTML, теги <script> не выполнятся и выбор предложений сломается.

Решение — вставлять HTML методом ядра, который исполняет скрипты:

• BX.html(popup.getContentContainer(), html) — заменяет содержимое и запускает вложенные скрипты;
• в настройках catalog.element включите USE_PRODUCT_QUANTITY и корректно задайте ADD_TO_BASKET_ACTION, чтобы кнопка добавляла товар через sale.basket.basket;
• для показа торговых предложений передайте параметры OFFERS_* и свойства, участвующие в выборе SKU.

Добавление в корзину внутри окна идёт тем же AJAX-механизмом, что и на детальной странице, поэтому после успеха стоит обновлять мини-корзину в шапке через событие OnBasketChange.

Кэш, композит и производительность

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

Композитный кэш к самому ответу применять не нужно: это отдельный AJAX-запрос, который и так возвращает лёгкий фрагмент. А вот кнопки быстрого просмотра на композитной странице каталога должны инициализироваться в BX.ready(), потому что композит отдаёт статику раньше, чем отработают скрипты.

Типичные ошибки

На практике быстрый просмотр ломается по нескольким повторяющимся причинам:

1. Скрипты не исполняются — HTML вставлен через innerHTML, выбор SKU и цена не работают. Лечится BX.html().
2. Дублирование ID — при повторном открытии в DOM оказывается два блока с одинаковыми id, и JCCatalogElement цепляется не туда. Уничтожайте попап методом popup.destroy() при закрытии.
3. Тяжёлый ответ — забыли RestartBuffer(), и вместе с карточкой прилетают header, футер и все подключённые CSS/JS страницы.
4. Открытый эндпоинт — нет проверки активности и инфоблока, отдаются скрытые или чужие товары.

Итог

Быстрый просмотр в 1С-Битрикс — это не отдельный компонент, а связка: кнопка-триггер в списке, AJAX-эндпоинт с облегчённым шаблоном catalog.element и попап на BX.PopupWindow. Ключевые тонкости — исполнение скриптов через BX.html(), корректная работа торговых предложений и корзины, тегированное кэширование и защита эндпоинта. Собранный аккуратно, popup заметно сокращает путь к покупке и снижает нагрузку на переходы между страницами.

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