Разработка конфигуратора комплектации товара на сайте

Клиент собирает игровой ПК на вашем сайте. Ему нужно выбрать процессор, материнскую плату, видеокарту — и чтобы все компоненты были совместимы. Без конфигуратора он тратит часы на сверку характеристик, а менеджеры — на проверку заказов. С правильным инструментом процесс превращается в несколько кликов. Мы создаем кастомные конфигураторы, которые встраиваются в ваш сайт и автоматизируют весь процесс — от выбора до добавления в корзину.

Что такое конфигуратор комплектации?

Конфигуратор комплектации — это интерактивный интерфейс, который позволяет покупателю собрать продукт из доступных опций, автоматически проверяя совместимость и рассчитывая итоговую цену. В основе лежит набор групп параметров (например, CPU, RAM, цвет), каждая из которых может зависеть от предыдущих выборов. Инструмент заменяет ручной подбор и консультации менеджеров, сокращая время оформления заказа на 40%.

Как конфигуратор решает проблему совместимости?

Отметим: когда покупатель выбирает материнскую плату, нужно отфильтровать только совместимые процессоры. В нашей схеме данных есть поля depends_on_group_id и depends_on_option_id, которые связывают группы параметров. Правила совместимости (required/forbidden) задаются отдельно и проверяются на бэкенде. Это исключает некорректные комбинации еще до того, как пользователь увидит корзину.

Типы конфигураторов — разработка конфигуратора комплектации

Каскадные зависимости: определение и реализация

Каскадные зависимости — это когда выбор в одной группе определяет доступные варианты в следующей. Например, при выборе материнской платы с сокетом LGA1700 становятся доступны только процессоры Core 12-13 поколений. Мы реализуем это через связь depends_on_group_id и depends_on_option_id, а правила совместимости храним отдельно.

Схема данных

-- Шаблон конфигуратора CREATE TABLE configurators ( id BIGSERIAL PRIMARY KEY, product_id BIGINT REFERENCES products(id), name VARCHAR(255), base_price NUMERIC(12,2) DEFAULT 0, image_base_url TEXT, is_active BOOLEAN DEFAULT TRUE ); -- Группы параметров (шаги) CREATE TABLE config_groups ( id BIGSERIAL PRIMARY KEY, configurator_id BIGINT REFERENCES configurators(id) ON DELETE CASCADE, name VARCHAR(255) NOT NULL, -- "Процессор", "Оперативная память" slug VARCHAR(100) NOT NULL, type VARCHAR(20) NOT NULL, -- 'radio', 'checkbox', 'quantity', 'text' is_required BOOLEAN DEFAULT TRUE, sort_order SMALLINT DEFAULT 0, depends_on_group_id BIGINT REFERENCES config_groups(id), -- зависимость depends_on_option_id BIGINT -- от конкретного варианта ); -- Варианты внутри группы CREATE TABLE config_options ( id BIGSERIAL PRIMARY KEY, group_id BIGINT REFERENCES config_groups(id) ON DELETE CASCADE, name VARCHAR(255) NOT NULL, -- "Intel Core i7-13700H" sku_suffix VARCHAR(100), -- добавляется к базовому SKU price_modifier NUMERIC(12,2) DEFAULT 0, -- доплата или скидка weight_modifier INT DEFAULT 0, -- изменение веса в граммах image_layer VARCHAR(500), -- URL слоя изображения stock INT DEFAULT 9999, -- ограничение по наличию is_default BOOLEAN DEFAULT FALSE, sort_order SMALLINT DEFAULT 0 ); -- Правила совместимости CREATE TABLE config_compatibility ( id BIGSERIAL PRIMARY KEY, option_a_id BIGINT REFERENCES config_options(id), option_b_id BIGINT REFERENCES config_options(id), type VARCHAR(20) NOT NULL, -- 'required', 'forbidden', 'recommended' message TEXT -- пояснение для покупателя ); 

Как мы реализуем конфигуратор: от схемы до фронтенда

Бэкенд: вычисление цены и валидация

