Shopify 液体中的分页变体收集

在我的收藏模板中，我展示了产品变体（如果适用）和产品（如果不适用）。这非常有效，因为似乎不可能分页。我曾尝试创建一个定制的变体/产品数组，但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对收藏的硬性限制。

只有liquid是无法做到这一点的

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

所以你能做的不多

其中一种方法是将paginate限制改写为一些疯狂的内容，以显示所有产品，并创建一个JS paginate，而不是液体paginate

例如：

{% 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 %}

但是，如果您有很多产品，后端处理请求的加载时间将非常缓慢

---

另一个选项是使用StoreFrontAPI创建GraphQL查询，并通过JS填充页面。但对于这样的事情来说，这可能是一种过度的杀伤力

---

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

---

---

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

仅使用liquid无法实现这一点

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

所以你能做的不多

其中一种方法是将paginate限制改写为一些疯狂的内容，以显示所有产品，并创建一个JS paginate，而不是液体paginate

例如：

{% 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 %}

但是，如果您有很多产品，后端处理请求的加载时间将非常缓慢

---

另一个选项是使用StoreFrontAPI创建GraphQL查询，并通过JS填充页面。但对于这样的事情来说，这可能是一种过度的杀伤力

---

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

---

---

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

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

最后，成功：

{% 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 %}

{%end>maxSize%}
{%end除非%}

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

最后，成功：

{% 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 %}

{%end>maxSize%}
{%end除非%}

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