在 shopify 中突出显示活动的 collection 按钮

Question

我有一份 collection 我在 Shopify 中打电话的清单。我尝试使用 link active 标签，但它不起作用。这是我的片段

{% for collection in collections %}
  {% unless collection.handle == 'frontpage' %}
    <button type="button" class="btn btn-outline-info {% if link.active %}class='active'{% endif %}">{{ collection.title | escape | link_to: collection.url }}</button>
  {% endunless %}
{% endfor %}

我正在尝试将 active class 添加到活动 collection 或我目前正在使用的 collection URL。

我不知道我在这里错过了什么。

Answer 1

根据您的评论，您的代码将无法正常运行。 collection 是 Shopify 中的保留变量，通过在循环中使用相同的变量，您可能会完全更改实际的集合。其次，link.active 只能在链接列表循环内工作。

您可以执行以下操作：更改循环中单元的分配变量并验证句柄是否相同。

{% for thisCollection in collections %}
  {% unless thisCollection.handle == 'frontpage' %}
    <button type="button" class="btn btn-outline-info {% if thisCollection.handle == collection.handle %}class='active'{% endif %}">{{ thisCollection.title | escape | link_to: thisCollection.url }}</button>
  {% endunless %}
{% endfor %}

在 shopify 中突出显示活动的 collection 按钮

Highlight the active collection button in shopify

shopify