eCommerce types

To make the Frontastic component libraryFrontastic component library - Frontastic components that are available with a Frontastic project that are copied and pasted into their own project to use. Part of our developer tooling. work with any extensionextension - Data connectors that you add specifically to your project., we introduced an abstract eCommerce business model.

This model provides (TypeScript) types to represent concepts like Product, Cart, and Account. A Frontastic extensionextension - Data connectors that you add specifically to your project. 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, commercetools).

You can find the types in your generated Frontastic 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 Frontastic eCommerce types limit the functionality of the underlying eCommerce systems to a common denominator to enable the Frontastic component libraryFrontastic component library - Frontastic components that are available with a Frontastic project that are copied and pasted into their own project to use. Part of our developer tooling. 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 used by Frontastic 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).


Did this page help you?