Разработка фильтра товаров на Vue.js для 1С-Битрикс

Разработка фильтра товаров на Vue.js для 1С-Битрикс

Стандартный AJAX-фильтр Битрикс (bitrix:catalog.smart.filter) работает на переформировании URL и полном серверном рендеринге раздела. При 30+ фильтруемых свойствах и большом каталоге каждое изменение — ощутимая пауза. Vue-фильтр даёт мгновенный UI и умный debouncing запросов к серверу.

Источники данных для фасетного фильтра

Битрикс хранит фасеты в таблицах b_catalog_facet_index* — именно их использует умный фильтр. Для Vue-фильтра используем тот же механизм через D7:

use Bitrix\Catalog\v2\Facade\Catalog;

// Получение фасетных данных через API смарт-фильтра
$filterFacets = \CCatalogSmartFilter::GetFacets($iblockId, $currentFilter);

Это быстрее, чем самостоятельный подсчёт через GetList, потому что индекс b_catalog_facet_index_* уже рассчитан.

Архитектура состояния фильтра

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
        }
    }
});

Типы виджетов фильтра

• Чекбоксы — для свойств типа «список» (цвет, бренд, материал)
• Диапазон цен — слайдер с двумя ползунками, input type="range" или кастомный компонент
• Радиокнопки — для взаимоисключающих значений (состояние: новый/б/у)
• Дерево категорий — рекурсивный компонент для древовидных разделов
• Поиск внутри фильтра — для длинных списков брендов (100+ значений)

URL-синхронизация

Фильтр должен синхронизировать состояние с URL — для возможности поделиться ссылкой и для корректного поведения кнопки «Назад»:

import { useRoute, useRouter } from 'vue-router';

// При изменении фильтра:
router.push({ query: buildQueryFromFilter(filterStore.selectedValues) });

// При инициализации:
filterStore.initFromQuery(route.query);

Случай из практики

Маркетплейс одежды: фильтр по размеру, цвету (50+ цветов), бренду (200+ брендов), материалу, цене. Стандартный умный фильтр Битрикс генерировал URL вида ?arrFILTER_SIZE[]=S&arrFILTER_SIZE[]=M&... длиной 500+ символов и перезагружал страницу целиком. Vue-фильтр с URL-сериализацией через сокращённые ключи и debounce 400 мс: изменение не вызывает перезагрузки, фасеты обновляются асинхронно, чекбоксы доступные для выбора не серятся с 0 совпадений. Время реакции — 200–600 мс в зависимости от сложности запроса.

Сроки выполнения