一、什么是產(chǎn)品列表組件？

產(chǎn)品列表組件：是在網(wǎng)頁上展示部分或所有產(chǎn)品的模塊，支持分頁展示。在產(chǎn)品系統(tǒng)中添加的產(chǎn)品需要通過產(chǎn)品列表組件在頁面上展示出來。展示風(fēng)格多樣化，如下圖所示，在下面展示風(fēng)格中做詳細(xì)介紹。

二、產(chǎn)品列表組件的應(yīng)用場景主要有哪些？

產(chǎn)品列表組件通常被應(yīng)用在需要展示產(chǎn)品的頁面，比如系統(tǒng)頁面的產(chǎn)品中心頁面、網(wǎng)站首頁等；
系統(tǒng)頁面中的產(chǎn)品中心頁面，如下圖所示：

網(wǎng)站首頁，如下圖所示：

三、如何使用產(chǎn)品列表組件？

1、如何查看產(chǎn)品列表組件是否已經(jīng)存在？

系統(tǒng)頁面中的產(chǎn)品中心頁面通常已經(jīng)添加好了一個(gè)產(chǎn)品列表組件，直接根據(jù)需要對這個(gè)組件進(jìn)行相應(yīng)操作就可以。
像首頁或其它頁面沒有添加好的話，就需要先添加一個(gè)產(chǎn)品列表組件。這就需要我們先學(xué)會查看要設(shè)置的組件是否已經(jīng)存在了，如何查看某一塊內(nèi)容是使用什么組件制作的？如果不存在，就需要先添加這塊內(nèi)容。

2、如何添加產(chǎn)品列表組件？

在頁面上添加組件的方法都是一樣的，單擊查看如何添加組件？
添加的組件名稱為“產(chǎn)品列表”，如下圖所示：

3、如何設(shè)置產(chǎn)品列表組件？

1）進(jìn)入組件的“設(shè)置”分兩種情況：

1>此組件已經(jīng)添加好的情況：進(jìn)入所有組件的設(shè)置項(xiàng)方法都是一樣的，可以參考這個(gè)攻略：如何進(jìn)入組件的設(shè)置項(xiàng)？

2>新添加的組件的情況：在添加此組件時(shí)會彈出這個(gè)組件的的設(shè)置話框。

2）在組件的設(shè)置中可以設(shè)置組件展示的內(nèi)容、高級功能、風(fēng)格和特效。

1>內(nèi)容

組件標(biāo)題：根據(jù)需要可以輸入組件標(biāo)題，比如產(chǎn)品中心，若不輸入，標(biāo)題也不會顯示；
選擇列表的產(chǎn)品數(shù)據(jù)：即選擇展示在這個(gè)頁面上的產(chǎn)品。有三個(gè)選項(xiàng)，所有產(chǎn)品、使用篩選條件、選擇指定產(chǎn)品。
若選擇“所有產(chǎn)品”，則產(chǎn)品列表中會顯示所有的已上架產(chǎn)品，一頁顯示不了會分頁顯示；
若選擇“使用篩選條件”：可以只勾選熱門產(chǎn)品、新產(chǎn)品、推薦產(chǎn)品，這樣被設(shè)置為熱門產(chǎn)品、新產(chǎn)品、推薦產(chǎn)品的所有已上架的產(chǎn)品都會顯示出來；若需要只顯示某一個(gè)分類下的產(chǎn)品，可以直接選擇這個(gè)分類就可以；   

若選擇“選擇指定產(chǎn)品”：可以選擇特定產(chǎn)品展示在這里；

分頁展示：若選擇“是”，在產(chǎn)品列表中的產(chǎn)品超過“每頁產(chǎn)品數(shù)量”設(shè)置的指時(shí)會自動進(jìn)行分頁。若選擇“否”，產(chǎn)品展示方式有“產(chǎn)品混排”和“按分類展示”兩種方式可以選擇。產(chǎn)品混排：即不按照分類排列；顯示產(chǎn)品總數(shù)量：輸入數(shù)值。不分頁。

分頁展示：若選擇“否”，同時(shí)產(chǎn)品展示方式選擇“按分類展示”，下面會讓設(shè)置每個(gè)分類展示產(chǎn)品個(gè)數(shù)。則產(chǎn)品不會分頁展示并且展示完一個(gè)分類的產(chǎn)品后再展示第二個(gè)、第三個(gè)等產(chǎn)品分類下的產(chǎn)品；

