液体中的分页变体集合答案

【问题标题】：paginating variant collection in liquid液体中的分页变体集合
【发布时间】：2019-12-08 21:20:32
【问题描述】：

在我的集合模板中，如果适用，我将显示产品变体，如果不显示产品。这非常有效，因为它似乎不可能分页这一事实是安全的。我已经尝试创建一个自定义的变体/产品数组，但 paginate 不想与它有任何关系。

这是我目前使用的用于在网格中输出变体/产品的代码：

{% for product in collection.products %}
  {% if product.variants.size == 0 %} 
    {% include 'product-card-grid2', max_height: max_height %}
  {% else %}
    {% for variant in product.variants %}
      {% include 'product-card-grid2', max_height: max_height %}
    {% endfor %}
  {% endif %}
{% endfor %}

您如何对这样的内容进行分页？基本上我想要像优秀的 pimoroni.com 这样的东西。

在数组构造/操作方面，液体似乎异常僵硬。

我想另一种方法是将列表输出为 json，然后在 JS 中手动处理它，但如果可以避免，那就太好了。

一页可能显示 200，另一页可能显示 50。我想将其标准化为每页 20 - 也是为了避免达到 shopify 对收藏的硬性上限。

【问题讨论】：

标签： shopify liquid

【解决方案1】：

仅使用液体是无法做到这一点的。

您可以对产品进行分页，但变体会抛出逻辑。

所以你们能做的不多。

一种 hacky 方法是将分页限制覆盖为一些疯狂的东西以显示所有产品并创建一个 JS 分页而不是流动的分页。

例子：

{% paginate collection.products by 9999 %}
{% for product in collection.products %}
  {% if product.variants.size == 0 %} 
    {% include 'product-card-grid2', max_height: max_height %}
  {% else %}
    {% for variant in product.variants %}
      {% include 'product-card-grid2', max_height: max_height %}
    {% endfor %}
  {% endif %}
{% endfor %}
{% endpaginate %}

但是如果你有很多产品，加载时间会非常慢，后端处理请求。

另一种选择是使用 Storefront API 创建 GraphQL 查询并通过 JS 填充页面。但这对于这样的事情来说可能有点矫枉过正。

另一种选择是使用某种应用程序来提取变体并为您创建分页。（再次通过JS）

最后一个选项是向您的客户描述这一点，并且由于 Shopify 的限制，您没有一种简单/优化的方式来处理变体分页。

【讨论】：

感谢您的 ingisht；我得出了相同的结论，但看看shop.pimoroni.com/collections/…，他们设法通过下一个按钮一次在页面上加载 30 个变体。我已经强制 JS 关闭，它仍然可以正常加载。也许他们正在根据页面 nr 手动限制结果？
@Eirinn 似乎他们正在加载产品而不是变体。这就是为他们工作。（每个链接指向一个单独的产品页面，它不是变体页面）。更正它们也有变体，但不同页面上的数字不一样。 1 有 30 个，2 有 31 个，3 有 35 个
我想我设法让它工作了，但这是一种解决方法。首先，我创建一个包含产品所有变体的新数组。然后我从中生成我的产品卡。我使用变体 ID 进行反向查找以获取产品父级（获取名称和更多信息）。我现在正在做一个自定义分页，到目前为止似乎进展顺利。一旦我有什么东西我会回来报告（如果线索在这里为你未来的读者结束，给我发消息）。

【解决方案2】：

Concat 仅适用于数组。幸运的是，有办法解决这个问题。 Array 没有 slice 方法（只有字符串），所以我们也需要构造它。模数处理下溢/溢出。

终于成功了：

{% comment %}
    ------------------------------------------------------------------------------
    Consolidating the product list for later use.
    NOTE: It will probably cap over 50 products!!!!!!!!!!!!!!!!!!!!!!!!!!!
    Needs to be rewritten at some point to use page number to load only the needed
    products.
{% endcomment %}

{% assign productList = "" | split: "" %}
{% assign counter = 0 %}
{% assign variantLimit = 30 %}

{% for product in collection.products %}
  {% assign productList = productList | concat: product.variants %}
  {% assign counter = counter | plus: product.variants.size %}
{% endfor %}

{% assign maxSize = productList.size %}


{% assign start = current_page | minus: 1 | times: variantLimit %}
{% assign end = current_page | times: variantLimit | minus: 1 %}

{% if end > maxSize %}
  {% assign end = productList.size | modulo: variantLimit %}
{% endif %}

{% assign slice = "" | split: "" %}
{% for i in (start..end) %}
  {% assign temp = productList[i] | where: "available", true %}
  {% assign slice = slice | concat: temp %}
{% endfor %}

{% assign productList = slice %}

这就是产品循环

 {% for variant in productList %}
    {% include 'product-card-grid2', max_height: max_height %}
 {% endfor %}

还要记住下一个按钮

 {% unless end > maxSize %}
    <a href="?page={{current_page | plus: 1}}">Next Page</a>
 {% endunless %}

【讨论】：