Shopify 主题与 Liquid

Shopify paginate 套在 for 里第二页空白

现象#

首页按系列分组展示商品,paginate 写在遍历 collections 的 for 内部,翻到第 2 页时整个区块消失,但页码还留在页面上。

原因#

  • paginate 必须包住要分页的数组输出,写在循环内会为每个集合各自算一次分页
  • 嵌套之后 paginate.pages 取到的是最后一次循环的分页信息
  • 循环变量与外层 paginate 对象重名,翻页参数被覆盖
  • 分页链接缺少 section 锚点,翻页后跳到了页面顶部之外的位置

处理步骤#

  1. 把 paginate 移到 for 外层,只包一个确定的数组,如 {% paginate collection.products by 24 %}
  2. 需要按系列分组时,先分页商品,再在循环内按 product.type 分组
  3. 页码用 {{ paginate | default_pagination }} 输出,不要自己拼 page 参数
  4. 翻页后需要回到原位置时,在链接末尾补上该 section 的锚点
  5. 打印 {{ paginate.pages }} 与 {{ paginate.current_page }},确认数值随翻页变化

验收标准#

第 2 页仍展示后续商品,页数等于商品总数除以每页条数向上取整;地址栏 page 参数与当前页一致。

本文由 风格技术 技术团队整理,适用于 Shopify 标准版与 Plus 店铺。Shopify 平台能力迭代较快,具体操作路径与字段以官方文档和店铺后台实际版本为准。