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
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, commercetools).
You can find the types in your generated project repository under
packages/<project>/types. From there, you can reference them directly from the corresponding
…/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:
To extend this, we recommend putting a derived version right beside this
Product type, which can add additional properties:
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).