如何使用产品分类组件？

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

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

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

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

网站首页，如下图所示：

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

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

系统页面中的产品中心页面通常已经添加好了一个产品分类组件，直接根据需要对这个组件进行相关操作就可以。像首页或其它页面没有添加好的话，就需要先添加一个产品分类组件。这就需要我们先学会查看要设置的内容是否已经存在了，如何查看某一块内容是使用什么组件制作的？如果不存在，就需要先添加这块内容。

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

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

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

进入组件的“设置”分两种情况：
1）此组件已经添加好的情况：进入所有这类组件设置项方法都是一样的，可以参考这个攻略：如何进入组件的设置项？
2）新添加的组件的情况：在添加此组件时会弹出这个组件的的设置话框。
在组件的设置中可以设置组件展示的内容和风格：

内容：

组件标题：在这里可以输入组件标题、若不输入就不显示此标题栏；
请选择产品分类：可以选择展示所有的产品分类，也可以选择只展示部分产品分类。若勾选“选择部分产品分类”：支持对部分或所有产品分类进行拖拽排序；

风格：

单击“分格”，切换到风格页签，在这里可以选择产品分类展示的风格；
样式选择：您可以根据需要选择产品分类的展示样式，直接单击相中的样式就可以；
分类选中颜色：当鼠标选中某个产品分类时，产品分类的文字颜色可以在这里设置；

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

设置菜单展开：默认收起是指当产品分类有不止一级分类时，只展示一级分类其它层级的分类是收起来的状态；全部展示是指把所有层级的产品分类都展开显示；默认展开二级菜单是指当产品分类有三级四级五级分类时也只展示到二级菜单，更深层级都是收起的来的状态，具体的情况大家可以点点看。
设置一级分类样式：支持设置一级分类的以下样式-->
文字大小：可移动按钮调节一级分类字体大小。
文字行高：可移动按钮调节一级分类字体大小。
文字颜色：可以更改文字颜色
文字悬浮颜色：可以更改鼠标指到文字上悬停时文字颜色
文字风格：加粗、文字倾斜和文字下划线

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

新添加的产品分类组件，需要单击页面右上角的保存和发布按钮。
保存按钮：起到保存到后台的作用；
发布按钮：单击发布并提示发布成功，访客才可以通过前台网站看到。

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

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


组件的“编辑样式”功能主要可以编辑此组件的以下内容：组件尺寸、组件背景、组件边框、组件边距、文字字号、颜色等。

组件的“编辑样式”功能，操作入口如下（所有组件的“编辑样式”功能操作入口都是一样的，以文章分类组件为例）：

2、单击查看如何复制组件？


通过组件的复制功能，可以快速拷贝出一个同原组件一模一样的组件，然后在这个组件的基础上再做局部的修改，这样省时省力省心。注意：通过复制组件生成的新组件，同原组件没有关系，单独编辑/删除其中一个组件不会影响到另一个组件。此功能经常用于页面上要展示多个同类的组件，先设置好一个组件，然后通过复制组件功能将内容样式等设置项全部拷贝过去，然后再简单修改即可实现不同的内容。
组件的“复制组件”功能，操作入口如下图所示（所有组件的“复制组件”功能操作入口都是一样的，以快速导航组件为例）：

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

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

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

如果确定不需要这个组件了，可以通过“删除组件”按钮把此组件删除掉，被删除的组件会默认放到组件回收站中。
组件的“删除组件”功能，操作入口如下（所有组件的“删除组件”功能操作入口都是一样的，以快速导航组件为例）：

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

如果需要恢复已经删除的组件，可以到组件回收站中，找到对应的组件，然后执行【还原】操作，即可恢复此组件到原有的页面上，通常会位于页面的最底端。
恢复组件入口：所有组件的恢复功能操作入口都是一样的，如下图所示：

四.组件优化

1.产品分类组件新增悬浮在页面的风格；  （2017-12-28优化）
 （1）新增风格的应用场景：在浏览产品的时候，产品分类需要可以悬浮在页面上，方便在浏览产品的时候查找和定位产品。
 （2）新增风格的操作方法 ：

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

2.产品分类组件新增置顶悬浮在页面的风格；   （2017-12-21优化）
 （1）新增风格应用场景：该样式在浏览产品的时候，产品分类可以置顶悬浮在页面上，方便在浏览产品的时候查找产品分类。
 （2）新增风格操作方法：

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

3.产品分类组件新增一种新风格；   （2017-6-15优化）
（1）新增风格应用场景：一级和二级纵向展开，三级、四级、五级子菜单向右横向展开的风格；
（2）新增风格操作方法：

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