Розробка системи порівняння товарів під ключ
Користувач додає товари в порівняння та бачить таблицю з характеристиками. Але коли в каталозі 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 тижні
Система порівняння окупається в категоріях, де середній чек високий і користувач витрачає час на вибір — техніка, інструмент, обладнання. В магазинах з простим асортиментом пріоритет нижче.