如何使用產品分類組件？

一、什麼是產品分類組件？

產品分類組件：產品分類組件是在一個頁面上展示一級或多級產品分類（產品分組）的模塊，單擊某個產品分類可以快速查找對應分類下所有的產品，這些產品以列表形式展示。產品分類的展示方式有樹狀分類展示、彈出式分類展示、折疊樹狀分類展示等多種風格（在下文中有詳細介紹）。

二、產品分類組件的應用場景主要有哪些？

一個頁面上只要需要展示產品分類並且產品需要按照不同的分類進行篩選，都需要產品分類組件，將產品按不同的產品分類進行過濾篩選是一個非常實用的方式。常用到的頁面有：系統頁面中的產品中心頁面的左側欄或右側欄、網站首頁。

系統頁面中的產品中心頁面，如下圖所示：

網站首頁，如下圖所示：

三、如何使用產品分類組件？

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）新增風格應用效果：