如何使用產品詳情組件？

一、什麼是產品詳情組件？

產品詳情組件是一個根據規則自動調取不同產品詳情內容的模塊。產品詳情組件通常被添加在系統頁面或自定義頁面的產品詳情頁面，該組件會自動根據傳入的產品id調用該產品下的產品詳細數據，比如產品名稱、產品圖片、產品分享、產品屬性、產品規格、產品詢價/加入詢價籃/購買/加入購物車、產品描述等，同後台內容管理中的產品系統的產品數據自動匹配對應。產品詳情頁面是所有產品頁面的通用模板，頁面上的組件配置和頁面結構是一樣的，但是產品組件的數據會動態讀取。

二、如何使用產品詳情組件？

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

如果你的頁面上需要這個組件，但是還沒有添加，就需要先添加產品詳情組件了；

請注意，產品詳情組件支持添加在系統頁面或者自定義頁面的產品詳情頁面，其它頁面是不支持添加的。

怎麼判斷頁面上有沒有這個組件？單擊查看如何查看某一塊內容是使用什麼組件製作的？

1、如何添加產品詳情組件？

1)支持添加產品詳情組件的頁面有系統頁面或自定義頁面的產品詳情頁面，以系統頁面的產品詳情頁面為例操作介紹：

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

2、如何設置產品詳情組件？
需要進入產品詳情組件的“設置”功能去設置，進入組件的“設置”分兩種情況：

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

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

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

內容：

組件標題：根據需要可以輸入組件標題，若不輸入，標題也不會顯示 ；

“詢價”功能：若選擇開啟，則產品詳情頁面中會顯示詢價按鈕；若選擇關閉，則產品詳情中不會顯示詢價按鈕（如上圖所示）；

\"點擊詢價交互類型\"：支持彈出框形式的詢價表單，此形式比“跳轉到新頁面”簡化了一層頁面跳轉，喜歡這種交互的用戶歡迎選擇；

“加入詢價籃”功能：若選擇開啟，則產品詳情中會顯示加入詢價籃按鈕；若選擇關閉，則產品詳情中不會顯示加入詢價籃按鈕（如上圖所示）；

彈出框形式示例如下：

“下單/購買”功能：若開啟此功能，在產品詳情頁面會出現“立即購買”按鈕（如下圖所示）；

“加入購物車”功能：若開啟在產品詳情頁面會出現“加入購物車”按鈕（如下圖所示）；

“下單/購買”、“加入購物車”功能與上面的“詢價功能“、”加入詢價藍功能”是二選一的情況，如果同時選擇，只會出現“詢價”、“加入詢價藍”按鈕；

支持上/下一個：若選擇是，那麼每個產品產品詳情頁面就會出現上一個產品和下一個產品的文字鏈接。

圖片放大鏡功能：如選擇開啟，則鼠標觸摸到產品主圖上圖片會放大，若選擇關閉，則圖片不會有變化。
開啟分享功能：若選擇開啟，則可將產品分享至社交軟件；若選擇關閉，則此處不支持分享（如上面的圖所示）。
圖片大小：這裡指產品主圖圖片大小，根據需要來選擇，若開啟了放大鏡，需要圖片的寬或高大於此處的圖片大小，圖片放大鏡功能才會生效。

上/下一個排序方式：有按修改日期降序（最新修改的在最前面）、按修改日期升序（最新修改的在最後面）、按添加日期降序（最新添加的在最前面）、按添加日期降序（最新添加的在最後面）這四種選項，如下圖所示：

風格：

展示樣式：有多種展示樣式供用戶選擇，如上圖所示；

產品屬性位置：可以選擇將產品屬性放在產品主圖下面或圖片右側。

是否顯示標籤卡選項：若選擇隱藏，則不可在頁面中看到標籤卡；若選擇顯示，則可在頁面中看到標籤卡，並可以對相關樣式進行設置；

支持設置的標籤卡樣式如下：

頁簽展示樣式：有4種頁簽展示樣式可供選擇，如下圖所示：

自定義頁簽展示樣式：可以選擇默認，也可以自定義，支持自定義以下內容：頁簽按鈕高度、頁簽字體大小、頁簽按鈕默認樣式、頁簽按鈕選中樣式，如下圖所示：

頁簽滾動懸浮：滾動頁面時，支持把頁簽設置為懸浮狀態：

按鈕樣式：有多種不同顏色和形式的按鈕樣式可供選擇，如下圖所示，這些顏色和按鈕樣式是固定的，不支持修改：

設置產品名稱樣式：產品詳情頁面上的產品名稱，支持自定義字體大小、行高、文字間距、對齊方式、文字風格、文字顏色，操作入口如下圖所示：

產品屬性名樣式：展示在產品詳情頁面的產品屬性名稱，支持單獨設置它的字體大小、行高、文字間距、文字風格、文字顏色：

產品屬性值樣式：支持單獨設置產品屬性值的文字大小、行高、文字間距、文字風格、文字顏色：

產品屬性名和屬性值排版樣式：兩列左左、兩列右左、緊湊：

設置好產品詳情內容及風格後，點擊右下方“保存”按鈕，保存所設置的內容。



3、保存、預覽、發布

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

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

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