一、什么是產(chǎn)品詳情組件？

產(chǎn)品詳情組件是一個(gè)根據(jù)規(guī)則自動(dòng)調(diào)取不同產(chǎn)品詳情內(nèi)容的模塊。產(chǎn)品詳情組件通常被添加在系統(tǒng)頁(yè)面或自定義頁(yè)面的產(chǎn)品詳情頁(yè)面，該組件會(huì)自動(dòng)根據(jù)傳入的產(chǎn)品id調(diào)用該產(chǎn)品下的產(chǎn)品詳細(xì)數(shù)據(jù)，比如產(chǎn)品名稱(chēng)、產(chǎn)品圖片、產(chǎn)品分享、產(chǎn)品屬性、產(chǎn)品規(guī)格、產(chǎn)品詢(xún)價(jià)/加入詢(xún)價(jià)籃/購(gòu)買(mǎi)/加入購(gòu)物車(chē)、產(chǎn)品描述等，同后臺(tái)內(nèi)容管理中的產(chǎn)品系統(tǒng)的產(chǎn)品數(shù)據(jù)自動(dòng)匹配對(duì)應(yīng)。產(chǎn)品詳情頁(yè)面是所有產(chǎn)品頁(yè)面的通用模板，頁(yè)面上的組件配置和頁(yè)面結(jié)構(gòu)是一樣的，但是產(chǎn)品組件的數(shù)據(jù)會(huì)動(dòng)態(tài)讀取。

二、如何使用產(chǎn)品詳情組件？
如果你的頁(yè)面上已經(jīng)有這個(gè)組件了，就不需要再添加，直接根據(jù)需要進(jìn)行相關(guān)操作就可以（具體操作見(jiàn)下文所述）；
如果你的頁(yè)面上需要這個(gè)組件，但是還沒(méi)有添加，就需要先添加產(chǎn)品詳情組件了；
請(qǐng)注意，產(chǎn)品詳情組件支持添加在系統(tǒng)頁(yè)面或者自定義頁(yè)面的產(chǎn)品詳情頁(yè)面，其它頁(yè)面是不支持添加的。
怎么判斷頁(yè)面上有沒(méi)有這個(gè)組件？單擊查看如何查看某一塊內(nèi)容是使用什么組件制作的？

1、如何添加產(chǎn)品詳情組件？
1)支持添加產(chǎn)品詳情組件的頁(yè)面有系統(tǒng)頁(yè)面或自定義頁(yè)面的產(chǎn)品詳情頁(yè)面，以系統(tǒng)頁(yè)面的產(chǎn)品詳情頁(yè)面為例操作介紹：

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

2、如何設(shè)置產(chǎn)品詳情組件？

需要進(jìn)入產(chǎn)品詳情組件的“設(shè)置”功能去設(shè)置，進(jìn)入組件的“設(shè)置”分兩種情況：

1）此組件已經(jīng)添加好的情況：進(jìn)入所有這種情況下組件的設(shè)置，方法都是一樣的，可以參考這個(gè)攻略：如何進(jìn)入組件的設(shè)置項(xiàng)？
2）新添加的組件情況：在添加此組件時(shí)會(huì)彈出這個(gè)組件的設(shè)置窗口。
在彈出的設(shè)置產(chǎn)品詳情窗口，可以設(shè)置產(chǎn)品詳情組件的內(nèi)容和風(fēng)格。

內(nèi)容：

組件標(biāo)題：根據(jù)需要可以輸入組件標(biāo)題，若不輸入，標(biāo)題也不會(huì)顯示 ；
“詢(xún)價(jià)”功能：若選擇開(kāi)啟，則產(chǎn)品詳情頁(yè)面中會(huì)顯示詢(xún)價(jià)按鈕；若選擇關(guān)閉，則產(chǎn)品詳情中不會(huì)顯示詢(xún)價(jià)按鈕（如上圖所示）；
"點(diǎn)擊詢(xún)價(jià)交互類(lèi)型"：支持彈出框形式的詢(xún)價(jià)表單，此形式比“跳轉(zhuǎn)到新頁(yè)面”簡(jiǎn)化了一層頁(yè)面跳轉(zhuǎn)，喜歡這種交互的用戶(hù)歡迎選擇；
“加入詢(xún)價(jià)籃”功能：若選擇開(kāi)啟，則產(chǎn)品詳情中會(huì)顯示加入詢(xún)價(jià)籃按鈕；若選擇關(guān)閉，則產(chǎn)品詳情中不會(huì)顯示加入詢(xún)價(jià)籃按鈕（如上圖所示）；
彈出框形式示例如下：

