Розробка конфігуратора товарів на 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 КБ. Швидкість завантаження конфігуратора суттєво зросла.

Терміни виконання