useFacet

Features

useFacet composition function can be used to fetch data related to:

• products,
• categories,
• breadcrumbs.

API

• search - function for searching and classifying records, allowing users to browse the catalog data. It accepts a single object as a parameter with following signature:

search(params?: FacetSearchResult<FacetResult>): Promise<void>;

---

• result - reactive data object containing the response from the backend.

• loading - reactive object containing information about the loading state of search.

• error - reactive object containing the error message, if search failed for any reason.

interface UseFacetErrors {
  search: Error;
}

Getters

Because the result property is a raw response with some additional properties, it's recommended to use facetGetters for accessing any data from it. It includes the following helper functions:

• getAll - returns all available facets.

• getGrouped - returns grouped facets by facet name.

• getCategoryTree - return the tree of nested categories.

• getSortOptions - returns available and currently selected sorting options.

• getProducts - returns products matching current filters.

• getPagination - returns pagination information.

• getBreadcrumbs - returns breadcrumbs information.

interface FacetsGetters {
  getAll: (
    searchData: FacetSearchResult<FacetResult>,
    criteria?: string[],
  ) => AgnosticFacet[];
  getGrouped: (
    searchData: FacetSearchResult<FacetResult>,
    criteria?: string[],
  ) => AgnosticGroupedFacet[];
  getCategoryTree: (
    searchData: FacetSearchResult<FacetResult>,
  ) => AgnosticCategoryTree;
  getSortOptions: (searchData: FacetSearchResult<FacetResult>) => AgnosticSort;
  getProducts: (searchData: FacetSearchResult<FacetResult>) => Product[];
  getPagination: (
    searchData: FacetSearchResult<FacetResult>,
  ) => AgnosticPagination;
  getBreadcrumbs: (
    searchData: FacetSearchResult<FacetResult>,
  ) => AgnosticBreadcrumb[];
}

interface FacetSearchResult<S> {
  data: S;
  input: AgnosticFacetSearchParams;
}

type FacetResult = {
  total: number;
  products: Product[];
  categoryTree: AgnosticCategoryTree;
  pagination: Pagination;
  rangeFacets: RangeFacetItem[];
  sort: Sort;
  valueFacets: ValueFacetItem[];
};

interface AgnosticFacet {
  type: string;
  id: string;
  value: any;
  attrName?: string;
  count?: number;
  selected?: boolean;
  metadata?: any;
}

interface AgnosticGroupedFacet {
  id: string;
  label: string;
  count?: number;
  options: AgnosticFacet[];
}

interface AgnosticCategoryTree {
  label: string;
  slug?: string;
  items: AgnosticCategoryTree[];
  isCurrent: boolean;
  count?: number;
  [x: string]: unknown;
}

interface AgnosticSort {
  options: AgnosticFacet[];
  selected: string;
}

interface AgnosticFacetSearchParams {
  categorySlug?: string;
  rootCatSlug?: string;
  term?: string;
  page?: number;
  itemsPerPage?: number;
  sort?: string;
  filters?: Record<string, string[]>;
  metadata?: any;
  [x: string]: any;
}

interface AgnosticPagination {
  currentPage: number;
  totalPages: number;
  totalItems: number;
  itemsPerPage: number;
  pageOptions: number[];
}

interface AgnosticBreadcrumb {
  text: string;
  link: string;
}

interface Product extends ProductVariant {
  type: string;
  stock?: number;
  images?: ProductImages[];
  price?: number;
  prices?: ProductPrice[];
  reviews?: ProductReview[];
  labels?: ProductLabel[];
  categoryNodes?: Category[];
  concreteProducts?: Product[];
}

Example

import { useFacet, facetGetters } from '@spryker-vsf/composables';

setup(props, context) {
  const { result, search, loading } = useFacet();

  onSSR(async () => {
    await search({
      categorySlug: 'clothing',
      sort: 'latest',
      itemsPerPage: 10,
      term: 'some search query'
    });
  });

  return {
    products: computed(() => facetGetters.getProducts(result.value)),
    categoryTree: computed(() => facetGetters.getCategoryTree(result.value)),
    breadcrumbs: computed(() => facetGetters.getBreadcrumbs(result.value)),
    sortBy: computed(() => facetGetters.getSortOptions(result.value)),
    facets: computed(() => facetGetters.getGrouped(result.value, ['color', 'size'])),
    pagination: computed(() => facetGetters.getPagination(result.value)),
    loading
  }
}