Розробка конфігуратора товарів (Product Configurator)
Інтернет-магазин меблів стикається з проблемою: клієнти вимагають індивідуальних розмірів та матеріалів, а готові картки охоплюють лише 15 варіантів. Конфігуратор товарів автоматизує збірку. Покупець обирає параметри, система перевіряє обмеження, показує ціну та візуалізацію в реальному часі. Ми реалізували 30+ конфігураторів для меблевих фабрик, віконних виробництв та B2B-платформ. Середній термін впровадження — 6 тижнів, що вдвічі швидше за стандартні рішення. Гарантуємо стабільність та підтримку після запуску. Оцінимо ваш проект за один робочий день.
Які задачі вирішує конфігуратор товарів?
Конфігуратор — не просто калькулятор. Він керує залежностями опцій, оновлює візуалізацію та гарантує, що замовник не збере технічно неможливу комбінацію. Наприклад, для кухонного гарнітура: якщо обрана витяжка, то верхні шафи певного розміру стають недоступні. Без конфігуратора такі правила доводиться перевіряти вручну при кожному замовленні.
Типи конфігураторів: порівняння
| Тип | Приклад | Складність | Масштабування |
|---|---|---|---|
| Варіантний | Футболка (колір×розмір) | Низька | Обмежено числом SKU |
| Параметричний | Вікна (ширина×висота×матеріал) | Середня | Мільйони комбінацій |
| CPQ | B2B-обладнання з інтеграцією CRM/ERP | Висока | Необмежено |
Варіантний — найпростіший: кожна комбінація як окремий товар. Параметричний — обчислюваний: ціна та характеристики за формулами. CPQ — для складних B2B-угод: знижки за обсяг, індивідуальні ціни, генерація комерційних пропозицій.
Як побудувати модель даних?
configurator_options (id, product_id, name, type, required, sort_order) -- type: select | radio | checkbox | range | text option_values (id, option_id, label, value, price_delta, image_url, in_stock) option_dependencies (id, if_option_id, if_value, then_option_id, action) -- action: show | hide | require | disable | set_value price_rules (id, product_id, conditions JSONB, price_formula) Залежності між опціями — ключова частина. Приклад: обрали «Тип корпусу = Алюміній» → опція «Колір» показує лише 4 з 12 кольорів, а опція «Гравірування» стає обов'язковою. Це дерево умов, яке обчислюється на клієнті при кожній зміні.
Чому важлива продуктивність клієнтської частини?
Конфігуратор — по суті реактивна state machine. На кожну зміну опції:
- Оновлюємо стан вибору
- Обчислюємо активні залежності (які опції приховати/показати/заблокувати)
- Перераховуємо ціну
- Оновлюємо візуалізацію (якщо є)
- Перевіряємо наявність (запит до API або по локальному кешу)
Реалізація на React + Zustand:
const useConfigurator = create((set, get) => ({ selections: {}, select: (optionId, value) => { const next = { ...get().selections, [optionId]: value }; set({ selections: next, visibleOptions: computeVisibility(next, rules), price: computePrice(next, basePrice, pricingRules), }); }, })); Правила залежностей завантажуються один раз при монтуванні та кешуються локально. Запити до сервера — лише для перевірки актуальної наявності при додаванні в корзину.
Як забезпечити продуктивність при тисячах опцій?
Використовуйте мемоізацію обчислень та віртуалізацію списку. Для React застосовуйте useMemo та React.memo. Якщо опцій більше 500, розбийте їх на групи та підвантажуйте по мірі розкриття. Кешуйте результат перевірки залежностей на стороні клієнта — це скорочує час перерахунку з 50 мс до 5 мс.
Візуалізація: який рівень обрати?
| Рівень | Технологія | Складність контенту | Приклад |
|---|---|---|---|
| Зміна зображення | Проста заміна src |
Низька | Одяг, прості товари |
| Layered композиція | Canvas API або CSS-накладання | Середня | Велосипед: рама, колеса, кермо |
| 3D візуалізація | Three.js, GLTF | Висока | Меблі, обладнання |
Layered композиція дозволяє збирати зображення з прозорих шарів. Кожна опція додає або прибирає шар. Приклад реалізації через Canvas API:
function renderConfiguration(canvas, layers) { const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); for (const layer of layers.filter(l => l.visible)) { const img = imageCache[layer.src]; ctx.drawImage(img, 0, 0); } } Для простих товарів достатньо зміни зображень. Layered композиція підходить для збірних виробів, а 3D — для складних меблів або обладнання.
Чому конфігуратор збільшує конверсію?
Покупець отримує точний продукт під свої потреби, що знижує повернення на 15% та підвищує середній чек на 20%. У B2B скорочується час на узгодження: менеджери витрачають на 40% менше часу на ручний розрахунок. Конфігуратор окупається в середньому за 6 місяців. Зв'яжіться з нами для консультації щодо вибору типу конфігуратора.
Що входить у нашу роботу?
- Модель даних та бізнес-правила (документація)
- Інтеграція з корзиною, CRM/ERP (REST API)
- Адаптивна верстка та мікроанімації
- Інструкція з наповнення контенту (зображення, шари, 3D-моделі)
- Гарантія продуктивності (LCP < 1.5 с, INP < 200 мс)
Терміни орієнтовно
- Варіантний конфігуратор: 2–3 тижні
- Параметричний з залежностями: 4–7 тижнів
- CPQ з інтеграцією: 8–14 тижнів
Основний час іде не на код, а на опрацювання бізнес-правил: які комбінації допустимі, як рахується ціна, що відображається при конфлікті опцій. Без детального ТЗ від клієнта реалізація неможлива.
CPQ (Configure, Price, Quote) — це клас ПЗ, який, як зазначено на Wikipedia, автоматизує процеси конфігурування, ціноутворення та створення комерційних пропозицій. Ми успішно впровадили такі системи для віконних заводів та машинобудівних підприємств. Отримайте безкоштовну оцінку вашого проекту — відповімо протягом дня.