Розробка модуля конфігуратора товарів 1С-Бітрікс

Розроблення модуля конфігуратора товарів для 1С-Bitrix

Конфігуратор потрібен, коли товар не має фіксованого набору характеристик, а збирається з варіантів: меблі з вибором матеріалу, кольору та розміру; комп'ютер, де процесор впливає на доступні відеокарти; промислове обладнання з залежними опціями. Стандартні торговельні пропозиції Bitrix (SKU) охоплюють прості випадки — комбінації з N×M варіантів. Конфігуратор — це інша парадигма: дерево залежностей, динамічна ціна, візуалізація.

Чим конфігуратор відрізняється від SKU

У SKU попередньо перераховані всі можливі комбінації. Якщо у ноутбука 3 варіанти процесора, 4 варіанти RAM та 3 варіанти SSD — потрібно 36 SKU, і всі їх потрібно створювати та підтримувати. У конфігураторі опції задаються незалежно, а підсумкова ціна та склад розраховуються динамічно. Це принципово інша модель даних.

Модель даних

Модуль vendor.configurator:

• b_vendor_cfg_product — конфігуровані товари: id, iblock_element_id (базовий товар), name, base_price, is_active
• b_vendor_cfg_group — групи опцій: id, product_id, name, sort, type (single/multiple/required), display_type (radio/checkbox/select/visual)
• b_vendor_cfg_option — опції: id, group_id, name, price_mod_type (fixed/percent/formula), price_mod_value, image_id, weight_mod, is_default, is_active
• b_vendor_cfg_dependency — залежності: id, option_id (якщо вибрана), dependent_option_id, action (show/hide/require/disable)
• b_vendor_cfg_configuration — збережені конфігурації: id, product_id, user_id, session_id, options (JSON), total_price, created_at
• b_vendor_cfg_order_item — зв'язок конфігурації з позицією замовлення: configuration_id, basket_item_id

Залежності опцій

Найскладніша частина конфігуратора — залежності. При виборі «Потужний блок живлення» автоматично стають доступні більш продуктивні відеокарти:

class DependencyResolver
{
    public function resolve(int $productId, array $selectedOptions): DependencyResult
    {
        $dependencies = DependencyTable::getList([
            'filter' => ['OPTION_ID' => $selectedOptions],
        ])->fetchAll();

        $visible   = [];
        $hidden    = [];
        $required  = [];
        $disabled  = [];

        foreach ($dependencies as $dep) {
            match ($dep['ACTION']) {
                'show'    => $visible[]  = $dep['DEPENDENT_OPTION_ID'],
                'hide'    => $hidden[]   = $dep['DEPENDENT_OPTION_ID'],
                'require' => $required[] = $dep['DEPENDENT_OPTION_ID'],
                'disable' => $disabled[] = $dep['DEPENDENT_OPTION_ID'],
            };
        }

        return new DependencyResult($visible, $hidden, $required, $disabled);
    }
}

Результат передається на фронтенд через AJAX при кожній зміні вибору.

Динамічний розрахунок ціни

Базова ціна + модифікатори опцій:

class PriceCalculator
{
    public function calculate(int $productId, array $selectedOptionIds): float
    {
        $product = ProductTable::getById($productId)->fetch();
        $price   = (float)$product['BASE_PRICE'];

        $options = OptionTable::getList([
            'filter' => ['ID' => $selectedOptionIds],
        ])->fetchAll();

        foreach ($options as $option) {
            $price = match ($option['PRICE_MOD_TYPE']) {
                'fixed'   => $price + (float)$option['PRICE_MOD_VALUE'],
                'percent' => $price * (1 + (float)$option['PRICE_MOD_VALUE'] / 100),
                'formula' => $this->evalFormula($option['PRICE_MOD_VALUE'], $price),
                default   => $price,
            };
        }

        return round($price, 2);
    }
}

Формульний модифікатор дозволяє нелінійні залежності: наприклад, ціна кастомного розміру розраховується за площею (ширина × висота × базова ставка за кв.м).

Фронтенд конфігуратора

Інтерфейс конфігуратора — React/Vue компонент, підключений до сторінки товару. Логіка:

1. Завантажує структуру груп та опцій через REST-endpoint
2. При зміні вибору — AJAX на DependencyResolver, оновлює видимість опцій
3. Одночасно AJAX на PriceCalculator, оновлює загальну ціну
4. Візуальні опції (колір, матеріал) — сітка превью з кліком

Стан конфігурації синхронізується з URL-хешем — конфігурацію можна скопіювати та відправити посилання.

Додавання в корзину

Збережена конфігурація додається в корзину як один товар. Склад конфігурації зберігається в b_vendor_cfg_configuration.options, зв'язок з позицією корзини — через b_vendor_cfg_order_item.

При перегляді замовлення користувач та менеджер бачать деталізацію: які саме опції були вибрані.

Адміністративний інтерфейс

• Конструктор конфігуратора: drag-and-drop груп та опцій
• Налаштування залежностей через візуальний редактор (список правил)
• Предпросмотр конфігуратора прямо в адміністрації
• Список збережених конфігурацій користувачів
• Статистика: популярні конфігурації, середній чек по конфігуратору

Терміни розроблення

Разом: 13 робочих днів. 3D-візуалізація конфігурації (WebGL) — окремий проект.