Vue Storefront is now Alokai! Learn More
Category normalizer

Category normalizer

The normalizeCategory function is used to map a SAP CategoryHierarchy or Category into the unified SfCategory data model.


NameTypeDefault valueDescription
contextNormalizerContextcontext needed for the normalizer.
categoryCategoryHierarchy or CategorySAP Category


The SfCategory model is returned from the Unified Methods such as SearchProducts, and GetCategories. If the SfCategory structure doesn't contain the information you need for your Storefront, you can extend its logic using the addCustomFields API. The following example demonstrates how to extend SfCategory with an url field.

export const unifiedApiExtension = createUnifiedExtension({
  normalizers: {
    addCustomFields: [
        normalizeCategory: (context, category) => ({
          url: category.url,
  config: {


CategoryHiearchy is returned from API Client's the getCatalogVersion and Category from the getProduct.

import { maybe, slugify } from "@shared/utils";
import type { SfCategory } from "@vue-storefront/unified-data-model";
import { defineNormalizer } from "../defineNormalizer";
import type {
} from "../types";

export const normalizeCategory = defineNormalizer.normalizeCategory((context, category) => {
  if ("code" in category) {
    return handleCategory(category);
  return handleCategoryHierarchy(context, category);

export function getCategorySlug(category: CategoryHierarchyWithParentId): string {
  let slug = slugify( as string);

  if (category.url) {
    slug = category.url.split("/").at(-1) ?? slug;

  return slug;

function handleCategoryHierarchy(
  context: NormalizerContext,
  category: CategoryHierarchyWithParentId,
): SfCategory {
  return {
    id: as string,
    name: ?? ( as string),
    slug: getCategorySlug(category),
    subcategories: maybe(
      category?.subcategories?.map((element) =>
        normalizeCategory(context, { ...element, parentCategoryId: }),
    parentCategoryId: maybe(category.parentCategoryId),

function handleCategory(category: CategoryWithParentCode): SfCategory {
  return {
    id: category.code as string,
    name: as string,
    slug: category.code as string,
    subcategories: null,
    parentCategoryId: maybe(category.parentCategoryCode),