shopify 预测搜索 ajax

shopify 模糊搜索 这个本身自带API接口 所以我们直接利用接口实现下

1 介绍下接口

官方文档 https://shopify.dev/docs/themes/ajax-api/reference/predictive-search

介绍的比较清晰

url /search/suggest.json
type get

最常用的是4个参数

Query parameter	Type	Description
q (required)	String	The search query.
resources (required)	Hash	Requests resources results for the given query, based on the type and limit fields.
type (required)	Comma-separated values	Specifies the type of results requested. Valid values: product, page, article, collection.
limit (optional)	int	Limits the number of results returned. Default: 10. Min: 1. Max: 10.

limit 这个参数可以忽略 因为默认是10 最大也是10 都在我们的范围内

所以基本链接就是

GET /search/suggest.json?q=&resources[type]=product

问题

数量问题
limit 最大10个
如果我们 type = product,page,article,collection
会导致最终的结果只有10个
如果 product的数据 在10个之后 那么就推荐不错产品了

所以建议是

type = product 一个请求
type = page,article 一个请求
这样数据可以更完整

返回的数据结构

不同的type 结构也不同
详细可见 点击此处

2 进阶

如何通过接口直接返回html呢？？

新建模板
Add a new template
命名 search.ajax.liquid

页面头部写入

{% layout none %}
12312

这样就是独立的代码块 不会走theme.liquid

访问链接
/search?view=ajax
这样写的好处是 数据共享 SAErch页面的数据 页面展示可以按照我们自己的样式

访问链接示例
/search?view=ajax&type=product&q=q
/search?view=ajax&type=article,page&q=q

这样我们通过链接就可以获取到返回的html了
具体的页面样式需要自己设计编写