如何使用产品详情组件？

一、什么是产品详情组件？

 

产品详情组件是一个根据规则自动调取不同产品详情内容的模块。产品详情组件通常被添加在系统页面或自定义页面的产品详情页面，该组件会自动根据传入的产品id调用该产品下的产品详细数据，比如产品名称、产品图片、产品分享、产品属性、产品规格、产品询价/加入询价篮/购买/加入购物车、产品描述等，同后台内容管理中的产品系统的产品数据自动匹配对应。产品详情页面是所有产品页面的通用模板，页面上的组件配置和页面结构是一样的，但是产品组件的数据会动态读取。

 

 

二、如何使用产品详情组件？

如果你的页面上已经有这个组件了，就不需要再添加，直接根据需要进行相关操作就可以（具体操作见下文所述）；

如果你的页面上需要这个组件，但是还没有添加，就需要先添加产品详情组件了；

请注意，产品详情组件支持添加在系统页面或者自定义页面的产品详情页面，其它页面是不支持添加的。

怎么判断页面上有没有这个组件？单击查看如何查看某一块内容是使用什么组件制作的？

1、如何添加产品详情组件？

1)支持添加产品详情组件的页面有系统页面或自定义页面的产品详情页面，以系统页面的产品详情页面为例操作介绍：

2)在页面上添加组件的方法都是一样的，单击查看如何添加组件？，要添加的组件名称为“产品详情”，如下图所示：

2、如何设置产品详情组件？
需要进入产品详情组件的“设置”功能去设置，进入组件的“设置”分两种情况：

1）此组件已经添加好的情况：进入所有这种情况下组件的设置，方法都是一样的，可以参考这个攻略：如何进入组件的设置项？

2）新添加的组件情况：在添加此组件时会弹出这个组件的设置窗口。

在弹出的设置产品详情窗口，可以设置产品详情组件的内容和风格。

内容：

组件标题：根据需要可以输入组件标题，若不输入，标题也不会显示 ；

“询价”功能：若选择开启，则产品详情页面中会显示询价按钮；若选择关闭，则产品详情中不会显示询价按钮（如上图所示）；

"点击询价交互类型"：支持弹出框形式的询价表单，此形式比“跳转到新页面”简化了一层页面跳转，喜欢这种交互的用户欢迎选择；

“加入询价篮”功能：若选择开启，则产品详情中会显示加入询价篮按钮；若选择关闭，则产品详情中不会显示加入询价篮按钮（如上图所示）；

弹出框形式示例如下：

“下单/购买”功能：若开启此功能，在产品详情页面会出现“立即购买”按钮（如下图所示）；

“加入购物车”功能：若开启在产品详情页面会出现“加入购物车”按钮（如下图所示）；

“下单/购买”、“加入购物车”功能与上面的“询价功能“、”加入询价蓝功能”是二选一的情况，如果同时选择，只会出现“询价”、“加入询价蓝”按钮；

支持上/下一个：若选择是，那么每个产品产品详情页面就会出现上一个产品和下一个产品的文字链接。

图片放大镜功能：如选择开启，则鼠标触摸到产品主图上图片会放大，若选择关闭，则图片不会有变化。
开启分享功能：若选择开启，则可将产品分享至社交软件；若选择关闭，则此处不支持分享（如上面的图所示）。
图片大小：这里指产品主图图片大小，根据需要来选择，若开启了放大镜，需要图片的宽或高大于此处的图片大小，图片放大镜功能才会生效。

上/下一个排序方式：有按修改日期降序（最新修改的在最前面）、按修改日期升序（最新修改的在最后面）、按添加日期降序（最新添加的在最前面）、按添加日期降序（最新添加的在最后面）这四种选项，如下图所示：

风格：

展示样式：有多种展示样式供用户选择，如上图所示；

产品属性位置：可以选择将产品属性放在产品主图下面或图片右侧。

是否显示标签卡选项：若选择隐藏，则不可在页面中看到标签卡；若选择显示，则可在页面中看到标签卡，并可以对相关样式进行设置；

支持设置的标签卡样式如下：

页签展示样式：有4种页签展示样式可供选择，如下图所示：

自定义页签展示样式：可以选择默认，也可以自定义，支持自定义以下内容：页签按钮高度、页签字体大小、页签按钮默认样式、页签按钮选中样式，如下图所示：

页签滚动悬浮：滚动页面时，支持把页签设置为悬浮状态：

按钮样式：有多种不同颜色和形式的按钮样式可供选择，如下图所示，这些颜色和按钮样式是固定的，不支持修改：

设置产品名称样式：产品详情页面上的产品名称，支持自定义字体大小、行高、文字间距、对齐方式、文字风格、文字颜色，操作入口如下图所示：

