Интерактивный прайс-лист на Vue.js для 1С-Битрикс: разработка

Прайс-лист на Битриксе — задача, которая на первый взгляд решается через bitrix:catalog.section с шаблоном таблицы. Проблемы появляются сразу, как только к статичному выводу добавляются требования: фильтрация строк без перезагрузки, сортировка по колонкам, переключение типа цен (розница/опт/дилер), расчёт итоговой суммы при выборе позиций. Серверный рендеринг и jQuery-постобработка здесь масштабируются плохо — каждый новый интерактивный элемент требует отдельного обработчика и ручной синхронизации DOM. Представьте: дистрибьютор с 4000 позиций, менеджеры открывают страницу — ждут 8 секунд, а потом не могут найти нужный артикул. Это типичная боль, которую решает наш компонент. Имея за плечами 4+ лет опыта и более 50 внедрений, мы гарантируем быстрый и стабильный результат.

Мы предлагаем Vue-компонент, который загружает данные одним запросом, а всю логику фильтрации, сортировки и переключения цен выполняет на клиенте без перезагрузки страницы. Для формирования данных используем \Bitrix\Catalog\PriceTable::getList с фильтром по группе цены и идентификаторам товаров. Данные передаются во Vue через глобальный объект window.BX_STATE, что исключает дублирование запросов. Стоимость разработки рассчитывается индивидуально, но экономия времени менеджеров окупает вложения в первые же месяцы.

Архитектура таблицы цен

Vue-компонент PriceTable получает массив позиций из Битрикса через window.BX_STATE.products. Данные формируются в result_modifier.php из модуля catalog:

$priceIterator = \Bitrix\Catalog\PriceTable::getList([
    'filter' => ['=CATALOG_GROUP_ID' => $priceTypeId, '=PRODUCT_ID' => $productIds],
    'select' => ['PRODUCT_ID', 'PRICE', 'CURRENCY'],
]);

Каждая позиция в массиве содержит: id, name, article, unit, набор цен по типам, остаток на складе, характеристики для фильтрации. Детали конфигурации инфоблоков: для работы компонента необходимо настроить инфоблок товаров с поддержкой торгового каталога, указать типы цен и разрешить экспорт данных через JSON. Мы предоставляем инструкцию по настройке.

Реактивные возможности таблицы

Фильтрация строк через computed:

const filteredProducts = computed(() => {
    return products.value
        .filter(p => selectedCategory.value ? p.categoryId === selectedCategory.value : true)
        .filter(p => searchQuery.value
            ? p.name.toLowerCase().includes(searchQuery.value.toLowerCase())
               || p.article.toLowerCase().includes(searchQuery.value.toLowerCase())
            : true
        )
        .filter(p => showInStock.value ? p.stock > 0 : true);
});

Всё вычисляется локально — нет запросов к серверу при каждом взаимодействии. Для прайс-листа на 500-2000 позиций это работает мгновенно.

Сортировка через sortKey и sortDirection refs. Клик по заголовку колонки переключает направление. Числовые и строковые колонки обрабатываются отдельно.

Переключение типов цен

Битрикс хранит несколько цен на товар в таблице b_catalog_price (поле CATALOG_GROUP_ID). Все типы цен передаются в JSON:

const activePriceType = ref('retail'); // 'retail' | 'wholesale' | 'dealer'
const displayPrice = (product) => product.prices[activePriceType.value];

Смена типа цены — мгновенная реактивная замена без сервера.

Выбор позиций и расчёт суммы

Для B2B-прайсов часто нужна возможность отметить позиции и получить итоговую сумму или отправить запрос. Чекбоксы на каждой строке, selectedIds — Set в ref():

const total = computed(() =>
    [...selectedIds.value]
        .map(id => products.value.find(p => p.id === id))
        .filter(Boolean)
        .reduce((sum, p) => sum + displayPrice(p) * (quantities[p.id] || 1), 0)
);

