如何使用产品详情组件？

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

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

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

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

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

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

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

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

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

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

1）此组件已经添加好的情况：进入所有这种情况下组件的设置，方法都是一样的，

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

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

内容：

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

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

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

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

弹出框形式示例如下：

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

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

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

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

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

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

风格：

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

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

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

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

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

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

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

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

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

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

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

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

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



3、保存、预览、发布

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

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

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