如何找出 SAP电商云产品明细页面读取后台数据的代码具体位置

简介: 以如下这个产品明细页面为例:http://localhost:4200/electronics-spa/en/USD/product/553637/nv10

image.png

观察浏览器 url 的格式:/product/553637/nv10

在 default-routing-config.ts 里,得知 product/ 后的 553637 代表 productCode,而 nv10 则是 product name.

image.png

因为我使用的是默认的 CSR 即客户端渲染模式,所以首先看到一个只包含 loading 的 HTML 页面。

image.png

然后看到第一个和该产品信息相关的 HTTP 请求:/occ/v2/electronics-spa/orgProducts/553637?fields=name,categories,purchasable,baseOptions(DEFAULT),baseProduct,variantOptions(DEFAULT),variantType&lang=en&curr=USD

image.png

返回的请求响应,从中可以看到,PDP - Product Detail Page 内的很多数据,都不包含在这个响应里。

image.png

接下来这个请求才是我们要查找的 PDP 明细数据请求:

image.png

{
   "availableForPickup" : true,
   "averageRating" : 4.541666666666667,
   "categories" : [ {
      "code" : "576",
      "name" : "Digital Compacts",
      "url" : "/Open-Catalogue/Cameras/Digital-Cameras/Digital-Compacts/c/576"
   }, {
      "code" : "brand_26",
      "name" : "Samsung",
      "url" : "/Brands/Samsung/c/brand_26"
   } ],
   "code" : "553637",
   "configurable" : false,
   "description" : "<b>10.1 mega-pixel 1/1.8\"\"CCD high resolution</b><br/>The NV10 comes in an 18.5mm thin black aluminium body with Samsung's unique blue ring on its expendable lens barrel, and a pop-up flash. A 10.1 mega pixels, 1/1.8\"\" CCD, not normally used in slim cameras, is used to give better detail.<br/><br/><b>Smart Touch + Large 2.5\"\" LCD</b><br/>The new Smart Touch user interface makes it possible to quickly navigate and set menu items or view pictures. The unique makeup of the Smart Touch buttons with large 2.5 inch LCD on the back of the camera is expected to be great fun for users, giving them an experience unlike anything they have tried before.<br/><br/><b>The superior Schneider-KREUZNACH lens</b><br/>The superior Schneider-KREUZNACH lens produces crystal clear images. <br/>Bright lens that start at f2.8 delivers even resolution from the centre to the edges. For more natural-looking pictures, each lens surface is multi-coated to minimize the \"\"ghost\"\" or \"\"flare\"\" phenomenon.<br/><br/><b>Pop-Up Flash</b><br/>The most distinctive feature of the new NV Series is the built-in pop-up flash. The use of a pop-up mechanism made the overall design simple yet luxurious, and its location, right above the lens, hugely improved light diffusion angles and transmission rates. The lens location is also ideal for delivering the flashlight as intended, since it prevents accidental blocking of the flash by a hand.<br/><br/><b>Advanced Shake Reduction</b><br/>The ASR technology prevents the degradation of image clarity and colour common to flash photography. With ASR the effects of camera shake are reduced in lower light conditions. You can even take well exposed, sharper pictures in low light without using a flash at all. It guarantees brighter and more natural pictures.<br/><br/><b>ISO1000 Standards in Action</b><br/>NV series has an auto sensitivity feature that automatically adjusts sensitivity according to the ambient exposure conditions up to ISO 1000. The high sensitivity setting of ISO 1000 enables you to take clear indoor pictures in the dark without camera shake and the resulting image blurring.<br/><br/><b>Photo Gallery function</b><br/>This is an upgraded version of the photo album, which used to let you access the Menu only from Play Back. Now, this new UI lets you go directly to the album. Pictures are grouped and stored by date for easier access.<br/><br/><b>Multiple ways to Recharge</b><br/>Recharging can be done using a cradle or a 24 pin USB cable, as well as by using a detachable cable. Connect the camera to a PC using a 24 pin USB cable, use the adaptor cable to plug it into a power supply, or use any other convenient method to recharge your camera. <br/><br/><b>Advanced Movie Function</b><br/>The NV series supports MPEG-4 VGA (640x480, 30fps) and TVD (720x480, 20fps - NV3) size for an enhanced video shooting experience. You can even edit your movies on the camera itself, making these clever models brilliantly portable but powerful movie-makers.<br/><br/><b>Scene Mode</b><br/>11 Scene Modes and Text Recognition capability NV series have various scene modes to obtain the best picture result in a variety of settings.<br/>The scene modes provided are Night Scene, Portrait, Children, Landscape, Text Recognition, Sunset, Dawn, Backlight, Fireworks, Beach and Snow.",
   "images" : [ {
      "altText" : "NV10",
      "format" : "zoom",
      "imageType" : "PRIMARY",
      "url" : "/medias/?context=bWFzdGVyfGltYWdlc3wyNjQ0MHxpbWFnZS9qcGVnfGg4OC9oNzQvODc5NzQzMTY5MzM0Mnw2ZTBiODI5M2Q0MmVkNDA3NzU2MGRiMmFkNmVjYzA3ZjQzYmUzYWU4YTM5ZGFlMWU0NTRjYjY0ZTg1OTE5NTBj"
   }, {
      "altText" : "NV10",
      "format" : "product",
      "imageType" : "PRIMARY",
      "url" : "/medias/?context=bWFzdGVyfGltYWdlc3wxMjA0MHxpbWFnZS9qcGVnfGg5Yy9oNTMvODc5NzQ1Nzg3NDk3NHxjNTc2ZmRjYzJkODZjNGRmZjM1NTM5Zjc5OGE1NWE2MWYyZThiMjg0NmQ1OGI5ZDg0ZTY0M2YxM2Q5YWYxY2Vh"
   }, {
      "altText" : "NV10",
      "format" : "thumbnail",
      "imageType" : "PRIMARY",
      "url" : "/medias/?context=bWFzdGVyfGltYWdlc3wyNjEzfGltYWdlL2pwZWd8aGU3L2hjOS84Nzk3NDg0Mjg1OTgyfDQxODAyMWNjMWYwOGQwYWM2NzU0ZGNjZjkxNDhlNmQ2MTk2NTlmNWU2ZTZlOTcxYTlmZWQ5ODUwZWQ1ZDNkMTU"
   }, {
      "altText" : "NV10",
      "format" : "cartIcon",
      "imageType" : "PRIMARY",
      "url" : "/medias/?context=bWFzdGVyfGltYWdlc3wxNjk2fGltYWdlL2pwZWd8aDViL2hhYS84Nzk3NTEwNjY0MjIyfGZiNzIxZDAzMzcwYWE5MzJlYzZhYWMwZGY3NWI0MDFjNzg1YTEyODk1ZmQwZjQ5MGNmNzAyMmMzOTVlNWZhY2M"
   }, {
      "altText" : "NV10",
      "format" : "zoom",
      "galleryIndex" : 0,
      "imageType" : "GALLERY",
      "url" : "/medias/?context=bWFzdGVyfGltYWdlc3wyNjQ0MHxpbWFnZS9qcGVnfGg4OC9oNzQvODc5NzQzMTY5MzM0Mnw2ZTBiODI5M2Q0MmVkNDA3NzU2MGRiMmFkNmVjYzA3ZjQzYmUzYWU4YTM5ZGFlMWU0NTRjYjY0ZTg1OTE5NTBj"
   }, {
      "altText" : "NV10",
      "format" : "product",
      "galleryIndex" : 0,
      "imageType" : "GALLERY",
      "url" : "/medias/?context=bWFzdGVyfGltYWdlc3wxMjA0MHxpbWFnZS9qcGVnfGg5Yy9oNTMvODc5NzQ1Nzg3NDk3NHxjNTc2ZmRjYzJkODZjNGRmZjM1NTM5Zjc5OGE1NWE2MWYyZThiMjg0NmQ1OGI5ZDg0ZTY0M2YxM2Q5YWYxY2Vh"
   }, {
      "altText" : "NV10",
      "format" : "thumbnail",
      "galleryIndex" : 0,
      "imageType" : "GALLERY",
      "url" : "/medias/?context=bWFzdGVyfGltYWdlc3wyNjEzfGltYWdlL2pwZWd8aGU3L2hjOS84Nzk3NDg0Mjg1OTgyfDQxODAyMWNjMWYwOGQwYWM2NzU0ZGNjZjkxNDhlNmQ2MTk2NTlmNWU2ZTZlOTcxYTlmZWQ5ODUwZWQ1ZDNkMTU"
   } ],
   "manufacturer" : "Samsung",
   "name" : "NV10",
   "numberOfReviews" : 24,
   "price" : {
      "currencyIso" : "USD",
      "formattedValue" : "$264.69",
      "priceType" : "BUY",
      "value" : 264.69
   },
   "priceRange" : {
   },
   "stock" : {
      "isValueRounded" : false,
      "stockLevel" : 240,
      "stockLevelStatus" : "inStock"
   },
   "summary" : "The NV10 comes in an 18.5mm thin black aluminium body with Samsung's unique blue ring on its extendable lens barrel, and a pop-up flash.",
   "url" : "/electronics-spa/products/553637"
}

