shopex4.85常用挂件教程——搜索框挂件详解

接下来将详细讲解一系列做独立网店需要的常用挂件。今天要讲的是最常用的挂件之一搜索框挂件，也就是搜索商品挂件。在一个独立网店中，搜索是起到很重要的作用，比如我去淘宝买东西，一般来说都是直接搜索商品名来筛选商品的。能够迅速的让客户筛选出自己想要的商品，提高客户的购物体验。

1 挂件路径：./plugins/widgets/search 文件夹下。

2 后台可视化添加挂件路径：添加版块>系统相关>商品搜索。

3 后台挂件选项（如图）

版块标题（使用版块边框后显示的标题名字）

版块模板（挂件模板，可以将自己做的模板替换原有的挂件，展现更多多样漂亮的挂件）

版块边框（对于重复性较多的挂件边框可以做挂件边框用于重复调用）

版块ID：（给该挂件最外层div上加上id）

版块className:(给该挂件最外层div上加上class)

搜索是否显示价格区间：（勾选则有价格区间的输入框）

4 用编辑器打开./plugins/widgets/search/default.html 查看代码。

当然我们可以做的复杂点，比如替换下输入框的value值这样的效果类似目前的京东搜索框。

当然也可以学习下其他的展示效果，例如讲搜索框的默认值设置为：请输入商品名，点击搜索框，文字（请输入商品名）消失，这种购物体验更加不错。

参考代码如下，可以尝试下学习。靠自己也能打造更漂亮的搜索框。