Shopify主题开发：过滤指定标签产品ID列表时移除空条目及优化分页问题

我完全懂你遇到的这个头疼问题——Shopify的Liquid分页确实是基于原始集合的大小，哪怕你在前端筛选出了少数产品，分页还是会跟着原集合的总数走，导致一堆空页面。既然官方说这是预期行为，那我们就得换个思路来解决，下面给你两个可行的方案：

方案一：前端JavaScript处理（无App门槛） #

这个方法不需要开发Shopify App，只需要在主题里加一点JS代码，把筛选后的产品ID先收集起来，然后自己实现前端分页逻辑，彻底绕开Liquid的原生分页。

具体实现步骤： #

1. 首先在Liquid中把所有符合标签条件的产品ID存入一个JavaScript数组：

<script>
  // 收集所有带'sometag'标签的产品ID
  const filteredProductIds = [
    {% paginate collections['somecollection'].products by 250 %} {# 尽量一次拉取更多产品，减少分页请求 #}
      {% for product in collections['somecollection'].products %}
        {% if product.tags contains 'sometag' %}
          {{ product.id }}{% unless forloop.last %},{% endunless %}
        {% endif %}
      {% endfor %}
    {% endpaginate %}
  ];
  const itemsPerPage = 50; {# 你想要每页显示的数量 #}
  let currentPage = 1;

  // 渲染当前页的产品ID
  function renderCurrentPage() {
    const startIndex = (currentPage - 1) * itemsPerPage;
    const endIndex = startIndex + itemsPerPage;
    const currentItems = filteredProductIds.slice(startIndex, endIndex);
    
    // 清空之前的内容，渲染当前页的ID
    const productIdContainer = document.getElementById('product-ids-container');
    productIdContainer.innerHTML = currentItems.map(id => `<div>${id}</div>`).join('');
    
    // 更新分页按钮状态
    updatePagination();
  }

  // 更新分页按钮
  function updatePagination() {
    const totalPages = Math.ceil(filteredProductIds.length / itemsPerPage);
    const paginationContainer = document.getElementById('pagination-container');
    
    // 清空旧的分页按钮
    paginationContainer.innerHTML = '';
    
    // 添加上一页按钮
    if (currentPage > 1) {
      const prevBtn = document.createElement('button');
      prevBtn.textContent = '上一页';
      prevBtn.addEventListener('click', () => {
        currentPage--;
        renderCurrentPage();
      });
      paginationContainer.appendChild(prevBtn);
    }
    
    // 添加页码按钮
    for (let i = 1; i <= totalPages; i++) {
      const pageBtn = document.createElement('button');
      pageBtn.textContent = i;
      if (i === currentPage) {
        pageBtn.classList.add('active');
      }
      pageBtn.addEventListener('click', () => {
        currentPage = i;
        renderCurrentPage();
      });
      paginationContainer.appendChild(pageBtn);
    }
    
    // 添加下一页按钮
    if (currentPage < totalPages) {
      const nextBtn = document.createElement('button');
      nextBtn.textContent = '下一页';
      nextBtn.addEventListener('click', () => {
        currentPage++;
        renderCurrentPage();
      });
      paginationContainer.appendChild(nextBtn);
    }
  }

  // 页面加载时渲染第一页
  document.addEventListener('DOMContentLoaded', renderCurrentPage);
</script>

<!-- 用来显示产品ID的容器 -->
<div id="product-ids-container"></div>
<!-- 分页按钮容器 -->
<div id="pagination-container"></div>

这里注意把collections['somecollection']换成你的实际集合，itemsPerPage可以根据需求调整。另外，把分页的by值设大一点（比如250，Shopify最大允许250），这样可以减少服务器请求的次数，一次性拉取更多产品。

方案二：开发Shopify App（适合大量产品场景） #

如果你的产品数量特别多（比如几千个），前端一次性拉取所有产品ID可能会有性能问题，这时候最好用Shopify API来实现后端筛选和分页：

1. 开发一个简单的Shopify App，调用Shopify的REST API或GraphQL API，直接查询带sometag标签的产品：
   • REST API示例：GET /admin/api/2024-07/products.json?tag=sometag&limit=50&page=1
   • GraphQL API示例：

     query {
       products(first: 50, query: "tag:sometag", after: "cursor_value") {
         edges {
           node {
             id
           }
         }
         pageInfo {
           hasNextPage
           endCursor
         }
       }
     }
     

2. 在App中处理分页逻辑，然后把筛选后的产品ID和分页数据返回给主题页面，或者直接在App的页面中展示结果。

这个方法的优势是分页完全基于筛选后的产品数量，不会出现空页面，而且性能更好，适合产品量很大的店铺。

总结 #

如果只是小量产品，方案一的前端JS方法足够简单好用；如果产品量很大，或者需要更稳定的性能，方案二的App方法更合适。两种方法都能彻底解决空分页页面的问题。

内容的提问来源于stack exchange，提问作者hyperflux7