Реализация блока «Вы смотрели» в 1С-Битрикс: настройка и оптимизация

Проблема: встроенного компонента «Вы смотрели» нет

Пользователь открывает карточку товара и не видит, что уже просматривал его. Конверсия падает на 30–40 % — нет триггера повторного интереса. В стандартном Битрикс нет готового компонента для истории просмотров. Модуль «Персонализация» есть только в Enterprise-версии, но его функционал не позволяет гибко управлять данными.

Мы реализуем блок «Вы смотрели» под ключ: от выбора способа хранения до финального тестирования с кешированием. Наши инженеры внедрили более 50 таких решений для магазинов с каталогами до 100 000 товаров. За 10+ лет опыта работы с Битрикс мы накопили экспертизу, позволяющую гарантировать производительность даже на высоконагруженных проектах.

Как хранить историю: сравнение подходов

Куки, сессия и база данных — три варианта с разными компромиссами. Куки работают в 10 раз быстрее базы на этапе загрузки, но ограничены 4 КБ (до ~200 товаров). Сессия не требует настройки, но сбрасывается при закрытии браузера. База данных даёт полную аналитику, но добавляет нагрузку на сервер. Мы комбинируем: куки для мгновенного отображения, асинхронная запись в БД для отчётов.

Зачем нужна AJAX-загрузка блока?

Если карточка товара кешируется (а она должна), статичный блок «Вы смотрели» будет одинаковым для всех. AJAX-запрос после рендеринга страницы загружает персональные данные без сброса кеша. Время отклика обычно <50 мс, что незаметно для пользователя.

В официальной документации 1С-Битрикс описан механизм асинхронной загрузки компонентов через AJAX.

Как исключить текущий товар?

При формировании списка ID на карточке товара мы удаляем текущий элемент, переданный через ELEMENT_ID. Это предотвращает дублирование: пользователь не видит тот же товар, что уже смотрит.

Почему стоит комбинировать куки и базу данных?

Гибридный подход даёт лучшую производительность и аналитику. Куки хранят последние 20 просмотров — этого достаточно для быстрого отображения. Асинхронный фоновый запрос записывает данные в БД, где они используются для отчётов. Например, в проекте с каталогом 50 000 товаров время загрузки блока составило 20 мс, а запись в БД выполнялась без блокировки ответа пользователю.

Реализация: компонент и запись в куки

Запись в куки при просмотре товара

В шаблоне catalog.element добавляем JavaScript:

(function() { var elementId = <?= (int)$arResult['ID'] ?>; var cookieName = 'bx_viewed'; var maxItems = 20; var viewed = []; try { var raw = document.cookie.match(/bx_viewed=([^;]+)/); if (raw) viewed = JSON.parse(decodeURIComponent(raw[1])); } catch(e) {} viewed = viewed.filter(function(id) { return id !== elementId; }); viewed.unshift(elementId); if (viewed.length > maxItems) viewed = viewed.slice(0, maxItems); var expires = new Date(Date.now() + 30 * 24 * 3600 * 1000).toUTCString(); document.cookie = cookieName + '=' + encodeURIComponent(JSON.stringify(viewed)) + '; expires=' + expires + '; path=/; SameSite=Lax'; })(); 

После этого кука содержит ID последних 20 просмотренных товаров. Срок жизни — 30 дней.

Компонент отображения истории

Кастомный компонент local:catalog.viewed читает куку на сервере и загружает элементы:

// component.php $viewed = []; if (!empty($_COOKIE['bx_viewed'])) { $raw = json_decode($_COOKIE['bx_viewed'], true); if (is_array($raw)) { $viewed = array_map('intval', array_slice($raw, 0, 10)); } } if (empty($viewed)) { $this->AbortResultCache(); return; } $res = \CIBlockElement::GetList( [], ['ID' => $viewed, 'IBLOCK_ID' => CATALOG_IBLOCK_ID, 'ACTIVE' => 'Y'], false, ['nTopCount' => 10], ['ID', 'NAME', 'PREVIEW_PICTURE', 'DETAIL_PAGE_URL', 'CATALOG_PRICE_1'] ); $items = []; while ($el = $res->GetNextElement()) { $fields = $el->GetFields(); $items[$fields['ID']] = $fields; } // Восстановить порядок просмотров $arResult = array_filter(array_map(fn($id) => $items[$id] ?? null, $viewed)); 

Компонент должен работать с кешем, привязанным к пользователю (или без кеша для персонализации).

AJAX-контроллер для персонализации

При получении куки на сервере мы либо подставляем данные в шаблон, либо возвращаем HTML фрагмент через AJAX. Второй подход позволяет кешировать всю страницу без исключений. Карточки товаров кешируются на уровне nginx — блок загружается отдельно.

Как мы настраиваем динамические блоки под ключ

Пример: для интернет-магазина автозапчастей с 30 000 товаров мы реализовали блок на куках + база для аналитики. AJAX-загрузка сохранила кеш карточек, а событие записи в БД дало отчёты по возвратам. Конверсия в повторный просмотр выросла на 25%. Другой кейс: магазин электроники с 80 000 товаров — гибридное решение уменьшило нагрузку на сервер на 15%.

Что входит в работу

• Анализ архитектуры каталога: количество товаров, структура инфоблоков.
• Выбор способа хранения (куки/БД/гибрид).
• Реализация компонента local:catalog.viewed с кешированием.
• Интеграция с аналитикой: запись в БД, событие onAfterView.
• Настройка AJAX-загрузки для персональных блоков.
• Нагрузочное тестирование: блок не должен замедлять страницу.
• Документация и передача кода.

Процесс работы

1. Аналитика — изучаем схему инфоблоков, количество товаров, сценарии.
2. Проектирование — выбираем хранилище, прорабатываем структуру БД (если нужно).
3. Разработка — пишем компонент, запись/чтение, AJAX-контроллер.
4. Тестирование — проверяем для авторизованных и анонимов, кеширование.
5. Деплой — выкатываем на боевой сервер, мониторим логи.

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

Мы гарантируем корректный порядок просмотров, отсутствие дублей и производительность.