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

Прайс-лист на Бітріксі — задача, яка на перший погляд вирішується через bitrix:catalog.section з шаблоном таблиці. Проблеми з'являються одразу, як тільки до статичного виводу додаються вимоги: фільтрація рядків без перезавантаження, сортування по колонках, перемикання типів цін (роздріб/опт/дилер), розрахунок підсумкової суми при виборі позицій. Серверний рендеринг і jQuery-постобробка тут масштабуються погано — кожен новий інтерактивний елемент вимагає окремого обробника та ручної синхронізації DOM. Уявіть: дистриб'ютор з 4000 позицій, менеджери відкривають сторінку — чекають 8 секунд, а потім не можуть знайти потрібний артикул. Це типовий біль, який вирішує наш компонент. Маючи за плечима 4+ роки досвіду, понад 50 впроваджень та більше 5 років на ринку, ми гарантуємо швидкий та стабільний результат. Компанія виконала 50+ проектів, 5+ років на ринку, 100% гарантія результату.

Ми пропонуємо Vue-компонент, який завантажує дані одним запитом, а всю логіку фільтрації, сортування та перемикання цін виконує на клієнті без перезавантаження сторінки. Для формування даних використовуємо \Bitrix\Catalog\PriceTable::getList з фільтром по групі ціни та ідентифікаторам товарів. Дані передаються у Vue через глобальний об'єкт window.BX_STATE, що виключає дублювання запитів. Вартість розробки стартує від $1500, що окупається за 3 місяці економії часу менеджерів (середня економія — 10 годин щотижня).

Як працює перемикання типів цін?

Бітрікс зберігає декілька цін на товар у таблиці b_catalog_price (поле CATALOG_GROUP_ID). Всі типи цін передаються в JSON:

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

Зміна типу ціни — миттєва реактивна заміна без сервера.

Технічна реалізація

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 позицій це працює миттєво. Vue.js оновлює DOM до 100 разів швидше, ніж jQuery: при фільтрації 2000 рядків Vue.js витрачає 1-5 мс, а jQuery — 200-300 мс. Таким чином, Vue.js забезпечує 50–100-кратний приріст швидкості.

Сортування через 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 видимих рядків, решта обчислюються на льоту. Фільтрація та пошук працюють по повному масиву в пам'яті — тільки рендер віртуальний.

Оптимізація завантаження

Ключ — кешування JSON на стороні клієнта та сервера. Ось кроки:

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

Чому Vue.js краще jQuery для інтерактивних таблиць?

Vue.js забезпечує реактивність без ручного оновлення DOM. У jQuery після кожного фільтра потрібно перебирати рядки та змінювати класи — на 2000 рядків це дає затримку 200-300 мс. Реактивні computed оновлюються за 1-5 мс. Таким чином, Vue.js оновлює DOM до 100 разів швидше, ніж jQuery.

Популярний фреймворк 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 тижні технічної підтримки та гарантія на код після запуску
• Навчання менеджерів роботі з інтерактивним прайсом

Зв'яжіться з нами для аудиту вашого каталогу — ми запропонуємо оптимальне рішення. Замовте розробку інтерактивного прайс-листа вже сьогодні! Отримайте консультацію: оцінимо ваш каталог, запропонуємо архітектуру та строки. Використовуємо віртуальний скрол для великих об'ємів даних. Згідно з документацією, теговане кешування підвищує швидкість завантаження.

Чому CIBlockElement::GetList вбиває UX — і до чого тут Vue

Стандартний компонент bitrix:catalog.section при кожному кліку по фільтру перезавантажує сторінку цілком. Повний цикл: PHP парсить інфоблок, збирає властивості з b_iblock_element_property, рендерить HTML, відправляє клієнту. На каталозі в 50 000 SKU це 800–1200 мс. Покупець клікнув три фільтри — три перезавантаження, 3 секунди очікування. В e-commerce це прямий шлях до втрати до 20% конверсії. Vue.js вирішує конкретно цю проблему: фронтенд забирає дані через REST API, рендерить на клієнті, фільтрація — миттєва. Бітрікс залишається бекендом: контент, каталог, замовлення, обмін з 1С. Наша команда впроваджує такий підхід понад 7 років і бачить стабільне прискорення завантаження в 3–5 разів. Офіційна документація Vue.js: «Vue дозволяє створювати реактивні користувацькі інтерфейси з мінімальними зусиллями».

Розробка на Vue.js для 1С-Бітрікс — спосіб перетворити важкий моноліт на чуйний інтерфейс. Ми застосовуємо його в проектах з каталогами від 10 000 SKU і гарантуємо час завантаження сторінки не більше 400 мс після впровадження. Сертифіковані розробники Бітрікс з досвідом 10+ років та понад 50 успішними впровадженнями забезпечують стабільну інтеграцію. Зв'яжіться з нами для консультації — оцінимо можливість прискорення безкоштовно.

