Ми часто зустрічаємо проекти, де стандартний компонент bitrix:catalog.section перестає справлятися з навантаженням: динамічна фільтрація по 20+ параметрах, нескінченна прокрутка, миттєве перемикання між сіткою та списком. Серверний рендеринг кожного запиту призводить до гальмування 3–6 секунд. Типовий сценарій: інтернет-магазин із 50 000 товарів, де кожен клік по фільтру викликає перезавантаження сторінки. Користувач чекає 5 секунд — і йде. Ми переписали фронтенд на Vue.js: фільтрація стала миттєвою, сервер розвантажено на 40%, а SEO не постраждало — перший екран рендериться на стороні Бітрікс. Vue-каталог вирішує ці проблеми за рахунок клієнтської реактивності при збереженні серверного рендерингу для SEO — гібридний підхід, який дає швидкість SPA та індексацію статичного HTML. Зв'яжіться з нами, щоб отримати оцінку вашого проекту.
Які проблеми вирішує Vue-каталог у Бітріксі?
- Медленна фільтрація: кожен AJAX-запит на сервер перемальовує весь розділ. Vue.js обробляє фільтрацію на клієнті, відправляючи лише дані через API. Debounce 300 мс і optimistic UI скелетони роблять відгук миттєвим.
- SEO-ризики SPA: повністю клієнтський рендеринг гірше індексується. Гібридний підхід віддає перший екран сервером (HTML з товарами), а Vue.js гідратується після — пошуковики бачать контент, користувачі — швидкість.
- Високе навантаження на сервер: при частих запитах (пагінація, сортування) сервер перезбирає компоненти. Vue-каталог розвантажує сервер: після першого завантаження вся логіка на клієнті, API тільки віддає JSON. Зниження навантаження на БД досягає 50%.
Як ми впроваджуємо Vue.js у каталог Бітрікс: практичний кейс
Стек: PHP 8.1, Бітрікс (D7 ORM, інфоблоки v2.0), Vue 3 + Pinia, MySQL 8.0. Для інтеграції пишемо кастомний контролер API на Bitrix\Main\Engine\Controller, який повертає товари, фасети та пагінацію через єдиний endpoint. Приклад контролера:
// local/components/vendor/catalog.api/ajax.php use Bitrix\Main\Engine\Controller; use Bitrix\Iblock\Elements\ElementProductTable; class CatalogController extends Controller { public function getProductsAction(array $filter = [], int $page = 1, int $pageSize = 24): array { $offset = ($page - 1) * $pageSize; // Отримання через D7 ORM ElementProductTable // Повернення JSON: items, pagination, facets } } Endpoint: /bitrix/services/main/ajax.php?action=catalog.getProducts. На фронті Vue-компоненти:
-
CatalogApp.vue— кореневий компонент, керує станом через Pinia store. -
ProductGrid.vue/ProductList.vue— режими відображення з перемиканням без перезавантаження. -
ProductCard.vue— картка зі швидким переглядом у модалці. -
Pagination.vue/InfiniteScroll.vue— навігація. -
SortBar.vue— сортування за ціною, популярністю, новизною. -
FilterPanel.vue— фасетний фільтр з множинним вибором та діапазонами.
Докладніше про фреймворк читайте в документації Vue.js.
Чому гібридний рендеринг критичний для SEO?
Пошукові системи (Яндекс, Google) повинні бачити повний HTML товарів при першому запиті. Vue.js без серверного рендерингу видає пустий #app, що призводить до втрати трафіку. Ми використовуємо серверний рендеринг першого екрану: в шаблоні компонента Бітрікс виводимо товари звичайним циклом, а потім передаємо їх Vue через data-attribute:
// В шаблоні компонента $initialProducts = json_encode($arResult['ITEMS']); echo '<div id="catalog-app" data-initial-products="' . htmlspecialchars($initialProducts) . '" data-iblock-id="' . $arResult['IBLOCK_ID'] . '" ></div>'; Vue читає data-initial-products при монтуванні та рендерить сітку без AJAX. Усі наступні запити — тільки API. Такий підхід дає швидкість Vue та індексацію статичного HTML. На практиці це збільшило видимість каталогу на 70% для одного з клієнтів (будівельний магазин). Офіційна документація Бітрікс D7 ORM підтверджує ефективність такого підходу.
Скільки часу займає розробка Vue-каталогу?
| Складність | Термін |
|---|---|
| Базовий каталог (сітка, список, пагінація) | від 5 до 8 робочих днів |
| З фасетним фільтром і швидким переглядом | від 10 до 15 робочих днів |
| З нескінченною прокруткою і SEO-гібридом | від 15 до 20 робочих днів |
Вартість розраховується індивідуально під ваш проект. Зв'яжіться з нами для попередньої оцінки — ми запропонуємо оптимальне рішення.
Робота з цінами та залишками в реальному часі
Ціни в Бітрікс зберігаються в b_catalog_price за типами цін. Залишки — в b_catalog_store_product. Для актуальної наявності на момент перегляду додаємо швидкий endpoint, який не блокує початкове завантаження:
// Запит наявності для масиву товарів async function getAvailability(productIds) { return await api.post('/catalog/availability', { ids: productIds }); } Викликаємо після рендерингу карток — користувач бачить ціни одразу, а бейджі "в наявності" оновлюються через секунду. На сервері використовуємо кешування теговане для скидання при зміні залишків.
Випадок з практики
Інтернет-магазин будівельних матеріалів: каталог з 80 000 позицій, фільтрація по 20+ параметрах (бренд, серія, розмір, колір, матеріал). Стандартний AJAX-фільтр Бітрікс при кожній зміні робив запит на 3–6 секунд (повний серверний рендеринг розділу). Ми впровадили Vue-каталог з debounced-запитами (300 мс) і optimistic UI (показуємо скелетон одразу) — суб'єктивний час відгуку знизився до <300 мс. Перше завантаження сторінки розділу — серверний рендеринг Бітрікс для коректної індексації. Результат: конверсія зросла на 25% за рахунок зручності фільтрації. Готові обговорити ваш проект? Просто зв'яжіться з нами.
Таблиця порівняння: стандартний підхід vs Vue-каталог
| Параметр | Стандартний bitrix:catalog.section |
Vue-каталог з гібридним рендерингом |
|---|---|---|
| Швидкість фільтрації | 3–6 секунд (повне перезавантаження) | <300 мс (debounce + optimistic) |
| SEO-індексація | Відмінно (серверний HTML) | Відмінно (серверний перший екран) |
| Навантаження на сервер | Високе (кожен запит — рендеринг) | Низьке (тільки JSON API) |
| UX | Стандартний, без анімацій | Плавні переходи, скелетони |
| Розробка | Швидка (вбудований компонент) | Потребує інтеграції (наші спеціалісти) |
Типові помилки
- Відсутність гідратації: Vue-каталог завантажується пустим, поки не виконається AJAX — користувачі бачать білий екран. Рішення: передавати початкові дані через
data-*атрибути. - Завеликі API-відповіді: при 80 000 товарах фільтр повертає всі позиції. Потрібна пагінація (24 шт.) і фасетна агрегація на сервері.
- Ігнорування кешування: без тегованого кеша кожен запит б'є в базу. Використовуйте
CIBlockCacheабо D7 cache з тегамиiblock_id_XXX. - Некоректна обробка залишків: для реального часу краще окремий endpoint, що не навантажує основну видачу.
Що входить у роботу
- Вихідний код кастомного API-контролера для Бітрікса.
- Vue-компоненти: сітка, список, картка, фільтр, пагінація, сортування.
- Гібридний рендеринг першого екрану (серверний HTML + гідратація).
- Інтеграція з цінами та залишками (реальний час accessibility).
- Документація по API та компонентах.
- Налаштування кешування та SEO-мета-тегів.
- Тестовий стенд і навчання ваших розробників.
- Підтримка 30 днів після запуску.
Замовте розробку Vue-каталогу — і ваші клієнти перестануть чекати. Отримайте консультацію щодо впровадження — зв'яжіться з нами для оцінки вашого проекту.