Vue Storefront is now Alokai! Learn More
Facet normalizer

Facet normalizer

Concept of facets exists in both Unified Data Layer world and Commercetools. The normalizeFacet function maps Commercetools FacetResultValue into Unified SfFacet.

Parametersri:link

NameTypeDefault valueDescription
contextNormalizeFacetContextContext which contains getFacetType
facetResultValueFacetResultValueCommercetools Facet

Extendingri:link

The SfFacet is returned from SearchProducts Method. If the SfFacet structure doesn't contain the information you need for your Storefront, you can extend its logic using the addCustomFields API.

Sourceri:link

facet.ts
import type { FacetResultValue } from "@vsf-enterprise/commercetools-types";
import type { GetFacetTypeFn } from "@vue-storefront/unified-data-model";
import { SfFacetTypes } from "@vue-storefront/unified-data-model";
import { defineNormalizer } from "../defineNormalizer";

const defaultGetFacetType: GetFacetTypeFn<FacetResultValue> = () => SfFacetTypes.MULTI_SELECT;

export const normalizeFacet = defineNormalizer.normalizeFacet((context, facetResultValue) => {
  const { facet, value } = facetResultValue;
  const { getFacetType = defaultGetFacetType } = context;

  const sfFacetItems =
    value.terms?.map((term) => ({
      label: term.term,
      value: term.term,
      productCount: term.productCount,
    })) || [];

  if (sfFacetItems.length === 0) {
    return null;
  }

  return {
    label: facet,
    name: facet,
    values: sfFacetItems,
    type: getFacetType(facetResultValue),
  };
});