顯示更多：可以根據(jù)需要設(shè)置是否顯示更多按鈕，通常會在非產(chǎn)品中心頁面設(shè)置顯示更多按鈕，通常可以鏈接到產(chǎn)品中心等能夠展示更多產(chǎn)品頁面。
單擊下圖所示“顯示更多”后的鏈接按鈕，彈出“插入鏈接”窗口，根據(jù)需要選擇一個(gè)類型，單擊查看鏈接類型介紹；

設(shè)置顯示更多按鈕后，前臺展示的效果如下圖所示：

高級：

在高級頁簽下，可以設(shè)置產(chǎn)品排序方式，分頁刷新方式，開啟或關(guān)閉產(chǎn)品詢價(jià)、加入詢價(jià)藍(lán)、下單購買、加入購物車，是否在新窗口中打開產(chǎn)品詳情的鏈接，是否顯示產(chǎn)品分類描述。

產(chǎn)品排序方式：點(diǎn)擊下拉小箭頭，支持產(chǎn)品按照以下方式排序，按修改日期降序（最新修改的在最前面）、按修改日期升序（最新修改的在最后面）、按添加日期升序（最新添加的在最前面）、按添加日期降序（最新添加的在最后面）。

分頁刷新方式：選擇“頁面全局刷新URL變化”時(shí)，點(diǎn)擊分頁按鈕時(shí)，頁面URL會變化，即打開新的頁面；若選擇“頁面局部刷新URL不變”時(shí)，點(diǎn)擊分頁按鈕時(shí)，只會局部刷新，頁面URL不變，即不會跳轉(zhuǎn)到其他頁面。兩者區(qū)別，前者利于SEO，頁面打開速度相對慢一些，后者頁面打開速度會相對快一些；

功能設(shè)置
產(chǎn)品詢價(jià)：可選擇開啟或關(guān)閉產(chǎn)品詢價(jià)按鈕，開啟，則在產(chǎn)品圖片下方增加一個(gè)產(chǎn)品詢價(jià)按鈕；
加入詢價(jià)藍(lán)：可選擇開啟或關(guān)閉詢價(jià)藍(lán)，開啟，則在產(chǎn)品圖片下方增加一個(gè)“加入詢價(jià)藍(lán)”按鈕，加入詢價(jià)藍(lán)可以和其它產(chǎn)品一起詢價(jià)；
下單購買：若給產(chǎn)品輸入了價(jià)格，需要客戶在線下單購買的，可以開啟此功能；
加入購物車：若給產(chǎn)品輸入了價(jià)格，需要客戶在線下單購買的，可以開啟此功能；
“下單購買和加入購物車”功能與“產(chǎn)品詢價(jià)和加入詢價(jià)藍(lán)功能”是二選一的關(guān)系；
當(dāng)產(chǎn)品列表組件的產(chǎn)品詢價(jià)、加入詢價(jià)籃、下單購買、加入購物車這四個(gè)按鈕都是開啟狀態(tài)時(shí)，系統(tǒng)會自動識別，當(dāng)產(chǎn)品有價(jià)格時(shí)就顯示購買和加入購物車，當(dāng)產(chǎn)品沒有價(jià)格時(shí)就會顯示詢價(jià)和加入詢盤籃。

在新窗口中打開產(chǎn)品詳情的鏈接：可以選擇是否在新窗口打開產(chǎn)品詳情的鏈接；

顯示產(chǎn)品分類描述：若勾選此功能并且在產(chǎn)品分類編輯頁面輸入了產(chǎn)品分類描述，那么在打開一個(gè)產(chǎn)品分類描述頁面時(shí)，產(chǎn)品列表上方會顯示產(chǎn)品分類描述。如果不在此勾選此功能，但又想顯示產(chǎn)品分類描述，可以使用產(chǎn)品分類描述組件來制作。
產(chǎn)品列表的字段配置：有時(shí)客戶需要在產(chǎn)品圖片和名稱下面顯示這些字段，那么我們就可以在這里勾選要顯示的字段，并且可以拖動調(diào)整字段順序；

