Разработка конфигуратора товаров на Vue.js для 1С-Битрикс

Разработка конфигуратора товаров на Vue.js для 1С-Битрикс

Конфигуратор товаров — интерактивный инструмент, где пользователь собирает продукт из вариантов (цвет, размер, комплектация, опции), а цена, изображение и наличие обновляются в реальном времени. Битрикс предоставляет данные о торговых предложениях, Vue — реактивный интерфейс.

Торговые предложения (SKU) в Битрикс

Конфигуратор работает с торговыми предложениями — подтипом b_iblock_element, привязанным к родительскому товару через b_iblock_element_property (свойство типа «привязка к элементу» или через CIBlockElement::GetList с PROPERTY_CML2_LINK).

Структура данных для конфигуратора:

// Получаем все SKU с их свойствами
$offers = \CCatalogSKU::GetOffersList(
    [$productId],
    $offerIblockId,
    ['ACTIVE' => 'Y'],
    ['ID', 'PROPERTY_COLOR', 'PROPERTY_SIZE', 'CATALOG_PRICE_1', 'CATALOG_QUANTITY']
);

Передаём в Vue как window.__PRODUCT_CONFIG__:

{
    offers: [
        { id: 101, props: { color: 'red', size: 'M' }, price: 1500, quantity: 5 },
        { id: 102, props: { color: 'red', size: 'L' }, price: 1500, quantity: 0 },
        // ...
    ],
    propertyDefs: {
        color: { name: 'Цвет', values: { red: { name: 'Красный', hex: '#FF0000' } } },
        size:  { name: 'Размер', values: { M: { name: 'M' }, L: { name: 'L' } } },
    }
}

Логика выбора SKU

Центральная часть конфигуратора — функция нахождения SKU по выбранным параметрам:

const selectedProps = reactive({ color: null, size: null });

const matchedOffer = computed(() => {
    return offers.find(offer =>
        Object.entries(selectedProps).every(([key, val]) =>
            val === null || offer.props[key] === val
        )
    ) ?? null;
});

// Доступные значения с учётом уже выбранных параметров
function getAvailableValues(propKey) {
    return offers
        .filter(offer =>
            Object.entries(selectedProps)
                .filter(([k]) => k !== propKey)
                .every(([k, v]) => v === null || offer.props[k] === v)
        )
        .map(offer => offer.props[propKey]);
}

Недоступные комбинации (нет в наличии) — серятся, но не скрываются: пользователь видит, что вариант существует.

Динамическое обновление изображений

При выборе цвета или материала — смена главного изображения товара. Изображения привязаны к SKU в b_iblock_element_property (свойство типа «файл»):

const currentImages = computed(() => {
    if (matchedOffer.value) {
        return matchedOffer.value.images; // Из данных предложения
    }
    return defaultImages; // Изображения базового товара
});

Переход между изображениями — через <transition> Vue или простой CSS-анимацией.

Конфигуратор с зависимыми параметрами

Более сложный случай: выбор модели → доступные конфигурации → доступные опции. Каждый уровень фильтрует следующий. Реализуется через computed с каскадной фильтрацией offers.

Для сложных конфигураторов (сборка ПК, мебель на заказ) — иерархическое дерево выбора с шагами (wizard), где каждый шаг подгружает допустимые варианты следующего через AJAX.

Случай из практики

Производитель окон: конфигуратор с 6 параметрами (тип профиля, стеклопакет, цвет, открывание, размер, дополнительные опции). Число SKU — несколько тысяч. Все данные загружались при открытии страницы (JSON 800 Кб). Решение: ленивая загрузка — при каждом шаге wizard запрашиваем с сервера допустимые значения следующего параметра с актуальными ценами. Размер первоначального запроса — 15 Кб. Скорость загрузки конфигуратора выросла существенно.

Сроки выполнения