“下單/購(gòu)買(mǎi)”功能：若開(kāi)啟此功能，在產(chǎn)品詳情頁(yè)面會(huì)出現(xiàn)“立即購(gòu)買(mǎi)”按鈕（如下圖所示）；
“加入購(gòu)物車(chē)”功能：若開(kāi)啟在產(chǎn)品詳情頁(yè)面會(huì)出現(xiàn)“加入購(gòu)物車(chē)”按鈕（如下圖所示）；
“下單/購(gòu)買(mǎi)”、“加入購(gòu)物車(chē)”功能與上面的“詢(xún)價(jià)功能“、”加入詢(xún)價(jià)藍(lán)功能”是二選一的情況，如果同時(shí)選擇，只會(huì)出現(xiàn)“詢(xún)價(jià)”、“加入詢(xún)價(jià)藍(lán)”按鈕；

支持上/下一個(gè)：若選擇是，那么每個(gè)產(chǎn)品產(chǎn)品詳情頁(yè)面就會(huì)出現(xiàn)上一個(gè)產(chǎn)品和下一個(gè)產(chǎn)品的文字鏈接。
圖片放大鏡功能：如選擇開(kāi)啟，則鼠標(biāo)觸摸到產(chǎn)品主圖上圖片會(huì)放大，若選擇關(guān)閉，則圖片不會(huì)有變化。
開(kāi)啟分享功能：若選擇開(kāi)啟，則可將產(chǎn)品分享至社交軟件；若選擇關(guān)閉，則此處不支持分享（如上面的圖所示）。
圖片大?。哼@里指產(chǎn)品主圖圖片大小，根據(jù)需要來(lái)選擇，若開(kāi)啟了放大鏡，需要圖片的寬或高大于此處的圖片大小，圖片放大鏡功能才會(huì)生效。

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

風(fēng)格：

展示樣式：有多種展示樣式供用戶(hù)選擇，如上圖所示；
產(chǎn)品屬性位置：可以選擇將產(chǎn)品屬性放在產(chǎn)品主圖下面或圖片右側(cè)。

是否顯示標(biāo)簽卡選項(xiàng)：若選擇隱藏，則不可在頁(yè)面中看到標(biāo)簽卡；若選擇顯示，則可在頁(yè)面中看到標(biāo)簽卡，并可以對(duì)相關(guān)樣式進(jìn)行設(shè)置；
支持設(shè)置的標(biāo)簽卡樣式如下：
頁(yè)簽展示樣式：有4種頁(yè)簽展示樣式可供選擇，如下圖所示：

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

頁(yè)簽滾動(dòng)懸浮：滾動(dòng)頁(yè)面時(shí)，支持把頁(yè)簽設(shè)置為懸浮狀態(tài)：

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

設(shè)置產(chǎn)品名稱(chēng)樣式：產(chǎn)品詳情頁(yè)面上的產(chǎn)品名稱(chēng)，支持自定義字體大小、行高、文字間距、對(duì)齊方式、文字風(fēng)格、文字顏色，操作入口如下圖所示：

產(chǎn)品屬性名樣式：展示在產(chǎn)品詳情頁(yè)面的產(chǎn)品屬性名稱(chēng)，支持單獨(dú)設(shè)置它的字體大小、行高、文字間距、文字風(fēng)格、文字顏色：

