Extending OOTB Spartacus Product and Occ.Product UI models

Question

I created custom converter of Product. It's good, but I have one issue regarding using custom extended type of Product in services.

For example, my custom OCC Product model & CustomProduct UI Model have additional fields(e.g. string field). I extended both Occ.Product and Product interfaces. But, e.g. in ProductSummaryComponent the property product$ doesn't have my field. My suggestion is that it has product$: Observable<Product> = this.currentProductService.getProduct(); - Product UI Model.

The problem:

I want to use my custom CustomProduct UI model instead of OOTB Product UI Model of Spartacus anywhere and the same for OOTB Spartacus Occ.Product model. Docs describe only how to create custom UI model and use it in Normalizer. But what if I need to replace OOTB Product or Occ.Product UI Model by custom one anywhere (services, adapters, converters, etc)?

tobi-or-not-tobi tobi-or-not-tobi · Accepted Answer · 2020-03-16T10:24:02

There's currently only a workaround available, as the model is hardcoded in the library and the model isn't exported as a symbol in the root of the library. We've worked on this topic a few times, see https://github.com/SAP/cloud-commerce-spartacus-storefront/issues/1217, but it's not finalised.

The workaround is to create your own model, and make a reference to it where you need type-safety.

import { Product as CxProduct  } from '@spartacus/core';

interface Product extends CxProduct {
  magic?: string;
}

You could import the custom Product model from a central place in your application.

If you need to operate on the product from the spartacus lib, you probably need to pass in the type explicitly, i.e.:

this.currentProductService.getProduct().pipe(map((p:Product) => p.magic));

We will continue to work on this, but for now, I'm afraid this is the best you can use.

Please be aware that the type-safety of the will not influence the actual data load. The interfaces are only used during development, and will not be used at runtime. Once typescript is converted to javascript, the data being loaded from the backend will end up in the ngrx store, and can be observed.

Extending OOTB Spartacus Product and Occ.Product UI models

1 Answers