Создание интерактивного конфигуратора на 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% — дополнительная выручка от опций составила $11k–16k за первый месяц. Экономия на возвратах — 400 тыс. долларов.

Производитель компьютерной техники: конфигуратор серверов с 12 параметрами. Страница грузилась 8 секунд. После внедрения ленивой загрузки и кэширования — 1.2 секунды. Конверсия в заказ выросла на 25%. Средний чек увеличился на $160–230.

Сравнение: 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