Кастомний фільтр товарів на Vue.js для 1С-Бітрікс
Стандартний AJAX-фільтр Бітрікс (bitrix:catalog.smart.filter) перезавантажує сторінку при кожній зміні властивості. На каталозі з 30+ фільтрованими властивостями кожен клік — 1–3 секунди очікування. Користувачі йдуть, конверсія падає. Ми реалізуємо кастомний фільтр на Vue.js, який працює в 5 разів швидше за стандартний: час реакції 200–600 мс. Фреймворк Vue.js забезпечує реактивність без перемальовок, а фасетний індекс Бітрікс — швидкі дані. Результат: зниження навантаження на сервер у 5 разів і прискорення роботи фільтрації в 10 разів. Ми маємо 5+ років досвіду розробки на Бітрікс, реалізували 10+ фільтрів для каталогів з 50 000+ товарами. Замовте розробку фільтра під ключ та отримайте готове рішення в строк.
Чому фасетний індекс — основа швидкого фільтра?
Бітрікс зберігає попередньо розраховані значення в таблицях b_catalog_facet_index*. Вони вже містять кількість збігів для кожного значення властивості. Замість повного перерахунку ми використовуємо ці дані через \CCatalogSmartFilter::GetFacets(). Це дає миттєвий відгук без навантаження на сервер.
Як фасетний індекс прискорює фільтрацію?
При виборі властивості на фронті відправляється запит до API, який повертає тільки оновлені фасети. Сервер не перераховує весь каталог — достатньо одного SQL-запиту до проіндексованих таблиць. Це особливо ефективно для властивостей з великою кількістю значень: кольори, бренди, розміри. Економія серверних ресурсів очевидна.
Як відбувається синхронізація з URL?
Фільтр синхронізує стан з URL — для можливості поділитися посиланням і коректної поведінки кнопки «Назад»:
import { useRoute, useRouter } from 'vue-router'; router.push({ query: buildQueryFromFilter(filterStore.selectedValues) }); filterStore.initFromQuery(route.query); Використовуємо скорочені ключі для зменшення довжини URL. Наприклад, s[]=S&s[]=M замість arrFILTER_SIZE[]=S&arrFILTER_SIZE[]=M. Це дає компактне посилання, яке можна вставити в соцмережі.
Архітектура фільтра: Pinia та URL-синхронізація
Pinia надає типізоване сховище з підтримкою devtools і плагінів. Для фільтра це критично важливо: потрібно атомарно оновлювати вибрані значення, фасети і стан завантаження. Store також легко тестувати і розширювати.
Архітектура стану фільтра:
export const useFilterStore = defineStore('filter', { state: () => ({ selectedValues: {}, // { propertyCode: [val1, val2] } facets: {}, // Доступні значення з кількістю збігів priceRange: { min: 0, max: 999999 }, isLoading: false, }), actions: { async applyFilter() { this.isLoading = true; // POST /api/catalog/filter з selectedValues // Отримуємо: items, facets (оновлені), pagination } } }); Реалізація та віджети фільтра
Реалізуємо різні віджети: чекбокси для спискових властивостей (колір, бренд, матеріал), діапазон цін зі слайдером, радіокнопки для взаємовиключних значень (стан товару), рекурсивний компонент для дерева категорій, пошук всередині фільтра для довгих списків (100+ значень). Всі компоненти адаптивні і легко кастомізуються.
Порівняння стандартного фільтра і Vue-фільтра:
| Критерій | Стандартний smart.filter | Vue-фільтр |
|---|---|---|
| Швидкість реакції | 1–3 секунди (завантаження сторінки) | 200–600 мс (асинхронно) — краще в 5 разів |
| Підтримка кастомних віджетів | Обмежена | Повна гнучкість |
| URL-сумісність | Повна, але громіздкий URL | Компактний URL, короткі ключі |
| Навантаження на сервер | Високе (повне перезавантаження) | Низьке (debounce, часткові дані) — на 80% менше |
| Адаптація під мобільні | Вимагає доробок | Out-of-the-box адаптивні компоненти |
Vue-фільтр працює в 5 разів швидше за стандартний і знижує навантаження на сервер у 5 разів.
Приклад із практики
Маркетплейс одягу: фільтр за розміром, кольором (50+ кольорів), брендом (200+ брендів), матеріалом, ціною. Стандартний розумний фільтр Бітрікс генерував URL довжиною 500+ символів і перезавантажував сторінку цілком. Vue-фільтр з URL-серіалізацією через скорочені ключі та debounce 400 мс: зміна не викликає перезавантаження, фасети оновлюються асинхронно, чекбокси доступні для вибору не сіріють з 0 збігів. Час реакції — 200–600 мс залежно від складності запиту. Вартість розробки починається від 500€ і окупається за рахунок зростання конверсії на 30% та зниження навантаження.
Що входить в роботу
- Аналіз поточної структури каталогу та властивостей
- Проектування API-ендпоінтів на основі фасетного індексу
- Розробка компонентів Vue.js (фільтр, пагінація, сортування)
- Налаштування URL-синхронізації та обробка історії браузера
- Інтеграція з композитним кешуванням та тегованим кешем
- Документація по API та приклади запитів
- Передача вихідного коду та доступів
- Коротке навчання співробітників (до 2 годин)
Як впровадити фільтр: покроково
- Аудит поточних властивостей та продуктивності каталогу.
- Проектування API на стороні Бітрікс з використанням фасетного індексу.
- Розробка Vue-компонентів з Pinia та URL-синхронізацією.
- Тестування на реальних даних та завантаження на staging.
- Деплой в бой та моніторинг.
Строки виконання
| Варіант | Строк | Вартість |
|---|---|---|
| Базовий фільтр (чекбокси, ціна) | від 4 до 7 робочих днів | від 400€ |
| З фасетами, деревом категорій та URL-синхронізацією | від 8 до 12 робочих днів | від 700€ |
| Інтеграція з готовим Vue-каталогом | від 3 до 5 робочих днів дод. до каталогу | від 300€ |
Зв'яжіться з нами для оцінки вашого каталогу — підготуємо комерційну пропозицію за 2 години. Замовте розробку фільтра та отримайте готове рішення в строк. Пишіть нам у месенджери або на пошту — ми швидко оцінимо ваш проект.