產(chǎn)品屬性值樣式：支持單獨(dú)設(shè)置產(chǎn)品屬性值的文字大小、行高、文字間距、文字風(fēng)格、文字顏色：

產(chǎn)品屬性名和屬性值排版樣式：兩列左左、兩列右左、緊湊：

設(shè)置好產(chǎn)品詳情內(nèi)容及風(fēng)格后，點(diǎn)擊右下方“保存”按鈕，保存所設(shè)置的內(nèi)容。

3、保存、預(yù)覽、發(fā)布
設(shè)置好以上內(nèi)容以后要單擊頁(yè)面右上角的“保存”按鈕，目的是把此修改保存到網(wǎng)站后臺(tái)；
然后可以單擊“預(yù)覽”按鈕查看不同終端下展示的效果，如果不合適可以到后臺(tái)再做修改；
如果需要讓訪客也看到，需要單擊頁(yè)面右上角的“發(fā)布”按鈕，發(fā)布之后稍等兩分鐘左右即可看網(wǎng)站前臺(tái)展示效果。

根據(jù)需要還可以對(duì)這個(gè)組件做以下操作，具體請(qǐng)單擊以下鏈接了解。

4、單擊查看如何編輯組件的樣式？
組件的“編輯樣式”功能主要可以編輯此組件的以下內(nèi)容：組件背景、組件邊框、組件邊距、文字字號(hào)、顏色等，根據(jù)需求選擇使用；
組件的“編輯樣式”功能操作入口：所有組件的“編輯樣式”功能操作入口都是一樣的，具體操作方法請(qǐng)單擊查看如何編輯組件的樣式？

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

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

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



三、關(guān)于“產(chǎn)品詳情組件”的版本優(yōu)化內(nèi)容


1、2017年12月第一周，產(chǎn)品詳情、文章詳情組件的詳情描述中的圖片新增在手機(jī)端可點(diǎn)擊放大查看圖片的效果。

【應(yīng)用場(chǎng)景】在查看產(chǎn)品詳情時(shí)，當(dāng)用戶(hù)在手機(jī)端進(jìn)行瀏覽圖片時(shí)，會(huì)存在圖片太小不便于查看的問(wèn)題，因此需要支持當(dāng)用戶(hù)在手機(jī)端瀏覽時(shí)，圖片可供放大查看的效果。

【操作方式】在產(chǎn)品詳情組件、文章詳情組件的設(shè)置中找到“是否開(kāi)啟手機(jī)端圖片放大功能”，勾選“是”則開(kāi)啟此效果，開(kāi)啟后，在手機(jī)瀏覽時(shí)點(diǎn)擊圖片即可放大查看圖片，歡迎大家嘗鮮試用~

2.產(chǎn)品詳情組件新增放大鏡在圖片右側(cè)展示的風(fēng)格（同淘寶天貓效果）；   （2017-12-28優(yōu)化）
 （1）新增風(fēng)格的應(yīng)用場(chǎng)景：在瀏覽產(chǎn)品詳情圖片時(shí)，需要在右側(cè)支持對(duì)圖片放大進(jìn)行查看。
 （2）新增風(fēng)格的操作方法：

3.產(chǎn)品詳情組件新增兩套帶圓弧的按鈕樣式，支持可以自定義按鈕的顏色；     （2017-6-15優(yōu)化）
（1）新增功能應(yīng)用場(chǎng)景：支持自定義按鈕配色，更改后自動(dòng)更改按鈕默認(rèn)背景色和按鈕懸浮后的背景色和對(duì)應(yīng)的文字顏色；
（2）新增功能操作方法：

4.產(chǎn)品詳情組件的產(chǎn)品名稱(chēng)后面增加二維碼小圖標(biāo)；    （2017-1-12優(yōu)化）
（1）新增功能應(yīng)用場(chǎng)景：點(diǎn)擊展開(kāi)產(chǎn)品詳情的二維碼，方便大家在移動(dòng)設(shè)備上查看產(chǎn)品并通過(guò)移動(dòng)設(shè)備快速分享出去；
（2）新增功能應(yīng)用效果：