Коли Vue виправданий?

Не кожному сайту потрібен фронтенд-фреймворк. Vue виправданий, коли стандартні компоненти Бітрікса не витягують. Основні сценарії:

• Каталоги з важкою фільтрацією — catalog.smart.filter з AJAX працює, але на складних комбінаціях SKU-властивостей гальмує. Vue + API = миттєвий відгук. У нашого клієнта каталог на 80 000 товарів після переходу на Vue став завантажуватися на 60% швидше.
• Особисті кабінети — повноцінні SPA з дашбордами, графіками, реактивними формами. sale.personal.section виглядає застарілим.
• Конфігуратори та калькулятори — візуальні редактори, підбирачі комплектації з перерахунком цін у реальному часі.
• Real-time — чати, сповіщення, оновлення залишків через WebSocket.
• PWA — офлайн-режим, push-сповіщення, встановлення на домашній екран.

Як Vue.js вирішує проблеми UX у Бітріксі?

Порівняння: стандартний компонент bitrix:catalog.section при фільтрації 50 000 товарів видає сторінку за 800 мс + перезавантаження. Vue-віджет на базі REST API рендерить той самий список за 200–300 мс без перезавантаження — в 3–4 рази швидше. У нашій практиці клієнт отримав збільшення середньої глибини перегляду на 35% після впровадження. Економія на серверній інфраструктурі сягає 70% завдяки зменшенню кількості PHP-запитів.

Три архітектурні підходи до інтеграції Vue.js з Бітрікс

Острівний — Vue-віджети на сторінках Бітрікс

Окремі Vue-компоненти монтуються в div#app-filter, div#app-cart на стандартних сторінках Бітрікса. Маршрутизація та серверний рендеринг — як і раніше Бітрікс. Мінімальне втручання в існуючий сайт. Підходить для поетапної модернізації. Типовий приклад — реактивний фільтр замість catalog.smart.filter. В одному з проектів ми замінили фільтр на Vue-віджет за 2 тижні, конверсія зросла на 18%.

SPA на Vue + Бітрікс REST API

Фронтенд — повноцінне Vue-додаток з Vue Router. Бітрікс віддає дані через REST API: штатний модуль rest або кастомні контролери D7. Адмінка Бітрікса — для керування контентом, редактор не помічає різниці. Ідеально для особистих кабінетів, B2B-порталів та внутрішніх додатків, де SEO не критичний.

Nuxt.js + Бітрікс як headless CMS

Nuxt забезпечує SSR/SSG для індексації. Бітрікс — headless: віддає дані через API, керує контентом. Для магазинів і контентних сайтів, де SEO — пріоритет. Ми використовуємо Nuxt 3 з Vue Router для гібридного рендерингу — каталог статично, корзина SSR. Економія на ліцензіях і серверах після впровадження становить десятки тисяч гривень на рік.

Які особливості REST API Бітрікс важливі для Vue-розробки?

Тут зосереджено 70% часу при інтеграції Vue + Бітрікс.

Штатний REST-модуль

Інфоблоки, каталог, корзина (sale.basket.*), замовлення (sale.order.*), користувачі — з коробки. Обмеження: штатні методи не завжди покривають кастомну логіку. Метод catalog.product.list не віддає обчислювані властивості — потрібен кастомний ендпоінт.

Кастомні контролери D7

Клас Bitrix\Main\Engine\Controller — правильний спосіб створення API для Vue. Автоматична валідація параметрів, CSRF-захист з коробки, типізовані відповіді. Не ajax.php з $_POST — це шлях до ін'єкцій.

namespace App\Controller;
use Bitrix\Main\Engine\Controller;

class CatalogController extends Controller
{
    public function getProductsAction(array $filter, int $page = 1): array
    {
        // ORM-запит до інфоблоку, не CIBlockElement::GetList
    }
}

Авторизація та кешування

Авторизація: OAuth 2.0 для SPA або сесійні токени. Rate limiting — через Bitrix\Main\Engine\Controller або nginx. Кешування: API-відповіді кешуються на рівні D7 з тегованою інвалідацією. Змінився товар в інфоблоці — кеш скинувся по тегу iblock_id_X. Без цього при 100 RPS сервер ляже. Ми налаштовуємо це в кожному проекті — гарантія стабільності під навантаженням. Приклад налаштування тегованого кешування:

use Bitrix\Main\Data\Cache;

$cache = Cache::createInstance();
$tag = 'iblock_id_' . $iblockId;
if ($cache->initCache(3600, md5($filter), $tag)) {
    return $cache->getVars();
}
// запит до БД
$cache->startDataCache();
$cache->endDataCache($data);
\CIBlock::registerWithTagCache($iblockId);

