Shopify：如何根据 collection 添加 class

Question

在客户主页上，他们希望 'all the products' 在底部列出加载更多按钮。

有四个类别，每个类别都有不同的颜色。我想按列出的日期顺序提取所有产品，并根据类别对产品应用 class。

目前我有

{% assign collection = collections.all %}
{% for product in collection.products %}
{% if collection.handle == 'clothing' %}
  <div class="theme-red overview-item">
{% elsif collection.handle == 'pictures' %}
  <div class="theme-green overview-item">
{% elsif collection.handle == 'posters' %}
  <div class="theme-blue overview-item">
{% elsif collection.handle == 'other' %}
  <div class="theme-beige overview-item">
{% else %}
  <div class="theme-none overview-item">
{% endif %}  
  ...
  </div>
{% endfor %}

目前接听电话是 theme-none，那是因为我正在呼叫 collections.all？

我如何获得显示的所有产品而不考虑 collection 然后应用按照上面的 if/else 语句做一些事情。

有什么想法，我试过 product.collections，collection.all_types 没有幸福。

Answer 1

您获得 theme-none 的原因是因为您的 if 语句检查集合的句柄是否为 'clothing'、'pictures' 等，但您已将集合设置为 collections.all 所以它永远不会匹配任何这些条件。

您要做的是检查当前产品是否在这些集合之一中。例如：

{% assign collection = collections.all %}

{% for product in collection.products %}
  {% for c in product.collections %}
    {% if c.handle == 'clothing' %}
      {% assign theme = "red" %}
    {% elsif c.handle == 'pictures' %}
      {% assign theme = "green" %}
    {% elsif c.handle == 'posters' %}
      {% assign theme = "blue" %}
    {% elsif c.handle == 'other' %}
      {% assign theme = "beige" %}
    {% else %}
      {% assign theme = "none" %}
    {% endif %}  
  {% endfor %}

  <div class="theme-{{ theme }} overview-item">
    ...
  </div>
{% endfor %}

Shopify：如何根据 collection 添加 class

Shopify: how to add a class depending on collection

collections

filtering

liquid

shopify