如何使用產品表格列表組件？

1、如何添加產品表格列表組件？

第一步：進入”編輯網站“後台；

1) 打開瀏覽器輸入www.webcan.cn ，點擊右上角登錄按鈕。

2) 在白色框內輸入賬號和密碼，點擊登錄。

3) 找到要編輯的網站，點擊“編輯網站“按鈕，進入網站後台。

第二步：把要操作的頁面切換為當前頁面。把鼠標放到“當前頁面”四個字眼的右側區域，彈出下拉菜單，在自定義頁面或系統頁面中找到相關頁面，單擊此頁面名稱（不要單擊頁面名稱後面的按鈕），即可切換為當前頁面。

第三步：把鼠標放到需要添加組件的位置，出現小水滴及一條藍色的橫線並且橫線所在區域就是要添加區域，單擊這個小水珠，彈出添加組件的頁面，找到產品組件中的“產品表格列表”組件，單擊它，即可添加。

2、如何設置產品表格列表組件？

在彈出的設置產品表格列表窗口，可以設置此組件的內容和風格。


內容：

組件標題：在此可以輸入這個組件的標題；
選擇列表的產品數據：在此可以選擇展示在這個位置的產品，可以是所有產品，也可以是使用篩選條件篩選出來的產品，也可以選擇指定的產品；
產品表格列表的字段配置（拖動可調整字段順序）：在這裡可以勾選顯示在這個組件中的字段，選擇好之後，可以按鈕鼠標左鍵調整某個字段的排列順序；



高級：
分頁展示：當產品總數量超過每頁展示的產品數量時，可以設置是否顯示分頁；
每頁產品數量：選擇展示分頁時，可以設置每頁產品數量；
分頁刷新方式：如果展示分頁了，那麼單擊分頁時，頁面刷新的方式有兩種，一種是頁面全局刷新URL變化（這種有利於頁面優化），另外一種是頁面局部刷新URL不變（這種不利於SEO優化，但是利於頁面打開速度）。



風格：

列表樣式：目前只有一個列表樣式；
表頭文字顏色：在此可以設置表頭文字顏色；
表頭背景色：在此可以設置表頭背景色；
表格邊線顏色：在此可以設置表格邊線的顏色；
分頁按鈕選中顏色：在此可以設置分頁按鈕選中的顏色；
分頁位置：在此可以設置分頁的位置。


設置好以上功能之後，需要點保存，不然修改的是無效的。

效果圖：

功能優化

1、“產品表格列表“組件，新增隔行變色風格。 （2019-9-17優化）

【應用場景】隔行變色及鼠標懸停變色可以讓“產品表格列表”在展示產品信息時更易引起顧客的注意。

【操作指導】進入“編輯網站”界面，選擇“添加組件”－“產品組件”－“產品表格列表”，在“風格”頁簽中選擇第2種展示風格，並在下方設置隔行背景色、鼠標懸停背景色、遺跡邊線粗細即可，操作如下圖所示：

【應用效果】如下圖所示：