How to find the Angular implementation Component name corresponding to the SAP E-commerce Cloud Spartacus UI product detail interface

Let's look at a practical example of PDP, namely product detail page:

http://localhost:4200/powertools-spa/en/USD/product/3881017/angle-grinder-rt-ag-125

In a single-page application, you can control what the user sees by displaying different views of the application. Spartacus uses Angular Router to handle navigation from one view to another. The router accomplishes this by treating each URL as an instruction to present a specific view.

When we load this PDP, the OCC API url:

https://host:9002/occ/v2/powertools-spa/cms/pages?pageType=ProductPage&code=3881017&lang=en&curr=USD

ProductPage is a special page type in CMS, the parameter is product code: 3881017

In the returned OCC response, you can see page template: ProductDetailsPageTemplate

Content slot also has many values:

A total of 17 slots:

Question 1: Where does Spartacus pass the parameter pageType=ProductPage to the OCC API?

According to the keyword ProductPage, there is no search result.

It should be that my search criteria were used incorrectly, and it is now normal:

Set breakpoints in getContextParams:

It can be clearly seen here that connector-(line 35) calls adapter:

However, who is calling the getList of line 35?
Continue to set breakpoints in cms-component.connector.ts:

In the end, it was found that NavigationEntryItemEffects was responsible for driving.

More original articles by Jerry, all in: "Wang Zixi":