shopify 预测搜索 ajax

shopify 预测搜索 ajax

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

1 介绍下接口

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

介绍的比较清晰

url /search/suggest.json
type get

最常用的是4个参数

Query parameterTypeDescription
q (required)StringThe search query.
resources (required)HashRequests resources results for the given query, based on the type and limit fields.
type (required)Comma-separated valuesSpecifies the type of results requested. Valid values: product, page, article, collection.
limit (optional)intLimits 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了
具体的页面样式需要自己设计编写

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值