在 Shopify 中使用 Collections of Collections 进行标签过滤答案

【问题标题】：Filtering with tags in Shopify with Collections of Collections在 Shopify 中使用 Collections of Collections 进行标签过滤
【发布时间】：2015-02-19 14:01:47
【问题描述】：

在 Shopify 中，我希望在没有产品的级别上提供可用的标签，以便我可以使用标签过滤。

例如，在销售珠宝的网站上，层次结构如下：

level 0: homepage (rings, earrings, pendants, or the-john-smith-collection)

level 1: grid of top level collection (earrings, for example)

level 2: grid of sub-collection (model-123) of earrings 

level 3: grid of all earrings of model-123

level 4: product page for earring-xyz of model-123

我知道我可以毫无问题地按级别 3 的标签进行过滤，因为我正在查看一个类别中的一堆产品。

我的问题是 - 是否有任何方法可以访问 2 级上每个模型（子系列）中所有产品的所有标签。我会有一个包含一堆子系列的系列，但没有实际产品，但我希望能够通过位于这些子集合中的产品的所有标签进行过滤，因此我可以执行以下操作：

From the homepage, select the "rings" collection

See the rings category - a grid of 20 different sub-collections

Have a side filter menu, from which I'm able to click "see only rings tagged with "amethyst"

Be taken to a grid of all products matching those tags

有什么想法吗？

【问题讨论】：

标签： tags shopify liquid

【解决方案1】：

不确定您是否仍在寻找此问题的答案，但这在 Shopify 中是可能的。

我最近遇到了 Shopify 内置的免费主题之一，New Standard，它可以在“收藏”页面下的“自定义”面板中找到，“按标签显示浏览”。

但是，我还在 Shopify 上找到了this article，它向您展示了如何在您自己的可以按标签浏览的下拉菜单中进行编程。此代码仅在选择了一个集合之后才起作用。

<script>
  /* Product Tag Filters - Good for any number of filters on any type of collection pages */
  /* Brought to you by Caroline Schnapp */
  var collFilters = jQuery('.coll-filter');
  collFilters.change(function() {
    var newTags = [];
    collFilters.each(function() { 
      if (jQuery(this).val()) {
        newTags.push(jQuery(this).val());
      }
    });
    if (newTags.length) {
      var query = newTags.join('+');
      window.location.href = jQuery('{{ 'tag' | link_to_tag: 'tag' }}').attr('href').replace('tag', query);
    } 
    else {
      {% if collection.handle %}
      window.location.href = '/collections/{{ collection.handle }}';
      {% elsif collection.products.first.type == collection.title %}
      window.location.href = '{{ collection.title | url_for_type }}';
      {% elsif collection.products.first.vendor == collection.title %}
      window.location.href = '{{ collection.title | url_for_vendor }}';
      {% endif %}
    }
  });
</script>

<div class="clearfix filter">
  <p>Browse by tag:</p>
  <select class="coll-filter">
    <option value="">All</option>
    {% for tag in collection.all_tags %}
    {% if current_tags contains tag %}
    <option value="{{ tag | handle }}" selected>{{ tag }}</option>
    {% else %}
    <option value="{{ tag | handle }}">{{ tag }}</option>
    {% endif %}
    {% endfor %}
  </select>
</div>

祝你好运，我希望这对你有用！

【讨论】：