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

Складні каталоги з десятками властивостей і тисячами SKU — класична біль інтернет-магазинів на 1С-Бітрікс. Стандартний компонент bitrix:catalog.item не дає гнучкості для побудови інтерактивного конфігуратора, де користувач обирає параметри, а ціна та зображення змінюються миттєво. Ми — команда інженерів з багаторічним досвідом на Бітріксі та Vue. За останні роки реалізували понад 15 конфігураторів для виробників меблів, вікон, комп'ютерної техніки. Середній чек після впровадження конфігуратора зростає на 20–30%, а конверсія в замовлення — на 15–25%.

Чому Vue.js для конфігуратора?

На відміну від jQuery, який дає затримки 200–300 мс, Vue.js реагує на вибір опції за 30–50 мс — різниця в 6 разів. Користувач бачить нову ціну та зображення без перезавантаження сторінки. Компонентна архітектура спрощує підтримку: UI-код ізольований від шаблонів Бітрікса.

Як ми організовуємо дані з Бітрікса

Конфігуратор працює з торговими пропозиціями — підтипом b_iblock_element, прив'язаним до батьківського товару через властивість 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 через властивість типу «файл»:

const currentImages = computed(() => { if (matchedOffer.value) { return matchedOffer.value.images; } return defaultImages; }); 

Перехід між зображеннями — через <transition> Vue або CSS-анімацію.

Конфігуратор із залежними параметрами

Вибір моделі → доступні конфігурації → доступні опції. Кожен рівень фільтрує наступний. Реалізується через computed з каскадною фільтрацією offers. Для складних конфігураторів (збірка ПК, меблі на замовлення) — ієрархічний wizard, де кожен крок підвантажує допустимі варіанти наступного через AJAX.

Як вирішити проблему завантаження тисяч SKU?

Ключовий прийом — ліниве завантаження. Вантажимо лише доступні варіанти для поточного кроку. У проєкті для виробника вікон із кількома тисячами SKU розмір початкового запиту скоротили з 800 Кб до 15 Кб — швидкість завантаження зросла в 5 разів. Додатково використовуємо теговане кешування Бітрікса: дані про ціни та залишки кешуються з прив'язкою до інфоблоків і скидаються при змінах.

Що дає конфігуратор: кейси з нашої практики

Виробник вікон (наш клієнт): конфігуратор із 6 параметрами, кілька тисяч SKU. Усі дані вантажилися при відкритті сторінки (JSON 800 Кб). Рішення — ліниве завантаження: при кожному кроці wizard запитуємо з сервера допустимі значення наступного параметра з актуальними цінами. Розмір початкового запиту — 15 Кб, швидкість завантаження зросла в 5 разів. Інвестиції окупилися за 4 місяці завдяки збільшенню середнього чека на 30% — додатковий виторг від опцій склав значну суму. Економія на поверненнях також була суттєвою.

Виробник комп'ютерної техніки: конфігуратор серверів із 12 параметрами. Сторінка вантажилася 8 секунд. Після впровадження лінивого завантаження та кешування — 1.2 секунди. Конверсія в замовлення зросла на 25%. Середній чек значно збільшився.

Порівняння: jQuery vs Vue.js

Що входить у роботу

1. Аналіз поточної структури каталогу та властивостей у Бітріксі
2. Проектування схеми даних для Vue
3. Розробка компонентів конфігуратора на Vue.js
4. Інтеграція з Бітріксом (отримання SKU, цін, зображень)
5. Налаштування тегованого кешування
6. Документація з API та структури даних
7. Навчання співробітників роботі з конфігуратором
8. Технічна підтримка 3 місяці

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

Понад 5 років на ринку, 50+ виконаних проєктів, сертифіковані спеціалісти Бітрікс. Код проходить рев'ю та тестування. Отримайте консультацію — обговоримо деталі вашого проєкту. Зв'яжіться з нами, щоб обговорити ваш проєкт і підготувати комерційну пропозицію.

Vue.js — Wikipedia 1С-Бітрікс — Wikipedia