如何使用产品分类组件？

一、什么是产品分类组件？

产品分类组件：产品分类组件是在一个页面上展示一级或多级产品分类（产品分组）的模块，单击某个产品分类可以快速查找对应分类下所有的产品，这些产品以列表形式展示。产品分类的展示方式有树状分类展示、弹出式分类展示、折叠树状分类展示等多种风格（在下文中有详细介绍）。

二、产品分类组件的应用场景主要有哪些？

一个页面上只要需要展示产品分类并且产品需要按照不同的分类进行筛选，都需要产品分类组件，将产品按不同的产品分类进行过滤筛选是一个非常实用的方式。常用到的页面有：系统页面中的产品中心页面的左侧栏或右侧栏、网站首页。

系统页面中的产品中心页面，如下图所示：

网站首页，如下图所示：

三、如何使用产品分类组件？

1、如何查看产品分类组件是否已经存在？

系统页面中的产品中心页面通常已经添加好了一个产品分类组件，直接根据需要对这个组件进行相关操作就可以。像首页或其它页面没有添加好的话，就需要先添加一个产品分类组件。

2、如何添加产品分类组件？

在页面上添加组件的方法都是一样的。

添加的组件名称为“产品分类”，如下图所示：

3、如何设置产品分类组件？

进入组件的“设置”分两种情况：

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

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

在组件的设置中可以设置组件展示的内容和风格：

内容：

组件标题：在这里可以输入组件标题、若不输入就不显示此标题栏；

请选择产品分类：可以选择展示所有的产品分类，也可以选择只展示部分产品分类。若勾选“选择部分产品分类”：支持对部分或所有产品分类进行拖拽排序；

风格：

单击“风格”，切换到风格页签，在这里可以选择产品分类展示的风格；

样式选择：您可以根据需要选择产品分类的展示样式，直接单击相中的样式就可以；

分类选中颜色：当鼠标选中某个产品分类时，产品分类的文字颜色可以在这里设置；

当选择以下红框框起来的这两种样式时，支持做以下操作：

设置菜单展开：默认收起是指当产品分类有不止一级分类时，只展示一级分类其它层级的分类是收起来的状态；全部展示是指把所有层级的产品分类都展开显示；默认展开二级菜单是指当产品分类有三级四级五级分类时也只展示到二级菜单，更深层级都是收起的来的状态，具体的情况大家可以点点看。

设置一级分类样式：支持设置一级分类的以下样式-->

文字大小：可移动按钮调节一级分类字体大小。

文字行高：可移动按钮调节一级分类字体大小。

文字颜色：可以更改文字颜色

文字悬浮颜色：可以更改鼠标指到文字上悬停时文字颜色

文字风格：加粗、文字倾斜和文字下划线

选择如下风格，支持标题两行展示。

展示效果如下：

更改完成产品分类内容及风格后，点击右下方“保存”按钮，保存所修改的内容。

新添加的产品分类组件，需要单击页面右上角的保存和发布按钮。

保存按钮：起到保存到后台的作用；

发布按钮：单击发布并提示发布成功，访客才可以通过前台网站看到。

四.组件优化

1.产品分类组件新增悬浮在页面的风格；  （2017-12-28优化）

 （1）新增风格的应用场景：在浏览产品的时候，产品分类需要可以悬浮在页面上，方便在浏览产品的时候查找和定位产品。

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

（3）新增风格的应用效果：

2.产品分类组件新增置顶悬浮在页面的风格；   （2017-12-21优化）

 （1）新增风格应用场景：该样式在浏览产品的时候，产品分类可以置顶悬浮在页面上，方便在浏览产品的时候查找产品分类。

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

（3）新增风格应用效果：

3.产品分类组件新增一种新风格；   （2017-6-15优化）

（1）新增风格应用场景：一级和二级纵向展开，三级、四级、五级子菜单向右横向展开的风格；

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

（3）新增风格应用效果：