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

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 проєктах. Досвід підтверджують десятки успішних запусків. Отримайте консультацію — оцінимо ваш каталог і запропонуємо оптимальне рішення. Замовте реалізацію фасетного пошуку вже сьогодні.