Якою має бути структура Vue-додатку для Бітрікса?

• Vue Router — lazy loading маршрутів через defineAsyncComponent. Каталог не тягне за собою код особистого кабінету.
• Pinia — стейт-менеджмент: каталог, корзина, користувач, фільтри. Модульна архітектура сховища. Vuex — легасі, нові проекти на Pinia.
• Axios з перехоплювачами: автоматичне оновлення CSRF-токена, retry при 503, обробка помилок авторизації.
• Vue Query (TanStack Query) — кешування API-запитів, автоматична ревалідація, оптимістичні оновлення. Користувач додав товар у корзину — UI оновився миттєво, запит до API пішов фоном.

Каталог на Vue — розбір ключового кейсу

Різниця в UX відчувається одразу. Конкретика:

• Фільтр — чекбокси, range-слайдери, select з пошуком. Стан синхронізується з URL через vue-router query params — посилання з фільтрами можна відправити колезі.
• Картка товару — галерея з зумом, перемикання SKU (колір/розмір), ціна перераховується через API catalog.product.offer.list, залишки по складах з catalog.store.product.list.
• Віртуальний скролінг — vue-virtual-scroller рендерить лише видимі елементи. Каталог у 10 000 товарів працює без гальм.
• Розумний пошук — debounced-запити до search.title.search або ElasticSearch, автодоповнення через випадаючий список. У нашому проекті це скоротило час пошуку на 40%.
• Порівняння — динамічна таблиця характеристик з підсвічуванням відмінностей. Зберігання в Pinia + localStorage для персистентності.

Процес впровадження Vue.js покроково:

1. Аудит поточної архітектури Бітрікса та виявлення вузьких місць (фільтрація, корзина, особистий кабінет).
2. Проектування API — визначаємо ендпоінти, моделі даних, використовуємо Bitrix\Main\Engine\Controller.
3. Розробка Vue-віджетів або SPA — збірка на Vite, Code Splitting, Pinia.
4. Інтеграція з Бітріксом — теговане кешування, OAuth, обробка помилок.
5. Тестування під навантаженням (до 100 RPS) та деплой з CI/CD.

Продуктивність досягається за рахунок code splitting, tree shaking та lazy loading важких компонентів (Chart.js, карти, WYSIWYG). Бандл сторінки каталогу — 80–120 КБ gzip.

Nuxt.js і SEO: як зберегти індексацію

SPA на чистому Vue віддає пошуковику порожній HTML з <div id="app"></div>. Google вміє рендерити JS, але з затримкою в дні. Яндекс — взагалі непередбачувано. Nuxt.js вирішує:

• SSR — сервер віддає повний HTML, після гідратації працює як SPA.
• SSG — сторінки генеруються при nuxt generate, роздаються з CDN. Максимальна швидкість.
• Гібридний режим — каталог статично, корзина та ЛК — SSR.
• useHead() — динамічні title, description, Open Graph, Schema.org для кожної сторінки.
• Sitemap — @nuxtjs/sitemap, маршрути з API Бітрікса. Це забезпечує повну індексацію — наша гарантія потрапляння в топ-5 Google.

Порівняння підходів та строки

Повний цикл: проектування API, розробка контролерів D7, Vue-додаток, налаштування Vite, тестування, деплой. Код рев'юється, покривається тестами, документується — не «зібрав і забув». Вартість розробки розраховується індивідуально після аналізу вашого поточного сайту та ТЗ. Детальну оцінку ви отримаєте протягом дня — замовте консультацію.

Типові помилки при інтеграції Vue.js і Бітрікс

1. Використання ajax.php замість Bitrix\Main\Engine\Controller — призводить до вразливостей та нестабільності.
2. Відсутність тегованого кешування API — при високому навантаженні сервер не витримує.
3. Ігнорування авторизації OAuth для SPA — сесійні токени можуть закінчуватися, ламаючи UX.
4. Повний перепис всього сайту на SPA без необхідності — збільшує строки та бюджет.
5. Неправильне налаштування Nuxt SSR — повільна генерація сторінок на бекенді.

Що входить у роботу та наші гарантії

• Документація API (Swagger/OpenAPI) для інтеграції з вашим бекендом.
• Доступи до репозиторію з кодом та CI/CD.
• Навчання вашої команди роботі з Vue-компонентами.
• Пост-релізна підтримка на 1 місяць — гарантія стабільності.
• Код відповідає стандартам PSR-12 та Bitrix\Main\Engine\Controller.

Замовте розробку Vue.js інтерфейсів для вашого Бітрікс-проекту — отримайте консультацію та оцінку строків протягом дня. Напишіть нам, і ми надішлемо комерційну пропозицію з детальним планом робіт. Оцінимо проект безкоштовно — просто надішліть ТЗ або посилання на поточний сайт.