url: /occ/v2/electronics-spa/products/553637?fields=code,configurable,configuratorType,name,summary,price(formattedValue,DEFAULT),images(galleryIndex,FULL),baseProduct,averageRating,stock(DEFAULT),description,availableForPickup,url,numberOfReviews,manufacturer,categories(FULL),priceRange,multidimensional,tags&lang=en&curr=USD


在 Chrome 开发者工具 network 标签页里选中这个 HTTP 请求,把鼠标放在 Initiator colume 上,会弹出调用栈:

image.png

image.png

image.png

image.png

image.png

根据关键字 ProductActions.LoadProduct 搜索,即可找到处理这个 action 的 effect 实现:product.effect.ts 文件:

image.png

在下图第 40 行设置断点:

image.png

image.png

下图就是我们最终要找到代码,SAP Spartacus 最终还是通过 http client, 请求对应 url 代表的资源:

image.png

url :


https://api.cg79x9wuu9-eccommerc1-p5-public.model-t.myhybris.cloud/occ/v2/electronics-spa/orgProducts/553637?fields=name,categories,purchasable,baseOptions(DEFAULT),baseProduct,variantOptions(DEFAULT),variantType


更多细节,请查看下列源代码:


projects\core\src\product\connectors\product\product.connector.ts

image.png


