Filter by type

New Member
3 0 0

Hi All.

 

I am after some help, I am trying to filter by type in my store, I have managed to create the drop down menu for it but I am unable to get this to filter, 

I have attached the coding below, if anyone can see where I am going wrong I would appreciate the heads up.

 

Thanks

 

<div class="col-content">

  <div class="productlist-wrapper condensed collection collection-{{ collection.handle }}">
    
    <div class="productlist-header section-header">
      <h1>{{ collection.title }} {% if current_tags %} &raquo; {{current_tags}}{% endif %}</h1>
    </div>

   {% assign has_sub_menu = false %}
    {% if settings.show_tags and collection.all_tags.size > 0 %}
    {% assign has_sub_menu = true %}
    {% endif %}
    {% if settings.collection_sort and collection.products.size > 1 %}
    {% assign has_sub_menu = true %}
    {% endif %}
    {% if has_sub_menu %}

     <div class="clearfix filter">
  <p>Select Boiler Model:</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>
       <div class="clearfix filter">
  <p>Select Boiler Model:</p>
  <select class="coll-filter">
    <option value="">All</option>
    {% for type in collection.all_types %}
    {% if current_types contains tag %}
    <option value="{{ tag | handle }}" selected>{{ type }}</option>
    {% else %}
    <option value="{{ tag | handle }}">{{ type }}</option>
    {% endif %}
    {% endfor %}
  </select>
</div>


<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>
        {% if settings.show_tags and collection.all_tags.size > 0 %}
 </ul>
        {% endif %}
        {% if settings.collection_sort and collection.products.size > 1 %}
          <div class="collection-sort">
            <label for="sort-by">Sort by</label> 
            <select id="sort-by">
              <option value="manual">Featured</option>
              <option value="price-ascending">Price: Low to High</option>
              <option value="price-descending">Price: High to Low</option>
              <option value="title-ascending">A-Z</option>
              <option value="title-descending">Z-A</option>
              <option value="created-ascending">Oldest to Newest</option>
              <option value="created-descending">Newest to Oldest</option>
              <option value="best-selling">Best Selling</option>
            </select>
          </div>     
      {% endif %}
      </div>
    {% endif %}
    
    {{ collection.description }}

    {% paginate collection.products by 25 %}
      {% if collection.products.size > 0 %}
    
        <ul class="thumbgrid clearfix">
          {% for product in collection.products %}
            <li{% cycle '', '', '', '', ' class="last-in-row"' %}>
              <div class="product-photo"><a href="{{ product.url | within: collection }}"><img src="{{ product.images[0] | product_img_url: "compact" }}" alt="{{ product.featured_image.alt | escape }}" /></a></div>
              <div class="product-desc">
                <h3 class="product-title"><a href="{{ product.url | within: collection }}">{{ product.title | escape | truncate: 35 }}</a></h3>
                <p class="product-price">
                {% if product.price_varies %} 
                  from {{ product.price_min | money }}
                {% else %}
                  {{ product.price_min | money }}
                  {% if product.compare_at_price_max > product.price %} <del>{{ product.compare_at_price_max | money }}</del>{% endif %}                
                {% endif %}
                </p>
              </div>
            </li>
          {% endfor %}
        </ul>

        {% if paginate.pages > 1 %}
          {% include 'pagination' %}
        {% endif %}
      
      {% else %}    
        <strong>No products found in this collection.</strong>
      {% endif %}
    {% endpaginate %}
   </div>
</div>
<div class="col-browse">
{% include 'left-col-nav' %}
{% include 'left-col-social' %}    
{% include 'left-col-ads' %}
</div><!-- /#col-browse -->

<script>
Shopify.queryParams = {};
if (location.search.length) {
  for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) {
    aKeyValue = aCouples[i].split('=');
    if (aKeyValue.length > 1) {
      Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
    }
  }
}
jQuery('#sort-by')
  .val('{{ collection.sort_by | default: collection.default_sort_by  }}')
  .bind('change', function() {
    Shopify.queryParams.sort_by = $(this).val();
    location.search = jQuery.param(Shopify.queryParams);
  });
</script>

0 Likes
Shopify Staff
Shopify Staff
5704 0 277

First off, it's not possible to filter a collection by type, you can only filter by tag.

So, the first thing you want to do is to add to each product its product type as a product tag.

So if I have a product with product type 'Dress', I'll add 'Dress' as product tag.

Then this here:

<select class="coll-filter">
    <option value="">All</option>
    {% for type in collection.all_types %}
    {% if current_types contains tag %}
    <option value="{{ tag | handle }}" selected>{{ type }}</option>
    {% else %}
    <option value="{{ tag | handle }}">{{ type }}</option>
    {% endif %}
    {% endfor %}
</select>

would need to be changed to:

<select class="coll-filter">
    <option value="">All</option>
    {% for type in collection.all_types %}
    {% if current_tags contains type %}
    <option value="{{ type | handle }}" selected>{{ type }}</option>
    {% else %}
    <option value="{{ type | handle }}">{{ type }}</option>
    {% endif %}
    {% endfor %}
</select>

and then this will need to skip over the tag that is a product type:

<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>

so use that instead:

<select class="coll-filter">
    <option value="">All</option>
    {% for tag in collection.all_tags %}
    {% unless collection.all_types contains tag %}
    {% if current_tags contains tag %}
    <option value="{{ tag | handle }}" selected>{{ tag }}</option>
    {% else %}
    <option value="{{ tag | handle }}">{{ tag }}</option>
    {% endif %}
    {% endunless %}
    {% endfor %}
</select>

 

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes
New Member
5 0 0

Caroline, I have attempted to use your advice to build multiple drop-downs to filter on my store. The example at http://satterfield-pfeffer5655.myshopify.com shows how the other drop-downs only include valid choices once a selection is made but mind still include all selections creating pages with no valid product. Would you mind helping me sort this?

0 Likes
Highlighted
Shopify Expert
36 0 3

I was pointed to this thread by one of the design guru's because I was struggling with this too for a client. Initially just wanted to do it with product_types, but had to add the product types tags for all the products. With a small store that wouldn't be a big problem, but the client I was working for has more than 500 products (with multiple variants) in the store.

So I decided to make an app for it, finished it a couple of days ago and it works like a charm. It simply adds the product type as tag for all products » https://typetotag.gaze.bo

0 Likes
New Member
1 0 0

Hi Caroline

I've got a question for you as I am not sure I understand this.

When I create every product, I assign it a type. As well as various tags (necklace, gold, chain,...) as I thought the tags were for the search engine to find the product...

So now, when I added the Browse by type, it is showing my massive list of tags.. I rather it shows the type (i.e. the subcategory. So within Jewellery: Bracelet, Necklace, Earrings....) 

Is this possible? I have far too many products to edit them now one by one, delete ALL tags and redo them. Have you got any suggestion?

Thanks in advance!

0 Likes