Development of a 1C-Bitrix product configurator module

Developing a Product Configurator Module for 1C-Bitrix

A configurator is needed when a product doesn't have a fixed set of characteristics, but is assembled from variants: furniture with material, color, and size selection; a computer where processor affects available video cards; industrial equipment with dependent options. Standard Bitrix trading offers (SKU) cover simple cases — N×M combinations. A configurator is a different paradigm: dependency tree, dynamic pricing, visualization.

How Configurator Differs from SKU

In SKU, all possible combinations are listed in advance. If a laptop has 3 processor options, 4 RAM variants, and 3 SSD variants — you need 36 SKUs, and all must be created and maintained. In a configurator, options are specified independently, and total price and composition are calculated dynamically. This is a fundamentally different data model.

Data Model

Module vendor.configurator:

• b_vendor_cfg_product — configurable products: id, iblock_element_id (base product), name, base_price, is_active
• b_vendor_cfg_group — option groups: id, product_id, name, sort, type (single/multiple/required), display_type (radio/checkbox/select/visual)
• b_vendor_cfg_option — options: 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 — dependencies: id, option_id (if selected), dependent_option_id, action (show/hide/require/disable)
• b_vendor_cfg_configuration — saved configurations: id, product_id, user_id, session_id, options (JSON), total_price, created_at
• b_vendor_cfg_order_item — configuration to order item link: configuration_id, basket_item_id

Option Dependencies

The most complex part of the configurator — dependencies. When "Powerful PSU" is selected, more performant video cards automatically become available:

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);
    }
}

Result is sent to frontend via AJAX on each selection change.

Dynamic Price Calculation

Base price + option modifiers:

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);
    }
}

Formula modifier allows non-linear dependencies: e.g., custom size price is calculated by area (width × height × base rate per sq.m).

Configurator Frontend

Configurator interface — React/Vue component connected to product page. Logic:

1. Loads group and option structure via REST-endpoint
2. On selection change — AJAX to DependencyResolver, updates option visibility
3. Simultaneously AJAX to PriceCalculator, updates total price
4. Visual options (color, material) — preview grid with click

Configuration state syncs with URL hash — configuration can be copied and link shared.

Adding to Cart

Saved configuration is added to cart as single item. Configuration composition is stored in b_vendor_cfg_configuration.options, link to cart item via b_vendor_cfg_order_item.

When viewing order, user and manager see details: which options were selected exactly.

Administrative Interface

• Configurator builder: drag-and-drop groups and options
• Dependency configuration via visual editor (rules list)
• Configurator preview directly in admin
• List of saved user configurations
• Statistics: popular configurations, average check by configurator

Development Timeline

Total: 13 working days. 3D visualization (WebGL) — separate project.