如何使用产品搜索组件？

一、什么是产品搜索组件？

产品搜索组件是一个产品搜索框模块，在此搜索框输入搜索关键词可以快速查找与该关键词相匹配的产品，可以实现对产品名称、产品关键词、产品型号、产品摘要、产品描述（第一组）的模糊匹配搜索。产品搜索组件一般会放在产品中心页面或者放在网站页头醒目的位置，这样每个页面都会出现，访客在每个页面都可以快速搜索产品。

前台展示效果举例：

二、使用产品搜索组件实现搜索功能，需要符合哪些条件？

产品搜索组件可以实现对产品名称、产品关键词、产品型号、产品摘要、产品描述（支持5组产品描述，只有第一组参与搜索）的模糊匹配搜索。要实现成功的搜索结果，需要同时符合以下两个条件：

1、系统的产品总列表页面中的产品列表组件需要显示所有的产品分类下的产品；

系统的产品总列表页面是指下图所示的“Products”页面：

产品列表组件需要显示所有的产品分类下的产品，见下图：

--》

2、产品需要是上架状态；

三、如何使用产品搜索组件？

如果你的页面上已经有这个组件了，就不需要再添加，直接根据需要进行相关操作就可以（具体操作见下文所述）；

如果你的页面上需要这个组件，但是还没有添加，就需要先添加产品描述组件了；

怎么判断页面上有没有这个组件？单击查看如何查看某一块内容是使用什么组件制作的？

1、如何添加产品搜索组件？
在页面上添加组件的方法都是一样的，单击查看如何添加组件？，要添加的组件名称为“产品搜索”，如下图所示：

2、如何设置产品搜索组件？
需要进入产品搜索组件的“设置”功能去设置，进入组件的“设置”分两种情况：

1）此组件已经添加好的情况：进入所有这种情况下组件的设置，方法都是一样的，可以参考这个攻略：如何进入组件的设置项？

2）新添加的组件情况：在添加此组件时会弹出这个组件的设置窗口。

在弹出的设置产品搜索窗口，可以设置产品搜索组件的内容、风格。

内容

组件标题：在此可以输入这个组件的标题，输入则显示，不输入此字段也不会显示；
预留关键字：在此可以输入预留关键字，展示的位置如图所示；
推荐关键字：可以设置显示推荐的关键字，展示的位置如下图所示；



风格

选择搜索框风格：在此可以选择适合的搜索框风格，单击“展开设置”之后，可以设置如下内容：
进一步设置搜索框风格：支持设置搜索框的高度和圆角弧度；
设置搜索输入框样式：可以设置文字大小、文字颜色、背景颜色、边框宽度、边框颜色；
设置搜索按钮样式：可以设置图标大小、图标颜色、背景颜色；

选择关键词显示位置：如果在内容里显示了推荐关键字，在此可以设置关键词显示的位置，居左、居右、居上、居下、下拉框；
设置组件焦点状态样式：指的是用户的光标焦点在搜索框内时的样式，可以自定义下面的内容：

设置搜索输入框样式：文字颜色、背景颜色、边框颜色；

设置搜索按钮样式：图标颜色、背景颜色；

设置好以上内容之后，要单击“保存”按钮才可以生效哦。

3、保存、预览、发布

设置好以上内容以后要单击页面右上角的“保存”按钮，目的是把此修改保存到网站后台；

然后可以单击“预览”按钮查看不同终端下展示的效果，如果不合适可以到后台再做修改；

如果需要让访客也看到，需要单击页面右上角的“发布”按钮，发布之后稍等两分钟左右即可看网站前台展示效果。

四、功能优化

1、“产品搜索”组件增加下拉选择搜索范围功能，同时也增加输入关键词实时推荐产品功能；(2018-11-13优化)

【应用场景】原有产品搜索组件的搜索范围为多个字段联合搜索，包含的字段：产品名称、产品关键词、产品型号、产品摘要、产品描述，但是这样会存在搜索不精准的问题，比如某个客户就想搜索“型号”字段中包含搜索词的产品，但是很有可能会搜出一些相关度不那么高的产品。为了解决此问题，我们调整了产品搜索组件，当光标定位到产品输入框时，会自动下拉展示搜索范围，用户可以根据自己的需求灵活选择搜索的字段，这样可以让搜索范围更精准。同时，也增加了搜索时推荐产品功能，最多推荐10个包含搜索词的产品，更方便访客直接访问产品。

【应用效果】当光标定位到产品搜索框时，下拉列表展示搜索范围，如下截图所示效果：

2、增加智能推荐产品功能，如下截图所示：

3、“产品搜索”组件新增一种搜索框向左展开的搜索风格；(2019-10-15优化)

【操作指导】进入“编辑网站”界面，添加“产品组件”－“产品搜索”组件，切换至“风格”界面选择第7种风格，如下图所示：

【应用效果】如下图所示：