一、什么是產(chǎn)品搜索組件？

產(chǎn)品搜索組件是一個產(chǎn)品搜索框模塊，在此搜索框輸入搜索關(guān)鍵詞可以快速查找與該關(guān)鍵詞相匹配的產(chǎn)品，可以實(shí)現(xiàn)對產(chǎn)品名稱、產(chǎn)品關(guān)鍵詞、產(chǎn)品型號、產(chǎn)品摘要、產(chǎn)品描述（第一組）的模糊匹配搜索。產(chǎn)品搜索組件一般會放在產(chǎn)品中心頁面或者放在網(wǎng)站頁頭醒目的位置，這樣每個頁面都會出現(xiàn)，訪客在每個頁面都可以快速搜索產(chǎn)品。
前臺展示效果舉例：

二、使用產(chǎn)品搜索組件實(shí)現(xiàn)搜索功能，需要符合哪些條件？

產(chǎn)品搜索組件可以實(shí)現(xiàn)對產(chǎn)品名稱、產(chǎn)品關(guān)鍵詞、產(chǎn)品型號、產(chǎn)品摘要、產(chǎn)品描述（支持5組產(chǎn)品描述，只有第一組參與搜索）的模糊匹配搜索。要實(shí)現(xiàn)成功的搜索結(jié)果，需要同時符合以下兩個條件：
1、系統(tǒng)的產(chǎn)品總列表頁面中的產(chǎn)品列表組件需要顯示所有的產(chǎn)品分類下的產(chǎn)品；
系統(tǒng)的產(chǎn)品總列表頁面是指下圖所示的“Products”頁面：

產(chǎn)品列表組件需要顯示所有的產(chǎn)品分類下的產(chǎn)品，見下圖：

2、產(chǎn)品需要是上架狀態(tài)；

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

如果你的頁面上已經(jīng)有這個組件了，就不需要再添加，直接根據(jù)需要進(jìn)行相關(guān)操作就可以（具體操作見下文所述）；
如果你的頁面上需要這個組件，但是還沒有添加，就需要先添加產(chǎn)品描述組件了；
怎么判斷頁面上有沒有這個組件？單擊查看如何查看某一塊內(nèi)容是使用什么組件制作的？

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

2、如何設(shè)置產(chǎn)品搜索組件？
需要進(jìn)入產(chǎn)品搜索組件的“設(shè)置”功能去設(shè)置，進(jìn)入組件的“設(shè)置”分兩種情況：
1）此組件已經(jīng)添加好的情況：進(jìn)入所有這種情況下組件的設(shè)置，方法都是一樣的，可以參考這個攻略：如何進(jìn)入組件的設(shè)置項(xiàng)？
2）新添加的組件情況：在添加此組件時會彈出這個組件的設(shè)置窗口。

在彈出的設(shè)置產(chǎn)品搜索窗口，可以設(shè)置產(chǎn)品搜索組件的內(nèi)容、風(fēng)格。

內(nèi)容
組件標(biāo)題：在此可以輸入這個組件的標(biāo)題，輸入則顯示，不輸入此字段也不會顯示；
預(yù)留關(guān)鍵字：在此可以輸入預(yù)留關(guān)鍵字，展示的位置如圖所示；
推薦關(guān)鍵字：可以設(shè)置顯示推薦的關(guān)鍵字，展示的位置如下圖所示；

風(fēng)格

選擇搜索框風(fēng)格：在此可以選擇適合的搜索框風(fēng)格，單擊“展開設(shè)置”之后，可以設(shè)置如下內(nèi)容：
進(jìn)一步設(shè)置搜索框風(fēng)格：支持設(shè)置搜索框的高度和圓角弧度；
設(shè)置搜索輸入框樣式：可以設(shè)置文字大小、文字顏色、背景顏色、邊框?qū)挾?、邊框顏色?br/>設(shè)置搜索按鈕樣式：可以設(shè)置圖標(biāo)大小、圖標(biāo)顏色、背景顏色；

選擇關(guān)鍵詞顯示位置：如果在內(nèi)容里顯示了推薦關(guān)鍵字，在此可以設(shè)置關(guān)鍵詞顯示的位置，居左、居右、居上、居下、下拉框；
設(shè)置組件焦點(diǎn)狀態(tài)樣式：指的是用戶的光標(biāo)焦點(diǎn)在搜索框內(nèi)時的樣式，可以自定義下面的內(nèi)容：
設(shè)置搜索輸入框樣式：文字顏色、背景顏色、邊框顏色；
設(shè)置搜索按鈕樣式：圖標(biāo)顏色、背景顏色；

設(shè)置好以上內(nèi)容之后，要單擊“保存”按鈕才可以生效哦。

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

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

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

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

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

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