The Vue Storefront Essentials Course is now available! Learn More
Product normalizers

Product normalizers

Product includes two normalizers:

  • normalizeProduct: This function is used to map SAP Product into SfProduct, which includes a full product details
  • normalizeProductCatalogItem: This function is used to map SAP Product into SfProductCatalogItem, which includes only basic product details, needed to display a product in a product catalog

Parameters

normalizeProduct

NameTypeDefault valueDescription
productProductSAP Product
ctxNormalizeProductContextContext needed for the normalizer. transformImageUrl is added to transform product images urls, and sku to specify a product variant

normalizeProductCatalogItem

NameTypeDefault valueDescription
productProductSAP Product
ctxNormalizeProductCatalogItemContextContext needed for the normalizer. transformImageUrl is added to transform product images urls

Extending

The SfProduct model is returned from GetProductDetails method. The SfProductCatalogItem model is returned from GetProducts method. If any of these models don't contain the information you need for your Storefront, you can extend its logic using the defineNormalizers function. In the following example we extend the normalizeProduct with classifications field which is available on SAP Product and normalizeProductCatalogItem with description field.

import { normalizers as normalizersSAP, defineNormalizers } from "@vsf-enterprise/unified-api-sapcc";

const normalizers = defineNormalizers<typeof normalizersSAP>()({
  ...normalizersSAP,
  normalizeProduct: (product, context) => ({
    ...normalizersSAP.normalizeProduct(product, context),
    classifications: product.classifications,
  }),
  normalizeProductCatalogItem: (product, context) => ({
    ...normalizersSAP.normalizeProductCatalogItem(product, context),
    description: product.description,
  }),
});

Since both normalizers accepts SAP Product as a first argument, you may also use the same approach to use same representation for both SfProduct and SfProductCatalogItem models.

import { normalizers as normalizersSAP } from "@vsf-enterprise/unified-api-sapcc";
import { defineNormalizers } from "@vue-storefront/unified-data-model";

const normalizers = defineNormalizers<typeof normalizersSAP>()({
  ...normalizersSAP,
  normalizeProduct: (product, context) => ({
    ...normalizersSAP.normalizeProduct(product, context),
  }),
  normalizeProductCatalogItem: (product, context) => ({
    ...normalizersSAP.normalizeProduct(product, context),
  }),
});

However in this case you should be aware that SfProductCatalogItem will contain all the fields from SfProduct model and it will affect the performance of the catalog page.

Source

The normalizeProduct and normalizeProductCatalogItem function consists of several smaller normalizers such as createSfImages, normalizeDiscountablePrice, and more. If you decide to override the normalization function, you should only override the root normalizer, which are normalizeProduct and normalizeProductCatalogItem.

product.ts
import type { NormalizerContext } from "@/normalizers/types";
import { normalizeAttributes } from "@/normalizers/attributes";
import { maybe, slugify } from "@shared/utils";
import { Product, VariantOption } from "@vsf-enterprise/sapcc-types";
import { SfProduct, SfProductVariant } from "@vue-storefront/unified-data-model";
import { normalizeProductCatalogItem } from "./productCatalog";
import { createSfImages } from "./images";
import sanitizeHtml from "sanitize-html";

export function normalizeProduct(product: Product, ctx: NormalizerContext): SfProduct {
  const { allOptions, currentOption } = getOptions(product, ctx.sku);

  const attributes = currentOption ? normalizeAttributes(currentOption) : [];
  const variants = normalizeVariants(allOptions);
  const baseFields = normalizeProductCatalogItem(product, ctx);
  const { gallery } = createSfImages(product.images, ctx);
  const description = product.description
    ? sanitizeHtml(product.description)
    : product.summary
      ? sanitizeHtml(product.summary)
      : null;

  return {
    ...baseFields,
    attributes,
    variants,
    description,
    gallery,
  };
}

export function getOptions(product: Product, currentSku = product.code as string) {
  const allOptions = (product.baseOptions ?? []).flatMap((baseOption) => baseOption.options ?? []);
  const currentOption = allOptions.find((variant) => variant?.code === currentSku) ?? allOptions[0];

  return {
    allOptions,
    currentOption,
  };
}

function normalizeVariants(variants: VariantOption[]): SfProduct["variants"] {
  return variants.map((variant) => normalizeVariant(variant));
}

function normalizeVariant(variant: VariantOption): SfProductVariant {
  const id = variant.code as string;

  return {
    id,
    sku: id,
    slug: slugify(id),
    name: null,
    quantityLimit: maybe(variant.stock?.stockLevel),
    attributes: normalizeAttributes(variant),
  };
}