Разработка системы сравнения товаров под ключ
Пользователь добавляет товары в сравнение и видит таблицу с характеристиками. Но когда в каталоге 10 000 позиций с разными наборами атрибутов, реализация превращается в архитектурный вызов. Мы создаём системы сравнения для интернет-магазинов с гарантией производительности и опытом в e-commerce более 10 лет. Система сравнения упрощает выбор в категориях с высокой когнитивной нагрузкой: электроника, бытовая техника, автозапчасти, строительные материалы. Пользователь добавляет несколько позиций и видит их характеристики в едином табличном виде. Реализация кажется простой, пока не сталкиваешься с разнородными атрибутами, вложенными категориями и требованием к производительности. Наши инженеры решают эти задачи с помощью проверенных архитектурных паттернов и современного стека.
По данным исследований UX, пользователи с системой сравнения проводят на 30% меньше времени на выбор товара и реже покидают сайт.
Какие проблемы решает система сравнения?
Без системы сравнения пользователь открывает десятки вкладок, пытаясь сопоставить характеристики вручную. Это увеличивает время выбора на 30–50% и повышает процент отказов. Система сравнения решает три ключевые задачи:
- Скорость оценки: таблица с характеристиками вместо множества страниц.
- Наглядность различий: подсветка лучших значений и фильтр «только различия».
- Сохранение контекста: список не теряется при переходах между страницами.
Как хранить список сравнения?
Выбор хранилища зависит от требований к синхронизации и авторизации. Сравним варианты в таблице:
| Хранилище | Скорость | Синхронизация | Без авторизации | Объём данных |
|---|---|---|---|---|
| LocalStorage | Мгновенно | Нет | Да | До 5–10 MB |
| Серверная сессия (Redis) | < 50 мс | Между вкладками | Да (по токену) | Неограничен |
| БД пользователя | 100–500 мс | Между устройствами | Нет | Неограничен |
Рекомендуемая схема: LocalStorage + merge с серверным списком при авторизации — как в корзине интернет-магазина. Это даёт скорость офлайн и синхронизацию после входа. LocalStorage в 100 раз быстрее серверного запроса для чтения.
Архитектура данных: модель атрибутов и подсветка
Главная сложность — атрибуты разных товаров могут не совпадать. Телевизор имеет «диагональ», холодильник — «объём камеры», и оба могут попасть в одну таблицу сравнения, если пользователь случайно добавил разные категории.
Схема атрибутов:
attributes ( id, name, unit, type, -- тип: numeric | text | boolean | range category_id, -- атрибут принадлежит категории comparable, -- показывать ли в сравнении highlight_if_best -- подсвечивать ли лучшее значение ) product_attributes ( product_id, attribute_id, value_numeric, value_text, value_boolean ) Флаг comparable позволяет исключить из таблицы сравнения атрибуты типа «артикул» или «страна производства», которые не дают информации для выбора.
Подсветка лучшего значения — важная UX-деталь: пользователь сразу видит, у какого товара больше ОЗУ или ниже энергопотребление. Требует знания семантики атрибута. Реализация на TypeScript:
type AttributeComparison = { direction: 'higher_is_better' | 'lower_is_better' | 'none'; }; function highlightBest(values: number[], direction: AttributeComparison['direction']): number { if (direction === 'higher_is_better') return Math.max(...values); if (direction === 'lower_is_better') return Math.min(...values); return NaN; // не подсвечиваем } Это поле highlight_direction хранится в таблице attributes. Для атрибутов типа «цвет» или «материал» подсветка не применяется.
Отображение таблицы: группировка, sticky-шапка и deep links
Классическая структура: строки — атрибуты, колонки — товары. Но при 20+ атрибутах нужна группировка:
Общие характеристики ├── Бренд ├── Страна производства └── Гарантия Дисплей ├── Диагональ ├── Разрешение └── Частота обновления Производительность ├── Процессор ├── ОЗУ └── Накопитель Группы схлопываются/раскрываются. Дополнительный фильтр — «Показать только различия» — скрывает строки, где у всех товаров одинаковое значение. Это ключевая фича: в таблице из 50 строк часто 30 совпадают.
function filterDifferences(rows: ComparisonRow[]): ComparisonRow[] { return rows.filter(row => { const values = row.products.map(p => p.value); return new Set(values).size > 1; }); } При 4–5 товарах в сравнении таблица выходит за ширину экрана. Решение:
- Горизонтальный scroll контейнера, при этом левая колонка (названия атрибутов) —
position: sticky; left: 0 - Шапка с фото и названиями товаров —
position: sticky; top: 0(или фиксируется при скролле вниз) - На мобайле: горизонтальный свайп через
overflow-x: autoсscroll-snap-type: x mandatory
URL страницы сравнения должен содержать список товаров: /compare?ids=42,117,203. Это позволяет поделиться ссылкой, вернуться к сравнению через историю браузера и индексировать популярные сравнения в поисковиках (с noindex на длинных хвостах).
Интеграция с каталогом и UI
Пока пользователь листает каталог и добавляет товары, внизу экрана (или сбоку) показывается фиксированная панель с текущим списком сравнения и кнопкой «Сравнить». Реализация: fixed-позиционированный компонент, появляется когда список непустой, анимация через CSS transform translateY.
На странице категории рядом с каждым товаром — чекбокс или иконка «сравнить». При отмеченных 2+ товарах — появляется CTA-кнопка «Сравнить выбранное». Это конверсионный паттерн: пользователь не уходит на отдельную страницу до тех пор, пока не выбрал хотя бы двух кандидатов.
Ограничение количества товаров в сравнении — 3–5 позиций. Больше — таблица нечитаема. При попытке добавить 6-й показываем уведомление: «Уберите один товар, чтобы добавить новый». UX-паттерн: вместо блокировки предлагаем заменить один из существующих.
Что входит в работу
При заказе разработки системы сравнения под ключ вы получаете:
- Архитектурную документацию (выбор хранилища, модель данных)
- Интеграцию с вашим каталогом (API, база данных)
- Готовые компоненты интерфейса (таблица, панель, кнопки)
- Документацию по кастомизации и поддержке
- 30 дней технической поддержки после запуска
Закажите консультацию по интеграции системы сравнения. Наши инженеры подготовят точную смету и timeline за 2 рабочих дня.
Сроки
- Базовое сравнение (LocalStorage, статичная таблица, кнопка на карточке): 1–2 недели
- Полноценная система (группировка атрибутов, подсветка лучшего, sticky-шапка, плавающая панель, deep links): 2–4 недели
- Интеграция с существующим каталогом на нестандартной модели данных добавляет 1–2 недели
Система сравнения окупается в категориях, где средний чек высокий и пользователь тратит время на выбор — техника, инструмент, оборудование. В магазинах с простым ассортиментом приоритет ниже.