产品属性名样式：展示在产品详情页面的产品属性名称，支持单独设置它的字体大小、行高、文字间距、文字风格、文字颜色：

产品属性值样式：支持单独设置产品属性值的文字大小、行高、文字间距、文字风格、文字颜色：

产品属性名和属性值排版样式：两列左左、两列右左、紧凑：

设置好产品详情内容及风格后，点击右下方“保存”按钮，保存所设置的内容。

3、保存、预览、发布

设置好以上内容以后要单击页面右上角的“保存”按钮，目的是把此修改保存到网站后台；

然后可以单击“预览”按钮查看不同终端下展示的效果，如果不合适可以到后台再做修改；

如果需要让访客也看到，需要单击页面右上角的“发布”按钮，发布之后稍等两分钟左右即可看网站前台展示效果。

根据需要还可以对这个组件做以下操作，具体请单击以下链接了解。

 

4、单击查看如何编辑组件的样式？

组件的“编辑样式”功能主要可以编辑此组件的以下内容：组件背景、组件边框、组件边距、文字字号、颜色等，根据需求选择使用；

组件的“编辑样式”功能操作入口：所有组件的“编辑样式”功能操作入口都是一样的，具体操作方法请单击查看如何编辑组件的样式？

 

5、单击查看如何应用组件？

通过组件的“应用组件”功能，可以将当前页面的组件应用到其他页面上，因为原理上它们是同一个组件，所以在任何被应用到的页面上编辑/删除组件时，被应用的页面会一起变化，这个是“应用组件”和“复制组件”最本质的区别。此功能经常用于面包屑导航、产品分类组件、文章分类组件等。被应用过去的组件会出现在页面的最底端，可以用鼠标左键按住组件名称拖动到需要的位置；

组件的“应用组件”功能操作入口：所有组件的“应用组件”功能操作入口都是一样的，具体操作方法请单击查看如何应用组件？

 

6、单击查看如何删除组件？

如果确定不需要这个组件了，可以通过“删除组件”按钮把此组件删除掉，被删除的组件会默认放到组件回收站中。

组件的“删除组件”功能操作入口：所有组件的“删除组件”功能操作入口都是一样的，具体操作方法请单击查看如何删除组件？

 

7、单击查看如何恢复组件？

如果需要恢复已经删除的组件，可以到组件回收站中，找到对应的组件，然后执行【还原】操作，即可恢复此组件到原有的页面上，通常会位于页面的最底端。

恢复组件的操作入口：所有组件的恢复功能操作入口都是一样的，具体请单击查看如何恢复组件？

 

 

三、关于“产品详情组件”的版本优化内容

 

1、2017年12月第一周，产品详情、文章详情组件的详情描述中的图片新增在手机端可点击放大查看图片的效果。

【应用场景】在查看产品详情时，当用户在手机端进行浏览图片时，会存在图片太小不便于查看的问题，因此需要支持当用户在手机端浏览时，图片可供放大查看的效果。

【操作方式】在产品详情组件、文章详情组件的设置中找到“是否开启手机端图片放大功能”，勾选“是”则开启此效果，开启后，在手机浏览时点击图片即可放大查看图片，欢迎大家尝鲜试用~

 

2.产品详情组件新增放大镜在图片右侧展示的风格（同淘宝天猫效果）；

（1）新增风格的应用场景：在浏览产品详情图片时，需要在右侧支持对图片放大进行查看。

 （2）新增风格的操作方法：

 

3.产品详情组件新增两套带圆弧的按钮样式，支持可以自定义按钮的颜色；

（1）新增功能应用场景：支持自定义按钮配色，更改后自动更改按钮默认背景色和按钮悬浮后的背景色和对应的文字颜色；

（2）新增功能操作方法：

4.产品详情组件的产品名称后面增加二维码小图标； 

（1）新增功能应用场景：点击展开产品详情的二维码，方便大家在移动设备上查看产品并通过移动设备快速分享出去；

（2）新增功能应用效果：

新增功能：

1、新增一个产品详情风格；

【应用场景】为满足客户需求，我们新增了一个产品详情的展示风格，让客户在不同场景下有更多选择空间。

【应用效果】客户可以在产品详情—设置—风格中选择新风格，新风格可在产品左侧展示缩略图，如下图所示：

2、产品详情组件风格6支持图片放大镜功能，设置入口如下图所示：

3、产品详情组件新增视频静音播放选项，设置入口如下图所示：

4、产品详情组件新增风格15，新风格中，产品主图可随网页进行局部滚动，确保用户在浏览产品信息时能持续查看产品外观及形态，充分展示产品细节。