SAP Commerce Cloud 的 Product Carousel Component 介绍

简介: SAP Commerce Cloud 的 Product Carousel Component 介绍

Product Carousel Component (产品轮播组件)显示一组带有本地化文本的产品图片。如果您想将相关产品放在一起展示,这将非常有用。商务营销人员使用产品轮播组件来改善营销并提高转化率。


我们可以创建一个包含产品、类别或产品和类别混合的产品轮播组件。如果将类别添加到组件中,则类别内的所有产品都将在 storefront 中的产品轮播组件中显示。创建组件时,选择将从中选择产品和类别的产品目录。如果产品或类别尚未同步到产品目录的在线版本,则这些产品或类别将不会显示在 storefront 中。


该轮播组件不会自动滚动,因此用户必须使用左右箭头来滚动产品。


该组件外观如下图所示:


31362679765c176f44d8b8182c518eca_ce2447080f983e5a178bb0a72a027c42.png


此过程描述了如何定义产品轮播组件的内容。


定义产品轮播组件的内容,请执行以下操作:


  1. 在组件编辑器中,选择“内容”选项卡。


在“标题”字段中,选择语言并指定要在该语言中显示的标题。


在您的内容目录支持的每种语言中指定标题。


  1. 要向组件添加产品,请单击“添加产品”按钮并执行以下操作:


从“目录版本”列表中选择要从中选择产品的产品目录。


产品列表将显示出来。


如果您选择了尚未同步到在线版本的产品目录版本,则无法在 storefront 中显示从该目录选择的产品。


在产品列表中,滚动列表以查找产品或开始输入产品名称,仅会显示符合搜索条件的产品。


单击产品以将其添加到列表中。


重复这些步骤以将更多产品添加到列表中。


添加完所有所需产品后,请单击“添加”按钮。


组件编辑器窗口将显示所选产品。


  1. 要向组件添加类别,请单击“添加类别”按钮。


添加类别到组件的步骤与添加产品的步骤相同。


组件编辑器窗口将显示所选产品和类别。


在保存组件之前,您可以执行以下操作来向您的产品轮播组件添加产品和/或类别:


(1) 随时单击产品或类别列表上方的“添加更多”链接添加其他产品或类别。


(2) 使用拖放功能将产品和类别在列表中上下移动。您还可以使用菜单选项在列表中上下移动项目。


从选项菜单中选择“删除”以从列表中删除选项。

指定滚动行为:


按需在“基本信息”和“可见性”选项卡中继续指定组件的参数。有关更多信息,请参见从组件类型创建组件。


当您指定组件的所有参数时,请选择“保存”。


新组件将出现在内容插槽中定义的内容中。现在,在“添加组件”面板的“组件”部分中可用该组件。


相关文章
|
4月前
|
UED
什么是 SAP Commerce Cloud SmartEdit Product Carousel Component Editor
什么是 SAP Commerce Cloud SmartEdit Product Carousel Component Editor
|
4月前
|
监控 测试技术
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
|
4月前
|
存储 监控 数据库
SAP 电商云 product catalog 从 staged 到 online 两个版本之间的同步
SAP 电商云 product catalog 从 staged 到 online 两个版本之间的同步
|
4月前
|
监控 安全 数据管理
SAP 电商云 Product catalog 的 staged 和 online 两种版本的设计理念
SAP 电商云 Product catalog 的 staged 和 online 两种版本的设计理念
|
4月前
|
机器学习/深度学习 搜索推荐 UED
SAP Commerce Cloud Context Driven Services 概述
SAP Commerce Cloud Context Driven Services 概述
|
4月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
4月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
4月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
|
4月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
|
4月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