Разработка конфигуратора товаров (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, автоматизирует процессы конфигурирования, ценообразования и создания коммерческих предложений. Мы успешно внедрили такие системы для оконных заводов и машиностроительных предприятий. Получите бесплатную оценку вашего проекта — ответим в течение дня.