Trying to add filter as dropdown list in Brooklyn theme.

AndersSamuel
New Member
1 0 0

Hello,

I am a newbie at this.  I've started to read all existing Q&A in the forum and tips I could find but I am still missing something.  

I am using the Brooklyn theme and I would like to add filter as dropdown boxes in my shopping page (where you can browse all products from every collections).  As a starter, I am trying to make it work with just one simple dropdown box.  I have created 2 tags with prefix "type-" which I have assigned to only 2 products.  As indicated in other Q&A threads, I have added the following piece of code to Collection-Template.liquid, just above the line  </header>.  I have also commented out the existing original code. 

Results:  the 2 tags will show in the dropdown box but they will not get to filter any product.  In fact, they do absolutely nothing. 

Anybody can help?  

Thank you in advance.

=======================================

{% comment %} BEGIN ORIGINAL CODE}

{%- if section.settings.collection_tags_enable -%}
  {%- if collection.all_tags.size > 0 -%}
    {%- if section.settings.collection_sort_enable -%}
      <hr class="hr--small hr--clear">
    {%- endif -%}
    <ul class="tags tags--collection inline-list">
    {% comment %}
    Used for the catalog collection (/collections/all) and product collections (collections/{collection.handle})
    {% endcomment %}
    <li{% unless current_tags %} class="tag--active"{% endunless %}>
       <a href="{% if collection.url == blank %}{{ routes.all_products_collection_url }}{% else %}{{ collection.url }}{% endif %}">
       {{ 'collections.general.all_of_collection' | t }}
       </a>
    </li>

    {%- for tag in collection.all_tags -%}
    {%- if current_tags contains tag -%}
      <li class="tag--active">
        {{ tag | link_to_remove_tag: tag }}
      </li>
    {%- else -%}
      <li>
        {% comment %}
        Use link_to_add_tag if you want to allow filtering
        by multiple tags
        {% endcomment %}
        {{ tag | link_to_tag: tag }}
      </li>
    {%- endif -%}
    {%- endfor -%}

    </ul>
  {%- endif -%}
{%- endif -%}

{%- if section.settings.collection_tags_enable -%}
  <hr class="hr--small hr--clear">
{%- endif -%}

END ORIGINAL CODE {% endcomment %}


{% comment %} BEGIN OF CHANGES FOR THE ONE SINGLE DROPDOWN FILTER {% endcomment %}

<!-- Multiple Dropdown Sorting Boxes - Collections START -->
<div class="clearfix filter">
<p>Filters</p>
<div class="four-columns">
<p>Color/Pattern:</p>
<select class="coll-filter">
<option value="">All</option>
{% for tag in collection.tags %}
    {% if tag contains 'type-' %}
      {% assign tagName = tag | remove: 'type-' %}
      {% if current_tags contains tag %}
      <LI class="tag--active">
        <option value="{{ tag | handle }}" selected>{{ tagName }}</option>
      </LI>
    {% else %}
      <LI>
        <option value="{{ tag | handle }}">{{ tagName }}</option>
      </LI>
    {% endif %}
  {% endif %}
{% endfor %}
</select>
</div>
</div>
<!-- Multiple Dropdown Sorting Boxes - Collections END -->

{% comment %} END CHANGES FOR THE ONE SINGLE DROPDOWN FILTER {% endcomment %}

0 Likes