Фасетний пошук: реалізація фільтрів та агрегацій

POST /products/_search { "query": { "bool": { "filter": [ { "term": { "category": "laptops" } }, { "range": { "price": { "gte": 50000, "lte": 150000 } } } ] } }, "aggs": { "brands": { "terms": { "field": "brand.keyword", "size": 20, "min_doc_count": 1 } }, "price_ranges": { "range": { "field": "price", "ranges": [ { "key": "budget", "to": 50000 }, { "key": "mid", "from": 50000, "to": 100000 }, { "key": "premium", "from": 100000 } ] } }, "rating": { "terms": { "field": "rating", "size": 5 } }, "has_stock": { "filter": { "term": { "in_stock": true } }, "aggs": { "count": { "value_count": { "field": "id" } } } } }, "size": 20, "from": 0 } 

Особливість фасетного пошуку: при виборі фільтра за брендом лічильники у фасеті «бренд» мають показувати результати без урахування цього фільтра (інакше інші бренди покажуть 0). Це вирішується через post_filter у поєднанні з global агрегаціями. Детальніше в документації Elasticsearch.

Typesense. Для проєктів де Elasticsearch надлишковий, Typesense дає відчутні переваги: налаштування — один бінарник, API інтуїтивно зрозумілий. Приклад пошуку з фасетами на TypeScript:

import Typesense from 'typesense'; const client = new Typesense.Client({ nodes: [{ host: 'localhost', port: 8108, protocol: 'http' }], apiKey: 'xyz', connectionTimeoutSeconds: 2, }); const results = await client.collections('products').documents().search({ q: query || '*', query_by: 'name,description', filter_by: buildTypesenseFilter(state), facet_by: 'brand,category,rating', max_facet_values: 20, page: state.page, per_page: 20, sort_by: sortMap[state.sort], }); function buildTypesenseFilter(state: FacetState): string { const filters: string[] = []; if (state.brand?.length) filters.push(`brand:=[${state.brand.join(',')}]`); if (state.price) filters.push(`price:>=${state.price.min} && price:<=${state.price.max}`); if (state.rating?.length) filters.push(`rating:=[${state.rating.join(',')}]`); if (state.inStock) filters.push('in_stock:=true'); return filters.join(' && '); } 

Typesense автоматично оновлює лічильники при виборі фільтра, без post_filter. Для складних каталогів це скорочує час розробки.

React-компоненти фасетів

Хук useFacetSearch керує станом фільтрів, синхронізуючи його з URL. Компонент CheckboxFacet відмальовує чекбокси з лічильниками та підтримкою «показати ще» для довгих списків. Приклад реалізації:

import { useCallback, useMemo, useTransition } from 'react'; import { useRouter, useSearchParams } from 'next/navigation'; import { useDebouncedCallback } from 'use-debounce'; export function useFacetSearch() { const router = useRouter(); const searchParams = useSearchParams(); const [isPending, startTransition] = useTransition(); const state = useMemo( () => parseFacetState(searchParams), [searchParams] ); const updateFilter = useCallback( (updates: Partial<FacetState>) => { const newState = { ...state, ...updates, page: 1 }; const params = serializeFacetState(newState); startTransition(() => { router.push(`?${params.toString()}`, { scroll: false }); }); }, [state, router] ); const debouncedPriceUpdate = useDebouncedCallback( (min: number, max: number) => updateFilter({ price: { min, max } }), 400 ); return { state, updateFilter, debouncedPriceUpdate, isPending }; } type FacetOption = { value: string; label: string; count: number; }; interface CheckboxFacetProps { title: string; options: FacetOption[]; selected: string[]; onChange: (values: string[]) => void; showMore?: boolean; } export function CheckboxFacet({ title, options, selected, onChange, showMore = false, }: CheckboxFacetProps) { const [expanded, setExpanded] = useState(false); const visible = expanded || !showMore ? options : options.slice(0, 5); const toggle = (value: string) => { const next = selected.includes(value) ? selected.filter((v) => v !== value) : [...selected, value]; onChange(next); }; return ( <div className="facet"> <h3 className="facet__title">{title}</h3> <ul className="facet__options"> {visible.map((opt) => ( <li key={opt.value}> <label className={opt.count === 0 ? 'facet__option--disabled' : ''}> <input type="checkbox" checked={selected.includes(opt.value)} onChange={() => toggle(opt.value)} disabled={opt.count === 0} /> <span>{opt.label}</span> <span className="facet__count">{opt.count}</span> </label> </li> ))} </ul> {showMore && options.length > 5 && ( <button onClick={() => setExpanded(!expanded)}> {expanded ? 'Сховати' : `Показати ще ${options.length - 5}`} </button> )} </div> ); } 

SEO для фасетного пошуку

Фасетні URL з фільтрами створюють дубльований контент. Стратегія:

• Індексувати сторінки категорій без фільтрів і найпопулярніші комбінації (бренд + категорія).
• noindex на сторінки з ціновими фільтрами, сортуванням, множинними фільтрами.
• canonical на базову сторінку категорії.
• rel="nofollow" на посилання пагінації глибше 3-ї сторінки.

// В Next.js App Router export async function generateMetadata({ searchParams }) { const state = parseFacetState(new URLSearchParams(searchParams)); const hasComplexFilters = (state.brand?.length ?? 0) > 1 || state.price || state.page > 1; return { robots: hasComplexFilters ? 'noindex,follow' : 'index,follow', }; } 

Що входить в роботу

Строки реалізації

Ми впровадили фасетний пошук у 15+ e-commerce проєктах. Досвід підтверджують десятки успішних запусків. Отримайте консультацію — оцінимо ваш каталог і запропонуємо оптимальне рішення. Замовте реалізацію фасетного пошуку вже сьогодні.