Блок «Ви переглядали» в 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 робочих днів. Зв'яжіться з нами для безкоштовної оцінки вашого проєкту — за один робочий день підготуємо пропозицію. Отримайте консультацію — ми покажемо, як це працює на вашому проєкті.

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