Розробка фільтру товарів на 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 мс залежно від складності запиту.

Терміни виконання