Extending product model in Spartacus

Question

I'm trying to extend the product model with a new attribute I created in the -items.xml, but I can't seem to get it in Spartacus front. I added a product.model.ts file with the following code:

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

export interface Product extends CxProduct {
  myAttribute: string;
}

And I imported that file in the pipe where I use the product model, but it appears empty althoughs the product does have data in myAttribute field in backoffice. Is there something I may be missing?

I'm using this attribute in a product-images.component I created to override the default one. This is the new product-images.component.ts

import { Component, OnInit } from '@angular/core';
import { CurrentProductService } from '@spartacus/storefront';
import { ProductImagesComponent as SpartacusProductImages } from '@spartacus/storefront'

@Component({
  selector: 'cx-product-images',
  templateUrl: './product-images.component.html',
  styleUrls: ['./product-images.component.scss']
})
export class ProductImagesComponent extends SpartacusProductImages implements OnInit {

  constructor(currentProductService: CurrentProductService) {
    super(currentProductService)
  }

  ngOnInit() {
  }


}

Thanks a lot

Krzysztof Platis Krzysztof Platis · Accepted Answer · 2020-05-04T15:33:38

You need ask backend explicitly to return you the attribute. Please configure the product endpoint to contain ?fields= with your custom attribute. See docs: https://sap.github.io/spartacus-docs/connecting-to-other-systems/#configuring-endpoints

Please mind that you can specify various scoped endpoint configuraitons for product data - so you can load the custom attribute only when needed (i.e. it's useful when myAttribute is not displayed for some views like product carousel or product list). But since you're manipulating the image data, I guess you want to use this property everywhere (so please use scope called list).

For more, see docs for scoped product endpoint: https://sap.github.io/spartacus-docs/loading-scopes/#using-default-product-scopes. Note: When writing this post, the docs for Spartacus 2.0 version are not yet published. In 2.0 the product_scopes config property was renamed to product.

Extending product model in Spartacus

1 Answers