Shopify paginate 套在 for 里第二页空白
现象#
首页按系列分组展示商品,paginate 写在遍历 collections 的 for 内部,翻到第 2 页时整个区块消失,但页码还留在页面上。
原因#
- paginate 必须包住要分页的数组输出,写在循环内会为每个集合各自算一次分页
- 嵌套之后 paginate.pages 取到的是最后一次循环的分页信息
- 循环变量与外层 paginate 对象重名,翻页参数被覆盖
- 分页链接缺少 section 锚点,翻页后跳到了页面顶部之外的位置
处理步骤#
- 把 paginate 移到 for 外层,只包一个确定的数组,如
{% paginate collection.products by 24 %} - 需要按系列分组时,先分页商品,再在循环内按
product.type分组 - 页码用
{{ paginate | default_pagination }}输出,不要自己拼 page 参数 - 翻页后需要回到原位置时,在链接末尾补上该 section 的锚点
- 打印
{{ paginate.pages }}与{{ paginate.current_page }},确认数值随翻页变化
验收标准#
第 2 页仍展示后续商品,页数等于商品总数除以每页条数向上取整;地址栏 page 参数与当前页一致。
本文由 风格技术 技术团队整理,适用于 Shopify 标准版与 Plus 店铺。Shopify 平台能力迭代较快,具体操作路径与字段以官方文档和店铺后台实际版本为准。