乐趣区

关于前端:Spartacus-产品明细页面的-API-设计

当咱们应用如下 url 拜访 Spartacus 产品明细页面时:

https://spartacus-demo.eastus.cloudapp.azure.com/electronics-…

能察看到上面的 OCC API call:

https://spartacus-demo.eastus.cloudapp.azure.com:8443/occ/v2/electronics-spa/products/300938?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

images 节点是所谓的 media container.

每个 images 数组元素具备不同的 format 和 imageType 属性值。

媒体组件是用于出现单个媒体我的项目的低级组件。尽管后端能够为媒体项提供任何类型的媒体,但媒体组件目前仅限于渲染图像。图像类型不仅限于技术格局,例如 png 或 jpg。反对在图像元素中渲染的每种图像格式,包含 SVG。媒体组件会针对不同的屏幕大小和分辨率出现特定的图像,以便每个用户都领有图像的优化版本。

在 Spartacus 中,有两种次要类型的图像:产品图像和内容图像。两种类型应用雷同的技术实现,但每种内容的语义略有不同。

SAP Commerce Cloud 中应用的图像构造包含一个媒体容器,其中蕴含多个媒体项。容器中的媒体项由媒体格式辨别。媒体格式用于为不同的屏幕大小或地位提供雷同的媒体。

产品图像和内容图像的媒体格式不同,并且它们的应用也不同。

产品图像由产品数据驱动。产品图像用于许多组件中,例如产品列表和产品详细信息页面,以及用于购物车和订单数据的组件,还包含用于走马灯、欲望清单、趣味等组件。然而,无论组件如何,产品图像数据源始终雷同。

不同屏幕尺寸的产品图像通常基于雷同的源图像生成。这会导致一个媒体容器,其中蕴含许多只在像素大小上有所不同但在内容和比例上相等的媒体项。

产品图像的媒体格式能够在后端和前端中配置。以下列表显示了在样本数据和 Spartacus 配置中应用的(默认)格局:

  • cartIcon
  • thumbnail
  • product
  • zoom

内容图像由 CMS 组件数据驱动。媒体项用于不同的横幅组件。与产品图像不同,横幅图像通常手动优化以适应各种屏幕尺寸。这意味着内容管理员为每种媒体格式上传代替图像以用于横幅。产品和横幅媒体的技术构造雷同,但格局不同。

退出移动版