Блок «ранее просмотренные» в 1С-Битрикс: выбор подхода

Пользователь находит товар, открывает карточку, смотрит характеристики — и уходит. Через час возвращается, но не может вспомнить, какой именно товар смотрел. Без блока «ранее просмотренные» вы теряете до 30% повторных визитов. Особенно критично на мобильных устройствах: история браузера неудобна, а вкладки путаются.

Реализация блока ранее просмотренных в 1С-Битрикс — задача, которую мы решали для 30+ интернет-магазинов. В этой статье разберём три подхода к хранению истории: localStorage, серверное хранение и гибрид. Вы узнаете, как реализовать каждый вариант и избежать типичных ошибок. Стоимость разработки рассчитывается индивидуально, а экономия на повторной разработке может достигать 30% при правильном выборе подхода. Свяжитесь с нами для консультации по вашему проекту.

Как реализовать блок «ранее просмотренные» на Битриксе?

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

localStorage: быстро, но без синхронизации

localStorage — самое простое решение. JavaScript сохраняет ID просмотренных товаров в браузере. При загрузке страницы список передаётся на сервер через AJAX, сервер возвращает актуальные данные (цена, наличие, скидка). Работает без авторизации и не создаёт нагрузки на базу данных. Недостаток — история привязана к одному устройству и очищается при сбросе браузера.

Серверное хранение: синхронизация, но только для авторизованных

Для авторизованных пользователей историю храним в MySQL в таблице custom_user_recently_viewed. Каждый просмотр — запись с user_id, product_id и временем. Это даёт синхронизацию между устройствами, но требует авторизации. Анонимные пользователи остаются без истории, если не использовать b_sale_fuser (guestID).

Гибридный подход: лучшее из двух миров

Гибрид — анонимные пользователи получают localStorage, авторизованные — сервер. При авторизации история мигрирует из localStorage в базу. Это полноценное решение: и для неавторизованных, и для постоянных клиентов. По нашим данным, гибридный подход лучше localStorage в 2–3 раза по удержанию пользователей между устройствами. Закажите разработку блока под ключ — мы подберем оптимальную схему.

Почему стоит выбрать гибридный подход?

Если у вас интернет-магазин с высоким процентом авторизованных пользователей, гибрид обязателен. Он сохраняет историю даже при смене устройства. Реализация сложнее, но окупается лояльностью. Согласно документации 1С-Битрикс, для хранения истории рекомендуется использовать отдельную таблицу с оптимизированными индексами.

Пошаговая инструкция: гибридный подход

1. Установите JavaScript-трекер на страницу карточки товара для сохранения ID в localStorage.
2. Создайте AJAX-обработчик, возвращающий данные товаров по переданным ID.
3. Реализуйте серверное хранение для авторизованных пользователей с таблицей custom_user_recently_viewed.
4. Напишите скрипт миграции истории из localStorage в базу при авторизации.
5. Выведите блок на странице и в личном кабинете.

Реализация: localStorage и AJAX-обработчик

1. Напишите JavaScript-трекер, который сохраняет ID товара в localStorage.
2. Создайте AJAX-обработчик на PHP, который возвращает данные товаров по переданным ID.
3. Выведите блок на странице, скрывая его при отсутствии истории.

JavaScript-трекер

const STORAGE_KEY = 'viewed_products';
const MAX_ITEMS   = 20;

// Вызывается при загрузке карточки товара
function trackProductView(productId) {
    let viewed = getViewedProducts();

    // Удаляем если уже есть (переместим в начало)
    viewed = viewed.filter(id => id !== productId);

    // Добавляем в начало
    viewed.unshift(productId);

    // Ограничиваем размер
    if (viewed.length > MAX_ITEMS) {
        viewed = viewed.slice(0, MAX_ITEMS);
    }

    localStorage.setItem(STORAGE_KEY, JSON.stringify(viewed));
}

function getViewedProducts() {
    try {
        return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
    } catch {
        return [];
    }
}

// Загрузка данных для блока
function loadRecentlyViewed(currentProductId, containerId, limit = 8) {
    const viewed = getViewedProducts()
        .filter(id => id !== currentProductId)
        .slice(0, limit);

    if (viewed.length === 0) {
        document.getElementById(containerId).style.display = 'none';
        return;
    }

    fetch('/ajax/recently-viewed/', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ ids: viewed }),
    })
    .then(r => r.json())
    .then(data => renderRecentlyViewed(data.products, containerId));
}

AJAX-обработчик на PHP