3>風(fēng)格

選擇展示風(fēng)格：常用的產(chǎn)品展示風(fēng)格如下圖所示。

第1種風(fēng)格：如下圖所示，產(chǎn)品主圖+產(chǎn)品名稱。

選擇第1種風(fēng)格，還支持設(shè)置以下內(nèi)容：

● 設(shè)置響應(yīng)式變化下不同寬度的圖片數(shù)量：可選擇默認(rèn)，即自適應(yīng)；也可以自定義不同設(shè)備下一行展示的產(chǎn)品圖片數(shù)量，可以設(shè)置寬屏電腦通欄（>1200px）、寬屏電腦非通欄（961px~1200px）、PAD豎屏（741px~960px）、手機(jī)橫屏（500px~740px）、手機(jī)豎屏（<500px）一行顯示的圖片數(shù)量，（可填數(shù)值在2~8之間）。

● 選擇圖片顯示比例（寬：高）：建議所有的產(chǎn)品圖片的寬與高的比例都是相同的，并且在這里選擇這個(gè)比例。如果圖片的寬與高的比例不一樣，選擇一個(gè)符合大部分圖片的比例，然后修改小部分的圖片原圖比例。圖片比例（寬：高）：1:1、3:2、2:3、4:3、3:4、16:9、9:16。

● 還可以設(shè)置單個(gè)產(chǎn)品背景顏色、單個(gè)產(chǎn)品懸浮鼠標(biāo)樣式、單個(gè)產(chǎn)品邊框、設(shè)置產(chǎn)品圖片邊框。

單個(gè)產(chǎn)品背景色：可以自定義單個(gè)產(chǎn)品背景色；
單個(gè)產(chǎn)品鼠標(biāo)懸浮樣式：可以設(shè)置鼠標(biāo)懸浮在當(dāng)產(chǎn)品時(shí)單個(gè)產(chǎn)品的背景顏色和鏈接文字顏色；
單個(gè)產(chǎn)品邊框：可以設(shè)置不顯示，可以選擇顯示（邊框是默認(rèn)的，不支持改）；
設(shè)置產(chǎn)品圖片邊框：可以設(shè)置不顯示，若設(shè)置顯示，可以設(shè)置邊框?qū)挾?、邊框顏色?br/>

● 按鈕樣式：可以選擇以下符合自己網(wǎng)站風(fēng)格的按鈕，這些按鈕顏色已經(jīng)配置好了，不支持修改；

● 分頁風(fēng)格，可以設(shè)置默認(rèn)，也可以自定義分頁風(fēng)格，可以自定義分頁按鈕中顏色，也可以選擇分頁位置居左、居中或者居右。

特效：

鼠標(biāo)懸停產(chǎn)品圖片特效：可以設(shè)置鼠標(biāo)懸停在產(chǎn)品圖片上時(shí)圖片的特效，有：默認(rèn)、放大、透明、黑白、蒙層、黑白變彩色、向上偏移、向右偏移、向下偏移、向左偏移、動畫線。直接選擇這些特效試一下就知道分別代表什么意思咯。

當(dāng)選擇動畫線特效的時(shí)候，可以自定義動畫線顏色：

3）設(shè)置好產(chǎn)品列表組件的內(nèi)容、高級功能、風(fēng)格和特效后，點(diǎn)擊右下方“保存”按鈕，保存所設(shè)置的內(nèi)容。

4、針對顯示在產(chǎn)品列表組件中的產(chǎn)品可以排序，單擊查看：
如何對產(chǎn)品排序？
如何對產(chǎn)品分類下的產(chǎn)品排序？

5、如何編輯產(chǎn)品列表組件的樣式？

所有組件的“編輯樣式”功能操作入口都是一樣的，組件的“編輯樣式”功能主要可以編輯此組件的以下內(nèi)容：組件尺寸、組件背景、組件邊框、組件邊距、文字字號、顏色等。單擊查看如何編輯組件的樣式？
組件的“編輯樣式”功能，操作入口如下：

6、如何復(fù)制產(chǎn)品列表組件？

