Vue Storefront is now Alokai! Learn More
Attributes normalizer

Attributes normalizer

Attributes are Unified Data Layer representation of BigCommerce options. The normalizeAttribute function maps the variant's or cart item option into an SfAttribute.

Parameters

NameTypeDefault valueDescription
contextNormalizerContextContext which contains e.g. currency
optionProductVariantOptionValue or CartItemBase["options"][0]BigCommerce ProductVariant.

Extending

The SfAttribute is returned as a part of SfProduct, SfOrder and SfCart. If you want to extend the SfAttribute with custom fields, you should use the addCustomFields API.

import { normalizers } from "@vsf-enterprise/unified-api-bigcommerce";

export const unifiedApiExtension = createUnifiedExtension({
  normalizers: {
    addCustomFields: [
      {
        normalizeAttribute: (context, option) => {
          const normalizedAttribute = normalizers.normalizeAttribute(context, option);
          
          if (normalizedAttribute) {
            return {
              someNewField: "someValue",
            };
          }
          
          return null;
        },
      },
    ],
  },
  config: {
    ...
  },
});

Source

Please note that the normalizeAttribute has a different type - ProductVariantOptionValue or CartItemBase["options"][0] depending on the context in which it is used. We use a type guard to determine the type of the option.

attributes.ts
import type { ProductVariantOptionValue } from "@vsf-enterprise/bigcommerce-api";
import { defineNormalizer } from "../defineNormalizer";
import type { NormalizeAttributeInput } from "../types";

const isProductVariantOptionValue = (
  option: NormalizeAttributeInput,
): option is ProductVariantOptionValue => {
  return (option as ProductVariantOptionValue).option_display_name !== undefined;
};

export const normalizeAttribute = defineNormalizer.normalizeAttribute((_context, option) => {
  if (isProductVariantOptionValue(option)) {
    return {
      name: option.option_display_name,
      value: option.id.toString(),
      valueLabel: option.label,
      label: option.option_display_name,
    };
  }

  if (!option.nameId || !option.valueId) {
    return null;
  }

  return {
    name: option.nameId.toString(),
    value: option.valueId.toString(),
    valueLabel: option.value || option.valueId.toString(),
    label: option.name || option.nameId.toString(),
  };
});