接下來將詳細講解一系列做獨立網店需要的常用掛件。今天要講的是最常用的掛件之一搜索框掛件，也就是搜索商品掛件。在一個獨立網店中，搜索是起到很重要的作用，比如我去淘寶買東西，一般來說都是直接搜索商品名來篩選商品的。能夠迅速的讓客戶篩選出自己想要的商品，提高客戶的購物體驗。

1 掛件路徑：./plugins/widgets/search 文件夾下。

2 后臺可視化添加掛件路徑：添加版塊>系統相關>商品搜索。

3 后臺掛件選項（如圖）

版塊標題（使用版塊邊框后顯示的標題名字）

版塊模板（掛件模板，可以將自己做的模板替換原有的掛件，展現更多多樣漂亮的掛件）

版塊邊框（對于重復性較多的掛件邊框可以做掛件邊框用于重復調用）

版塊ID：（給該掛件最外層div上加上id）

版塊className:(給該掛件最外層div上加上class)

搜索是否顯示價格區間：（勾選則有價格區間的輸入框）

4 用編輯器打開./plugins/widgets/search/default.html 查看代碼。

當然我們可以做的復雜點，比如替換下輸入框的value值這樣的效果類似目前的京東搜索框。

當然也可以學習下其他的展示效果，例如講搜索框的默認值設置為：請輸入商品名，點擊搜索框，文字（請輸入商品名）消失，這種購物體驗更加不錯。

參考代碼如下，可以嘗試下學習?？孔约阂材艽蛟旄恋乃阉骺?。