如何在Shopify集合页将缺货产品置于分页最后一页？

可以用Liquid实现这个需求，核心思路是先拆分有货/缺货产品，再根据当前页码判断该页应该展示的产品范围——前N页只展示有货产品，最后一页展示剩余有货产品+所有缺货产品。

具体实现步骤 #

1. 提前筛选并计算产品数据
   在main-collection-product-grid.liquid开头，先拆分有货、缺货产品，同时计算关键分页参数：

{% comment %} 筛选有货/缺货产品 {% endcomment %}
{% assign in_stock_products = collection.products | where: 'available', true %}
{% assign out_of_stock_products = collection.products | where: 'available', false %}

{% comment %} 分页参数配置 {% endcomment %}
{% assign products_per_page = section.settings.products_per_page | default: 10 %}
{% assign total_in_stock = in_stock_products.size %}
{% assign total_products = total_in_stock | plus: out_of_stock_products.size %}
{% assign total_pages = total_products | divided_by: products_per_page | ceil %}
{% assign current_page = paginate.current_page %}
{% assign in_stock_pages = total_in_stock | divided_by: products_per_page | ceil %}

2. 根据当前页码渲染对应产品
   替换原来的产品循环代码，用以下逻辑判断：

• 当前页码 ≤ 有货产品所需页数：只渲染对应页码的有货产品
• 当前页码是最后一页：渲染剩余有货产品 + 所有缺货产品

{% comment %} 渲染当前页产品 {% endcomment %}
<div class="product-grid">
  {% if current_page <= in_stock_pages %}
    {% comment %} 前N页：只显示有货产品 {% endcomment %}
    {% assign start_index = (current_page - 1) * products_per_page %}
    {% assign end_index = current_page * products_per_page %}
    {% if end_index > total_in_stock %}
      {% assign end_index = total_in_stock %}
    {% endif %}
    
    {% for product in in_stock_products limit: products_per_page offset: start_index %}
      {% render 'product-card', product: product %}
    {% endfor %}
  {% elsif current_page == total_pages %}
    {% comment %} 最后一页：剩余有货 + 所有缺货 {% endcomment %}
    {% assign remaining_in_stock = total_in_stock | modulo: products_per_page %}
    {% if remaining_in_stock == 0 %}
      {% assign remaining_in_stock = products_per_page %}
    {% endif %}
    {% assign start_index = total_in_stock | minus: remaining_in_stock %}
    
    {% comment %} 先渲染剩余有货产品 {% endcomment %}
    {% for product in in_stock_products limit: remaining_in_stock offset: start_index %}
      {% render 'product-card', product: product %}
    {% endfor %}
    
    {% comment %} 再渲染所有缺货产品 {% endcomment %}
    {% for product in out_of_stock_products %}
      {% render 'product-card', product: product %}
    {% endfor %}
  {% endif %}
</div>

3. 验证分页逻辑
   以你提到的场景测试：50个产品（45个有货，5个缺货），每页10个：

• 有货产品需要5页（前4页各10个，第5页5个）
• 第5页同时展示5个剩余有货 + 5个缺货，刚好填满10个位置，符合需求

注意事项 #

• 确保section.settings.products_per_page与你的主题分页配置一致，或者直接替换为固定数值（如10）
• 如果主题有自定义的分页组件，需要确保分页总数total_pages与实际展示的页数匹配
• 测试时注意产品库存状态的变动，确保筛选逻辑准确

内容的提问来源于stack exchange，提问作者Al Amin Khan