Spartacus 2.0 PDP outlets

Question

Looking at the training video "Component Context - Spartacus Extensibility Live Coding Part 4 - SAP Commerce Cloud", it customizes the PDP image component by setting [cxOutletRef]="ProductDetailOutlets.IMAGE". Looking at the ProductDetailOutlets enum in Spartacus 2.0:

export declare enum ProductDetailOutlets {
    INTRO = "PDP.INTRO",
    PRICE = "PDP.PRICE",
    SHARE = "PDP.SHARE",
    SUMMARY = "PDP.SUMMARY"
}

There is no "IMAGE" any more. I tested and confirm I can customize PDP.SUMMARY, but then with Spartacus 2.0, how do I customize the IMAGE component on the PDP?

Thanks.

tobi-or-not-tobi tobi-or-not-tobi · Accepted Answer · 2020-06-12T21:23:19

The video you watched was released long time before Spartacus version 1.0 was released. While outlets are a standard feature, the specific outlet references have been changed after the video was published.

The product images have transitioned into a CMS component, which means that outlets are not necessary the recommended approach to customise the images. Instead, you can use th CMS component mapping feature to replace the product image component with a custom component. You read more about this feature at https://sap.github.io/spartacus-docs/customizing-cms-components/.

The type for the product image component is ProductImagesComponent.

If you like to use outlets, you can also use the component type (ProductImagesComponent) as an outlet reference.

Spartacus 2.0 PDP outlets

1 Answers