通過組件的復(fù)制功能，可以快速拷貝出一個(gè)同原組件一模一樣的組件，然后在這個(gè)組件的基礎(chǔ)上再做局部的修改，這樣省時(shí)省力省心。注意：通過復(fù)制組件生成的新組件，同原組件沒有關(guān)系，單獨(dú)編輯/刪除其中一個(gè)組件不會影響到另一個(gè)組件。此功能經(jīng)常用于頁面上要展示多個(gè)同類的組件，先設(shè)置好一個(gè)組件，然后通過復(fù)制組件功能將內(nèi)容樣式等設(shè)置項(xiàng)全部拷貝過去，然后再簡單修改即可實(shí)現(xiàn)不同的內(nèi)容。
所有組件的“復(fù)制組件”功能都是一樣的，單擊查看如何復(fù)制組件？
操作入口如下圖所示：

7、如何應(yīng)用產(chǎn)品列表組件？

通過組件的“應(yīng)用組件”功能，可以將當(dāng)前頁面的組件應(yīng)用到其他頁面上，因?yàn)樵砩纤鼈兪峭粋€(gè)組件，所以在任何被應(yīng)用到的頁面上編輯/刪除組件時(shí)，被應(yīng)用的頁面會一起變化，這個(gè)是“應(yīng)用組件”和“復(fù)制組件”最本質(zhì)的區(qū)別。此功能經(jīng)常用于面包屑導(dǎo)航、產(chǎn)品分類組件、文章分類組件等。被應(yīng)用過去的組件會出現(xiàn)在頁面的最底端，可以用鼠標(biāo)左鍵按住組件名稱拖動到需要的位置。
所有組件的“應(yīng)用組件”功能操作入口都是一樣的，單擊查看如何應(yīng)用組件？
組件的“應(yīng)用組件”功能，操作入口如下：

8、如何刪除產(chǎn)品列表組件？

如果確定不需要這個(gè)組件了，可以通過“刪除組件”按鈕把此組件刪除掉，被刪除的組件會默認(rèn)放到組件回收站中。
所有組件的“刪除組件”功能操作入口都是一樣的，單擊查看如何刪除組件？
組件的“刪除組件”功能，操作入口如下：

9、如何恢復(fù)已被刪除的產(chǎn)品列表組件？

如果需要恢復(fù)已經(jīng)刪除的組件，可以到組件回收站中，找到對應(yīng)的組件，然后執(zhí)行【還原】操作，即可恢復(fù)此組件到原有的頁面上，通常會位于頁面的最底端。單擊查看如何恢復(fù)組件？
恢復(fù)組件入口：所有組件的恢復(fù)功能操作入口都是一樣的，如下圖所示：

四.組件優(yōu)化

1.優(yōu)化產(chǎn)品列表組件中星級展示的對齊方式，可以通過編輯樣式中的內(nèi)容區(qū)普通文字項(xiàng)對其調(diào)整；
（1）新增功能應(yīng)用場景：通過設(shè)置對齊方式，滿足用戶不同的排版需求，讓產(chǎn)品列表更加美觀。
（2）設(shè)置對齊方式的效果圖如下所示，圖1為左對齊，圖2為中間對齊，圖3為右對齊。
圖1

圖2

圖3

2.產(chǎn)品列表組件新增多種風(fēng)格切換功能；  （2018-05-02優(yōu)化）
（1）新增功能應(yīng)用場景：當(dāng)用戶前臺產(chǎn)品較多，希望給買家提供方便適宜的產(chǎn)品瀏覽方式時(shí)，可以在產(chǎn)品列表組件中添加展示風(fēng)格前臺切換功能，允許買家在前臺產(chǎn)品列表上一鍵切換自己想要的展示風(fēng)格。
（2）操作方法：

3.、產(chǎn)品列表組件增加產(chǎn)品對比功能（英文站上叫“Compare”）；    （2017-10-19優(yōu)化）
   （1）新增功能應(yīng)用場景：當(dāng)需要對產(chǎn)品的各個(gè)屬性進(jìn)行直觀的分析對比的時(shí)候，人工對比費(fèi)時(shí)費(fèi)力，這個(gè)時(shí)候只需要將需要對比的產(chǎn)品加入到對比池，就能夠得到很直觀的數(shù)據(jù)。
   （2）新增功能的操作方法：

（3）新增功能應(yīng)用效果：