Поле количества на строке — v-model на quantities[product.id]. Изменение количества мгновенно пересчитывает итог. При нажатии «Отправить запрос» — POST на битриксовый обработчик с массивом {id, qty, price}.

Виртуальный скролл для больших прайсов

Прайс-лист на 5000+ позиций нельзя рендерить полностью — браузер тормозит. Виртуализация через @vueuse/virtual-list или vue-virtual-scroller: в DOM одновременно присутствует только 50-100 видимых строк, остальные вычисляются на лету. Фильтрация и поиск работают по полному массиву в памяти — только рендер виртуальный.

Как ускорить загрузку прайс-листа в 3 раза?

Ключ — кеширование JSON на стороне клиента и сервера. Вот шаги:

1. Настройте кеширование в sessionStorage при первом запросе.
2. Загружайте данные одним AJAX-запросом, ответ кешируйте тегированно.
3. Используйте тегированное кэширование на сервере — согласно документации 1С-Битрикс, это позволяет автоматически сбрасывать кеш при изменении товаров или цен.
4. Для каталогов до 10 000 товаров этого достаточно без бэкенд-кеша.

Почему Vue.js лучше jQuery для интерактивных таблиц?

Vue.js обеспечивает реактивность без ручного обновления DOM. В jQuery после каждого фильтра нужно перебирать строки и менять классы — на 2000 строк это даёт задержку 200–300 мс. Реактивные computed обновляются за 1–5 мс.

Vue.js и jQuery — оба инструмента имеют место, но для реактивных таблиц Vue.js даёт ощутимый выигрыш в производительности и поддерживаемости.

Кейс: интерактивный прайс дистрибьютора

Из нашей практики: дистрибьютор строительных материалов, прайс на 3800 позиций, три типа цен (розница, мелкий опт, крупный опт), фильтр по бренду и категории, поиск по артикулу.

Предыдущее решение: Excel-файл для скачивания, обновлялся вручную раз в неделю. Попытка сделать HTML-таблицу через bitrix:catalog.section упиралась в то, что страница грузилась 8 секунд (3800 строк в DOM), а поиска не было вообще.

Решение: Vue-компонент с виртуальным скроллом. Данные загружаются одним AJAX-запросом при монтировании компонента — Битрикс-контроллер возвращает JSON с полным прайсом (~400KB gzip ~80KB). Запрос кешируется в sessionStorage — повторное открытие страницы мгновенное.

Переключение типа цены доступно только авторизованным пользователям с нужной группой — проверка в Vue через window.BX_STATE.userGroups, дополнительно на сервере при каждом запросе. Неавторизованным показывается только розничная цена.

Результат: время до интерактивности — 1.2 секунды (загрузка JSON + рендер). Поиск по артикулу — мгновенный. Менеджеры перестали рассылать Excel.

Экспорт и печать

«Скачать прайс» — не отдельная страница, а генерация CSV в браузере из текущего отфильтрованного и отсортированного набора:

function exportCsv() {
    const rows = filteredProducts.value.map(p =>
        [p.article, p.name, displayPrice(p), p.unit].join(';')
    );
    const blob = new Blob(['\uFEFF' + rows.join('\n')], { type: 'text/csv;charset=utf-8' });
    // ... download link
}

BOM \uFEFF — обязателен для корректного открытия в Excel на Windows.

Этапы и сроки

Разработка ведётся итерационно — базовые функции в первую очередь, расширения после согласования.

Что входит в работу

• Документация по структуре данных и API контроллеров
• Доступ к Git-репозиторию с кодом компонента
• Инструкция по установке и настройке
• 2 недели технической поддержки и гарантия на код после запуска
• Обучение менеджеров работе с интерактивным прайсом

Свяжитесь с нами для аудита вашего каталога — мы предложим оптимальное решение. Закажите разработку интерактивного прайс-листа уже сегодня! Получите консультацию: оценим ваш каталог, предложим архитектуру и сроки. Используем виртуальный скролл для больших объёмов данных. Согласно документации 1С-Битрикс, тегированное кэширование повышает скорость загрузки.