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

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

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

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