Клиент собирает игровой ПК на вашем сайте. Ему нужно выбрать процессор, материнскую плату, видеокарту — и чтобы все компоненты были совместимы. Без конфигуратора он тратит часы на сверку характеристик, а менеджеры — на проверку заказов. С правильным инструментом процесс превращается в несколько кликов. Мы создаем кастомные конфигураторы, которые встраиваются в ваш сайт и автоматизируют весь процесс — от выбора до добавления в корзину.
Что такое конфигуратор комплектации?
Конфигуратор комплектации — это интерактивный интерфейс, который позволяет покупателю собрать продукт из доступных опций, автоматически проверяя совместимость и рассчитывая итоговую цену. В основе лежит набор групп параметров (например, CPU, RAM, цвет), каждая из которых может зависеть от предыдущих выборов. Инструмент заменяет ручной подбор и консультации менеджеров, сокращая время оформления заказа на 40%.
Как конфигуратор решает проблему совместимости?
Отметим: когда покупатель выбирает материнскую плату, нужно отфильтровать только совместимые процессоры. В нашей схеме данных есть поля depends_on_group_id и depends_on_option_id, которые связывают группы параметров. Правила совместимости (required/forbidden) задаются отдельно и проверяются на бэкенде. Это исключает некорректные комбинации еще до того, как пользователь увидит корзину.
Типы конфигураторов — разработка конфигуратора комплектации
| Тип | Примеры | Особенности |
|---|---|---|
| Линейный | Ноутбук: CPU -> RAM -> SSD | Каждый выбор независим, цена суммируется |
| Зависимый | ПК: материнская плата -> совместимые CPU | Следующий шаг зависит от предыдущего |
| Визуальный | Кухня, мебель, автомобиль | Изображение меняется при выборе |
| Модульный | Шкаф-купе: ширина + секции + наполнение | Произвольные комбинации в рамках ограничений |
| Тип | Сложность реализации | Когда использовать |
|---|---|---|
| Линейный | Низкая | Простые товары с независимыми опциями |
| Зависимый | Средняя | Товары с каскадными ограничениями (например, ПК) |
| Визуальный | Высокая | Мебель, автомобили, одежда с превью |
Каскадные зависимости: определение и реализация
Каскадные зависимости — это когда выбор в одной группе определяет доступные варианты в следующей. Например, при выборе материнской платы с сокетом 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%. Свяжитесь с нами, чтобы обсудить ваш проект — мы поможем подобрать оптимальное решение.
Типичные ошибки и как их избежать
- Не учитывать кэширование: при каждом изменении выполняется N+1 запрос. Используйте Redis для хранения промежуточных данных.
- Слишком много зависимых групп: усложняет UX. Лучше ограничить каскад двумя уровнями.
- Отсутствие ограничений по остаткам: если опция закончилась, её нужно скрывать, а не показывать с перечеркнутой ценой.
Сроки реализации
- Схема данных + ConfiguratorEngine (без зависимостей): 2 дня
- Зависимые группы + правила совместимости: +1 день
- API-эндпоинты: 0.5 дня
- Фронтенд radio/checkbox конфигуратор: 2 дня
- Визуальный конфигуратор (слои): +1-2 дня
- Интерфейс создания конфигураторов в админке: 2 дня
Итого без визуализации: 6-7 дней. С визуализацией: 8-9 дней. Стоимость разработки конфигуратора варьируется от 45 000 до 120 000 руб. в зависимости от сложности и количества зависимостей.
Почему стоит работать с нами
Мы занимаемся разработкой конфигураторов более пяти лет. За это время реализовали 50+ проектов для интернет-магазинов различной сложности — от простых линейных конфигураторов до визуальных с 3D-превью. Наши инженеры сертифицированы по Laravel и React. Гарантируем стабильную работу решения под любой нагрузкой. Закажите конфигуратор под ключ — от проектирования до передачи в эксплуатацию.