时间戳

首页 > 解决方案 > 液体中的分页变体集合

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 之类的东西。

Liquid 在阵列构造/操作方面似乎异常严格。

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

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

标签： shopifyliquid

解决方案

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

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

所以你们能做的不多。

一种 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 的限制，您没有一种简单/优化的方式来处理变体分页。

推荐阅读