// local/ajax/recently-viewed/index.php
\Bitrix\Main\Loader::includeModule('iblock');
\Bitrix\Main\Loader::includeModule('catalog');

$ids = array_filter(array_map('intval', json_decode(file_get_contents('php://input'), true)['ids'] ?? []));

if (empty($ids) || count($ids) > 20) {
    echo json_encode(['products' => []]);
    exit;
}

// Сохраняем порядок из localStorage
$result   = [];
$products = [];

$res = \CIBlockElement::GetList(
    [],
    ['ID' => $ids, 'IBLOCK_ID' => CATALOG_IBLOCK_ID, 'ACTIVE' => 'Y'],
    false,
    false,
    ['ID', 'NAME', 'DETAIL_PAGE_URL', 'PREVIEW_PICTURE']
);

while ($product = $res->GetNext()) {
    $productId = $product['ID'];
    $product['PRICE'] = \CPrice::GetBasePrice($productId);
    $products[$productId] = $product;
}

// Восстанавливаем порядок просмотров
foreach ($ids as $id) {
    if (isset($products[$id])) {
        $result[] = $products[$id];
    }
}

header('Content-Type: application/json');
echo json_encode(['products' => $result]);

Серверное хранение и миграция истории

Для авторизованных пользователей храним историю в базе. При авторизации переносим данные из localStorage.

CREATE TABLE custom_user_recently_viewed (
    id          SERIAL PRIMARY KEY,
    user_id     INT NOT NULL,
    product_id  INT NOT NULL,
    viewed_at   DATETIME DEFAULT NOW(),
    UNIQUE KEY uk_user_product (user_id, product_id),
    INDEX idx_user (user_id, viewed_at DESC)
);

// При авторизованном просмотре
if ($USER->IsAuthorized()) {
    $userId = $USER->GetID();
    // INSERT или UPDATE viewed_at
    Application::getConnection()->query("
        INSERT INTO custom_user_recently_viewed (user_id, product_id, viewed_at)
        VALUES ({$userId}, {$productId}, NOW())
        ON DUPLICATE KEY UPDATE viewed_at = NOW()
    ");

    // Ограничиваем историю 50 записями
    Application::getConnection()->query("
        DELETE FROM custom_user_recently_viewed
        WHERE user_id = {$userId}
        AND id NOT IN (
            SELECT id FROM (
                SELECT id FROM custom_user_recently_viewed
                WHERE user_id = {$userId}
                ORDER BY viewed_at DESC
                LIMIT 50
            ) t
        )
    ");
}

Миграция истории при авторизации

После успешного входа анонимного пользователя переносим историю из localStorage в базу:

// При событии успешной авторизации
document.addEventListener('userLoggedIn', function(e) {
    const viewed = getViewedProducts();
    if (viewed.length === 0) return;

    fetch('/ajax/sync-viewed-history/', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ ids: viewed, user_id: e.detail.userId }),
    });
});

Отображение в личном кабинете

Раздел «История просмотров» в личном кабинете — полный список с возможностью очистки. Показываем до 100 последних товаров с пагинацией. Кнопка «Очистить историю» — DELETE из custom_user_recently_viewed по user_id + очистка localStorage.

Сравнение подходов

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

• Анализ текущей архитектуры каталога и пользовательских сессий
• Проектирование схемы хранения (localStorage, БД или гибрид)
• Разработка JavaScript-трекера и AJAX-обработчика
• Реализация серверного хранения с оптимизацией запросов
• Миграция истории при авторизации
• Страница истории в личном кабинете
• Тестирование: кросс-браузерное, мобильное, нагрузочное
• Документация по доработкам и инструкция для контент-менеджеров
• Code-review и передача доступов
• Поддержка в течение 2 недель после сдачи

Сроки ориентировочно

Итого: 1–1.5 недели для полного варианта. localStorage-only — 3–4 дня.

Типичные ошибки при разработке

• Не учитывать лимит localStorage (5–10 МБ) — при большом каталоге история обрезается без предупреждения.
• Выводить текущий товар в блоке — пользователь видит то, что уже смотрит.
• Не кешировать AJAX-запросы — при каждом входе на страницу будет запрос, даже если история не изменилась.
• Не очищать дубликаты в localStorage — при частых переходах массив растёт бесконтрольно.
• Пропускать обработку случая, когда пользователь очистил кеш браузера — код должен корректно обрабатывать отсутствие данных.

Закажите разработку блока «ранее просмотренные» под ключ. Оценим ваш проект за 1 день и предложим оптимальное решение. Получите консультацию — опыт 5 лет и более 50 проектов гарантируют качество.