Skip to main content

Product Normalization

This page provides guidance on normalizing a product for your catalog integration.

Normalization happens after a product is fetched from a vendor. It transforms the vendor representation to a validated model used in the app code. You will look for this in a /normalize folder inside of your vendor package (e.g, @hv/commercetools)

Best Practices​

  • All product models have zod schemas. Use zod to parse product data, ensuring that product objects always match their typescript type.
  • Treat incoming data from vendors as unknown.

Product Types​

The Product model used throughout the High Velocity front-end app is a discriminated union of possible product types. In the normalization phase, you return one of these union members.

type Product = SimpleProduct | ContainerProduct | VariationGroup | VariationProduct

This allows the app UI to apply different UI treatments depending on product type.

note

This list of product types is fully customizable, since you have full control of the code in High Velocity, you are free to modify, remove, or add Product Types.

Location​

Normalization code is located in vendor packages: @hv/commercetools, @hv/shopify, @hv/contentful etc.

When navigating the codebase, it is easy to find the normalization code for a type by searching by filename using this convention:<vendor>/normalize<Type>.

Examples:

normalizeBaseProduct.ts

normalizeSimpleProduct.ts

normalizeContainerProduct.ts

References​

See the reference section for the @hv/catalog package for complete type documentation.

Reference