如何使用相關產品組件？

一、什麼是相關產品組件？

相關產品組件是在頁面展示多條產品（包括產品主圖和產品名稱）輪播的模塊，一般用於產品詳情頁面和文章詳情頁面。被用於產品詳情頁面時，此組件動態讀取與該產品同級的其他產品推薦給訪客，最多取前20個；被用於文章詳情頁面時，針對每篇文章支持手動選擇5~20條與該文章相關的產品顯示在此文章詳情頁面。

二、相關產品組件主要有哪些應用場景？

應用場景1：通常訪客訪問某一個產品詳情頁面時，看完這一條還想看這一類的其它產品做個對比，若要這一類的產品都顯示在這一個產品詳情頁面，我們應該如何做到呢？需要一個一個的產品單獨上傳嗎？不需要，我們直接在產品詳情頁面添加“相關產品”組件就可以實現。

應用場景2：從網站優化角度出發，我們通常會建議用戶圍繞產品寫一些文章，在某一篇文章詳情頁面，可以展示相關的產品，這種需求可以通過在文章詳情頁面添加相關產品組件並且在文章編輯頁面關聯相關產品就可以實現。

單擊查看如何在某個文章頁面展示相關產品？

相關產品前台展示效果：

三、如何使用相關產品組件？

如果你的頁面上已經有這個組件了，就不需要再添加，直接根據需要進行相關操作就可以（具體操作見下文所述）；

如果你的頁面上需要這個組件，但是還沒有添加，就需要先添加相關產品組件了，單擊查看如何查看某一塊內容是使用什麼組件製作的？

1、如何添加相關產品組件？以應用場景1為例進行操作演示
1）添加組件頁面：系統的產品詳情頁面，如下圖所示：

2）在頁面上添加組件的方法都是一樣的，單擊查看如何添加組件？要添加的組件名稱為“相關產品”，如下圖所示：

2、如何設置相關產品組件？

需要進入相關產品組件的“設置”功能去設置，進入組件的“設置”分兩種情況：

1）此組件已經添加好的情況：進入所有這種情況下組件的設置，方法都是一樣的，可以參考這個攻略：如何進入組件的設置項？

2）新添加的組件情況：在添加此組件時會彈出這個組件的設置窗口。

在彈出的設置圖片窗口，可以設置圖片的內容和風格。

內容

組件標題：根據需要填寫，輸入則顯示，不輸入則不顯示；

是否顯示左右按鈕：即在組件左右兩側可以設置顯示或隱藏按鈕；
可視圖片數量：即可以看到的圖片數量；
產品名稱單行顯示：可以設置產品圖片下方的產品名稱只顯示一行或全部顯示；

風格

樣式選擇：即相關產品組件有橫向展示和縱向展示兩種樣式，根據需要選擇；

是否默認滾動：可以設置默認滾動或不滾動；

設置圖片邊框：可以設置單張產品圖片邊框，可以設置邊框寬度、邊框顏色。

3、保存、預覽、發布

設置好以上內容以後要單擊頁面右上角的“保存”按鈕，目的是把此修改保存到網站後台；

然後可以單擊“預覽”按鈕查看不同終端下展示的效果，如果不合適可以到後台再做修改；

如果需要讓訪客也看到，需要單擊頁面右上角的“發布”按鈕，發布之後稍等兩分鐘左右即可看網站前台展示效果。