Documentation

This is the early access documentation preview for Custom Views. This documentation might not be in sync with our official documentation.

eCommerce types

To make the Frontend component library work with any extension, we introduced an abstract eCommerce business model.

This model provides (TypeScript) types to represent concepts like Product, Cart, and Account. An extension will always return and receive instances of the corresponding types. These types are then mapped from/to the actual business model used by the chosen underlying eCommerce system (for example, Composable Commerce).

You can find the types in your generated project repository under packages/<project>/types. From there, you can reference them directly from the corresponding …/frontend and …/backend directories to use them as a coding contract.

Adjusting the types

The eCommerce types limit the functionality of the underlying eCommerce systems to a common denominator to enable the Frontend component library to work with each of them. To unleash the full potential of your chosen eCommerce system or enhance functionality with other services, you can adapt the types to your own needs.

In general, you can change the types completely (or even get rid of them entirely). The TypeScript compiler should show you most of the affected code pieces if you change a certain type and many IDEs support you with refactoring types across the whole project codebase.

If you don't want to change the eCommerce types entirely but gradually adapt certain parts, we recommend you use type inheritance instead of changing the types directly.

Example: Derived product

As an example, you could add additional properties to a product. The basic Product type looks like the following:

import { Variant } from './Variant';
import { Category } from './Category';


export interface Product {
  productId: string;
  referenceKey: string;
  changed?: Date;
  version?: string;
  name?: string;
  slug?: string;
  description?: string;
  categories?: Category[];
  variants: Variant[];
  _url?: string;
}

To extend this, we recommend putting a derived version right beside this Product type, which can add additional properties:

import { Product } from './Product';
import { MyProjectSibling } from './TomTailorSibling';


export interface MyProjectProduct extends Product {
  gender?: string;
  siblings?: MyProjectSibling[];
}

You can now selectively change if an extension returns a standard Product or a derived version and access the added properties in your accordingly.

TypeScript even provides utilities to entirely change the type of properties or remove specific properties altogether from derived types. While we'd generally not recommend doing this (because it destroys polymorphism), it can become handy if you need a tapered version of a type for a certain use-case (for example, a Product without its Variant for displaying a slider).