如何使用產品搜索組件？

一、什麼是產品搜索組件？

產品搜索組件是一個產品搜索框模塊，在此搜索框輸入搜索關鍵詞可以快速查找與該關鍵詞相匹配的產品，可以實現對產品名稱、產品關鍵詞、產品型號、產品摘要、產品描述（第一組）的模糊匹配搜索。產品搜索組件一般會放在產品中心頁面或者放在網站頁頭醒目的位置，這樣每個頁面都會出現，訪客在每個頁面都可以快速搜索產品。

前台展示效果舉例：

二、使用產品搜索組件實現搜索功能，需要符合哪些條件？

產品搜索組件可以實現對產品名稱、產品關鍵詞、產品型號、產品摘要、產品描述（支持5組產品描述，只有第一組參與搜索）的模糊匹配搜索。要實現成功的搜索結果，需要同時符合以下兩個條件：

1、系統的產品總列表頁面中的產品列表組件需要顯示所有的產品分類下的產品；

系統的產品總列表頁面是指下圖所示的“Products”頁面：

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

--》

2、產品需要是上架狀態；

三、如何使用產品搜索組件？

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

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

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

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

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

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

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

在彈出的設置產品搜索窗口，可以設置產品搜索組件的內容、風格。

內容

組件標題：在此可以輸入這個組件的標題，輸入則顯示，不輸入此字段也不會顯示；
預留關鍵字：在此可以輸入預留關鍵字，展示的位置如圖所示；
推薦關鍵字：可以設置顯示推薦的關鍵字，展示的位置如下圖所示；



風格

選擇搜索框風格：在此可以選擇適合的搜索框風格，單擊“展開設置”之後，可以設置如下內容：
進一步設置搜索框風格：支持設置搜索框的高度和圓角弧度；
設置搜索輸入框樣式：可以設置文字大小、文字顏色、背景顏色、邊框寬度、邊框顏色；
設置搜索按鈕樣式：可以設置圖標大小、圖標顏色、背景顏色；

選擇關鍵詞顯示位置：如果在內容裡顯示了推薦關鍵字，在此可以設置關鍵詞顯示的位置，居左、居右、居上、居下、下拉框；
設置組件焦點狀態樣式：指的是用戶的光標焦點在搜索框內時的樣式，可以自定義下面的內容：

設置搜索輸入框樣式：文字顏色、背景顏色、邊框顏色；

設置搜索按鈕樣式：圖標顏色、背景顏色；

設置好以上內容之後，要單擊“保存”按鈕才可以生效哦。

3、保存、預覽、發布

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

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

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

四、功能優化

1、“產品搜索”組件增加下拉選擇搜索範圍功能，同時也增加輸入關鍵詞實時推薦產品功能；(2018-11-13優化)

【應用場景】原有產品搜索組件的搜索範圍為多個字段聯合搜索，包含的字段：產品名稱、產品關鍵詞、產品型號、產品摘要、產品描述，但是這樣會存在搜索不精準的問題，比如某個客戶就想搜索“型號”字段中包含搜索詞的產品，但是很有可能會搜出一些相關度不那麼高的產品。為了解決此問題，我們調整了產品搜索組件，當光標定位到產品輸入框時，會自動下拉展示搜索範圍，用戶可以根據自己的需求靈活選擇搜索的字段，這樣可以讓搜索範圍更精準。同時，也增加了搜索時推薦產品功能，最多推薦10個包含搜索詞的產品，更方便訪客直接訪問產品。

【應用效果】當光標定位到產品搜索框時，下拉列表展示搜索範圍，如下截圖所示效果：

2、增加智能推薦產品功能，如下截圖所示：

3、“產品搜索”組件新增一種搜索框向左展開的搜索風格；(2019-10-15優化)

【操作指導】進入“編輯網站”界面，添加“產品組件”－“產品搜索”組件，切換至“風格”界面選擇第7種風格，如下圖所示：

【應用效果】如下圖所示：