Кастомный фильтр товаров на Vue.js для 1С-Битрикс
Стандартный AJAX-фильтр Битрикс (bitrix:catalog.smart.filter) перезагружает страницу при каждом изменении свойства. На каталоге с 30+ фильтруемыми свойствами каждый клик — 1–3 секунды ожидания. Пользователи уходят, конверсия падает. Мы реализуем кастомный фильтр на Vue.js, который работает в 5 раз быстрее стандартного: время реакции 200–600 мс. Фреймворк Vue.js обеспечивает реактивность без перерисовок, а фасетный индекс Битрикс — быстрые данные. Результат: снижение нагрузки на сервер в 5 раз и ускорение работы фильтрации в 10 раз. Закажите разработку фильтра и получите готовое решение в срок.
Почему фасетный индекс — основа быстрого фильтра?
Битрикс хранит предварительно рассчитанные значения в таблицах 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 — лучший выбор для управления состоянием?
Pinia предоставляет типизированное хранилище с поддержкой devtools и плагинов. Для фильтра это критически важно: нужно атомарно обновлять выбранные значения, фасеты и состояние загрузки. Store также легко тестировать и расширять.
Архитектура состояния фильтра
Pinia 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 мс (асинхронно) |
| Поддержка кастомных виджетов | Ограничена | Полная гибкость |
| URL-совместимость | Полная, но громоздкий URL | Компактный URL, короткие ключи |
| Нагрузка на сервер | Высокая (полная перезагрузка) | Низкая (debounce, частичные данные) |
| Адаптация под мобильные | Требует доработок | Out-of-the-box адаптивные компоненты |
Vue-фильтр работает в 5 раз быстрее стандартного и снижает нагрузку на сервер в 5 раз.
Пример из практики
Маркетплейс одежды: фильтр по размеру, цвету (50+ цветов), бренду (200+ брендов), материалу, цене. Стандартный умный фильтр Битрикс генерировал URL длиной 500+ символов и перезагружал страницу целиком. Vue-фильтр с URL-сериализацией через сокращённые ключи и debounce 400 мс: изменение не вызывает перезагрузки, фасеты обновляются асинхронно, чекбоксы доступные для выбора не серятся с 0 совпадений. Время реакции — 200–600 мс в зависимости от сложности запроса. Стоимость разработки окупается за счёт роста конверсии и снижения нагрузки.
Что входит в работу
- Анализ текущей структуры каталога и свойств
- Проектирование API-эндпоинтов на основе фасетного индекса
- Разработка компонентов Vue.js (фильтр, пагинация, сортировка)
- Настройка URL-синхронизации и обработка истории браузера
- Интеграция с композитным кэшированием и тегированным кэшем
- Документация по API и примеры запросов
- Передача исходного кода и доступов
- Краткое обучение сотрудников (до 2 часов)
Как внедрить фильтр: пошагово
- Аудит текущих свойств и производительности каталога.
- Проектирование API на стороне Битрикс с использованием фасетного индекса.
- Разработка Vue-компонентов с Pinia и URL-синхронизацией.
- Тестирование на реальных данных и загрузка на staging.
- Деплой в бой и мониторинг.
Сроки выполнения
| Вариант | Срок |
|---|---|
| Базовый фильтр (чекбоксы, цена) | от 4 до 7 рабочих дней |
| С фасетами, деревом категорий и URL-синхронизацией | от 8 до 12 рабочих дней |
| Интеграция с готовым Vue-каталогом | от 3 до 5 рабочих дней доп. к каталогу |
Свяжитесь с нами для оценки вашего каталога — подготовим коммерческое предложение. Закажите разработку фильтра и получите готовое решение в срок.