class ConfiguratorEngine { public function calculate(int $configuratorId, array $selectedOptions): ConfigResult { $configurator = Configurator::with([ 'groups.options', 'compatibilityRules', ])->findOrFail($configuratorId); $errors = []; $totalPrice = $configurator->base_price; $totalWeight = 0; $skuParts = []; $imageLayers = []; foreach ($configurator->groups as $group) { $selected = collect($selectedOptions)->where('group_id', $group->id)->first(); if ($group->is_required && !$selected) { $errors[] = "Не выбрано: {$group->name}"; continue; } if (!$selected) continue; $option = $group->options->find($selected['option_id']); if (!$option) { $errors[] = "Неверный вариант для группы {$group->name}"; continue; } $totalPrice += $option->price_modifier; $totalWeight += $option->weight_modifier; if ($option->sku_suffix) $skuParts[] = $option->sku_suffix; if ($option->image_layer) $imageLayers[] = $option->image_layer; } // Проверка совместимости $compatErrors = $this->checkCompatibility($selectedOptions, $configurator->compatibilityRules); $errors = array_merge($errors, $compatErrors); return new ConfigResult( isValid: empty($errors), errors: $errors, totalPrice: $totalPrice, totalWeight: $totalWeight, configSku: implode('-', $skuParts), imageLayers: $imageLayers, ); } private function checkCompatibility(array $selected, Collection $rules): array { $errors = []; $selectedIds = array_column($selected, 'option_id'); foreach ($rules as $rule) { $hasA = in_array($rule->option_a_id, $selectedIds); $hasB = in_array($rule->option_b_id, $selectedIds); if ($rule->type === 'forbidden' && $hasA && $hasB) { $errors[] = $rule->message ?? 'Несовместимые компоненты'; } if ($rule->type === 'required' && $hasA && !$hasB) { $option = ConfigOption::find($rule->option_b_id); $errors[] = $rule->message ?? "Для этой опции требуется: {$option->name}"; } } return $errors; } } 

API-эндпоинты и контроллер

// Получить структуру конфигуратора Route::get('/configurators/{id}', [ConfiguratorController::class, 'show']); // Вычислить цену для текущей конфигурации Route::post('/configurators/{id}/calculate', [ConfiguratorController::class, 'calculate']); // Добавить конфигурацию в корзину Route::post('/configurators/{id}/add-to-cart', [ConfiguratorController::class, 'addToCart']); class ConfiguratorController extends Controller { public function calculate(Request $request, int $id): JsonResponse { $data = $request->validate([ 'options' => 'required|array', 'options.*.group_id' => 'required|integer', 'options.*.option_id' => 'required|integer', ]); $result = $this->engine->calculate($id, $data['options']); return response()->json([ 'valid' => $result->isValid, 'errors' => $result->errors, 'total_price' => $result->totalPrice, 'total_weight' => $result->totalWeight, 'config_sku' => $result->configSku, 'image_layers' => $result->imageLayers, ]); } } 

Фронтенд-компонент

interface ConfigGroup { id: number; name: string; type: 'radio' | 'checkbox'; options: ConfigOption[]; depends_on_group_id?: number; depends_on_option_id?: number; } const Configurator: React.FC<{ configuratorId: number }> = ({ configuratorId }) => { const { data: config } = useQuery(['configurator', configuratorId], fetchConfigurator); const [selections, setSelections] = useState<Record<number, number>>({}); const [result, setResult] = useState<CalcResult | null>(null); const updateSelection = async (groupId: number, optionId: number) => { const newSelections = { ...selections, [groupId]: optionId }; setSelections(newSelections); const options = Object.entries(newSelections).map(([gId, oId]) => ({ group_id: Number(gId), option_id: oId, })); const res = await api.post(`/configurators/${configuratorId}/calculate`, { options }); setResult(res.data); }; const visibleGroups = config?.groups.filter(g => { if (!g.depends_on_group_id) return true; return selections[g.depends_on_group_id] === g.depends_on_option_id; }); return ( <div className="space-y-6"> {visibleGroups?.map(group => ( <ConfigGroupWidget key={group.id} group={group} selected={selections[group.id]} onSelect={(optId) => updateSelection(group.id, optId)} /> ))} {result && ( <div className="border-t pt-4"> <p className="text-2xl font-bold">{formatPrice(result.total_price)}</p> {result.errors.map((e, i) => ( <p key={i} className="text-red-500 text-sm">{e}</p> ))} <button disabled={!result.valid} onClick={() => addToCart(configuratorId, selections)} className="btn-primary mt-3 disabled:opacity-50" > Добавить в корзину </button> </div> )} </div> ); }; 

Сохранение конфигурации в корзине

// В корзине сохраняем полную конфигурацию CartItem::create([ 'cart_id' => $cart->id, 'product_id' => $configurator->product_id, 'configurator_id' => $configurator->id, 'config_options' => json_encode($selectedOptions), 'config_sku' => $result->configSku, 'unit_price' => $result->totalPrice, 'quantity' => 1, ]); 

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

• Архитектура данных: проектирование схемы, оптимизация запросов (избегаем N+1).
• Бэкенд-логика: обработка зависимостей, проверка совместимости, расчёт цены и веса.
• REST API: документация в формате OpenAPI, готовые эндпоинты для интеграции.
• Фронтенд-виджеты: адаптивные компоненты на React, поддержка слоёв изображений.
• Административная панель: управление группами, опциями, правилами совместимости.
• Интеграция с корзиной: генерация SKU, передача конфигурации в заказ.
• Документация и обучение: передаём доступ к репозиторию и схему данных.

Почему конфигуратор повышает конверсию?

Исследования ConversionXL показывают, что кастомный конфигуратор увеличивает конверсию в 3 раза по сравнению с простым каталогом. Покупатель получает мгновенную обратную связь: видит, как меняется цена, и убеждается в совместимости компонентов. Это снижает количество брошенных корзин на 25%. Средний чек при этом вырастает на 15–20%. Свяжитесь с нами, чтобы обсудить ваш проект — мы поможем подобрать оптимальное решение.

Сроки реализации

• Схема данных + ConfiguratorEngine (без зависимостей): 2 дня
• Зависимые группы + правила совместимости: +1 день
• API-эндпоинты: 0.5 дня
• Фронтенд radio/checkbox конфигуратор: 2 дня
• Визуальный конфигуратор (слои): +1-2 дня
• Интерфейс создания конфигураторов в админке: 2 дня

Итого без визуализации: 6-7 дней. С визуализацией: 8-9 дней. Стоимость разработки конфигуратора варьируется от $450–1.2k. в зависимости от сложности и количества зависимостей.

Почему стоит работать с нами

Мы занимаемся разработкой конфигураторов более пяти лет. За это время реализовали 50+ проектов для интернет-магазинов различной сложности — от простых линейных конфигураторов до визуальных с 3D-превью. Наши инженеры сертифицированы по Laravel и React. Гарантируем стабильную работу решения под любой нагрузкой. Закажите конфигуратор под ключ — от проектирования до передачи в эксплуатацию.