相关文章
|
1月前
|
人工智能 搜索推荐 Serverless
使用金庸的著作,来测试阿里通义千问最新开放的长文档处理功能
使用金庸的著作,来测试阿里通义千问最新开放的长文档处理功能
88 7
使用金庸的著作,来测试阿里通义千问最新开放的长文档处理功能
|
2月前
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
22 0
|
3月前
|
JavaScript 前端开发 数据库
如何在 SAP CRM 里通过 navigation framework 跳转到 ABAP Webdynpro 页面
如何在 SAP CRM 里通过 navigation framework 跳转到 ABAP Webdynpro 页面
21 0
|
4月前
|
数据采集 供应链 数据管理
关于评估 SAP 主数据的数据初始化对 SAP 系统影响范围的方法论
关于评估 SAP 主数据的数据初始化对 SAP 系统影响范围的方法论
45 0
|
1月前
|
存储
使用 ABAP 代码打印出 SAP CRM 系统里所有维护了 Sales Area 的 business partner id
使用 ABAP 代码打印出 SAP CRM 系统里所有维护了 Sales Area 的 business partner id
21 0
|
3天前
SAP CLIENT 数据配置文件的导出/导入
SAP CLIENT 数据配置文件的导出/导入
|
1月前
|
数据库
SAP CRM产品主数据无法根据产品描述字段进行搜索的原因
SAP CRM产品主数据无法根据产品描述字段进行搜索的原因
17 5
|
1月前
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen
16 1
什么是 SAP ABAP 里的 Subscreen
|
3月前
|
前端开发
SAP UI5 应用如何使用 iframe 嵌入其他 HTML 页面试读版
SAP UI5 应用如何使用 iframe 嵌入其他 HTML 页面试读版
33 0
|
4月前
|
Web App开发 开发者
5. 问题解答:SAP Fiori Launchpad 点了 Logout 之后,背后都运行了哪些代码
5. 问题解答:SAP Fiori Launchpad 点了 Logout 之后,背后都运行了哪些代码
27 0