Vue Storefront is now Alokai! Learn More
Image normalizer

Image normalizer

The normalizeImage function maps Magento ProductImage into Unified SfImage.

Parameters

NameTypeDefault valueDescription
contextNormalizerContextcontext needed for the normalizer
imageProductImageMagento image

Extending

The SfImage is returned as a part of multiple models, as for example SfProduct, SfProductCatalogItem, and SfCart. If you want to change the global attributes representation, you should override all root normalizers, so for example normalizeCart, normalizeProduct etc. If the SfImage structure doesn't contain the information you need for your Storefront, you can extend its logic using the addCustomFields API.

export const unifiedApiExtension = createUnifiedExtension({
  normalizers: {
    addCustomFields: [
      {
        normalizeImage: (context, image) => ({
          position: image.position,
        }),
      },
    ],
  },
  config: {
    ...
  },
});

Source

image.ts
import { maybe } from "@shared/utils";
import { defineNormalizer } from "../defineNormalizer";

export const normalizeImage = defineNormalizer.normalizeImage((context, image) => {
  return {
    alt: maybe(image.label),
    url: image.url as string,
  };
});