The Vue Storefront Essentials Course is now available! Learn More
Attributes normalizer

Attributes normalizer

Attributes are Unified Data Layer representation of SAP VariantOption qualifiers. The normalizeAttributes function maps all qualifiers in VariantOption into an array of SfAttribute.


NameTypeDefault valueDescription
variantVariantOptionSAP VariantOption


The SfAttribute is returned as a part of SfProduct and SfCart.

If you want to change the global attributes representation, you should override both - the normalizeProduct, and normalizeCart functions. Overriding the normalizeAttributes function will not have an impact of the attributes normalization inside these functions, it is just an utils function which may be then used in writing other custom normalizers or methods.


import { VariantOption, VariantOptionQualifier } from "@vsf-enterprise/sapcc-types";
import { SfAttribute, SfProduct } from "@vue-storefront/unified-data-model";

export function normalizeAttributes(variant: VariantOption): SfProduct["attributes"] {
  const qualifiers = variant.variantOptionQualifiers ?? [];
  return qualifiers
    .map((attr) => normalizeAttribute(attr))
    .filter((attribute): attribute is SfAttribute => !!attribute);

function normalizeAttribute(optionQualifier: VariantOptionQualifier): SfAttribute | null {
  if (!isValidOptionQualifier(optionQualifier)) {
    return null;

  return {
    name: optionQualifier.qualifier,
    label: ?? optionQualifier.qualifier,
    value: optionQualifier.value,
    valueLabel: optionQualifier.value,

type ValidOptionQualifier = VariantOptionQualifier &
  Required<Pick<VariantOptionQualifier, "qualifier" | "value">>;

function isValidOptionQualifier(
  optionQualifier: VariantOptionQualifier,
): optionQualifier is ValidOptionQualifier {
  return !!optionQualifier.qualifier && !!optionQualifier.value;