接下來(lái)將詳細(xì)講解一系列做獨(dú)立網(wǎng)店需要的常用掛件。今天要講的是最常用的掛件之一搜索框掛件，也就是搜索商品掛件。在一個(gè)獨(dú)立網(wǎng)店中，搜索是起到很重要的作用，比如我去淘寶買(mǎi)東西，一般來(lái)說(shuō)都是直接搜索商品名來(lái)篩選商品的。能夠迅速的讓客戶篩選出自己想要的商品，提高客戶的購(gòu)物體驗(yàn)。

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

2 后臺(tái)可視化添加掛件路徑：添加版塊>系統(tǒng)相關(guān)>商品搜索。

3 后臺(tái)掛件選項(xiàng)（如圖）

版塊標(biāo)題（使用版塊邊框后顯示的標(biāo)題名字）

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

版塊邊框（對(duì)于重復(fù)性較多的掛件邊框可以做掛件邊框用于重復(fù)調(diào)用）

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

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

搜索是否顯示價(jià)格區(qū)間：（勾選則有價(jià)格區(qū)間的輸入框）

4 用編輯器打開(kāi)./plugins/widgets/search/default.html 查看代碼。

當(dāng)然我們可以做的復(fù)雜點(diǎn)，比如替換下輸入框的value值這樣的效果類似目前的京東搜索框。

當(dāng)然也可以學(xué)習(xí)下其他的展示效果，例如講搜索框的默認(rèn)值設(shè)置為：請(qǐng)輸入商品名，點(diǎn)擊搜索框，文字（請(qǐng)輸入商品名）消失，這種購(gòu)物體驗(yàn)更加不錯(cuò)。

參考代碼如下，可以嘗試下學(xué)習(xí)。靠自己也能打造更漂亮的搜索框。