Collection Filter by Size

New Member
4 0 0

Spending hours searching google for a fix, I wasnt able to find what I was looking for. I am AMAZED that Shopify cant add a simple stupid function as there are SO many clothes (and similar) shops that need a collection filter by size/color and etc. And people are selling this BASIC filter widget for monthly fees!!! OMG!!

Ok, so lets get started.. so basicly what shopify offers is a search by TAG, ok, that fits fine for now, so adding TAGs with size and filtering by size would be OK, but now where the problem rizes, it is searcing in COLLECTIONS/ALL, which is not good, when someone picked a collection example COLLECTIONS/SHOES and they want to see only shoe searches by size tag.

Code:

      <!-- Widget-Categories start -->
      <aside class="widget widget-size">
        <div class="widget-info size-filter clearfix">
          <ul>
            {% assign tags = section.settings.size_picker | replace: ', ', ',' | replace: ' ,', ',' | split: ',' %}
            {% assign size_list_limit = section.settings.size_list_limit_hanlde %}

            {% for t in tags limit: size_list_limit %}
            {% assign tag = t | strip %}
            {% if collection.all_tags contains tag %}
            <li class="{% if current_tags contains tag %}active{% endif %}"><a href="/collections/all/{{ tag | handle }}">{{ tag }}</a></li>
            {% else %}
            <li><a href="/collections/all/{{ tag | handle }}">{{ tag }}</a></li>
            {% endif %}
            {% endfor %}
          </ul>
        </div>
      </aside>
      <!-- Widget-categories end -->

Does anyone know what function to use in the code, so taht it would search in href="collections/CURRENT-COLLECTION/{{... ??

I have egzamined the "collections filter" demo that is sold on apps store, and it has some way arounds, but cant figure out how..

Link: https://collection-filter-demo.myshopify.com/collections/clothing/cf-vendor-red-wing+cf-size-s

as you can see it is searching in current collection only, by adding tags with +, like cf-vendor and cf-size..

Some codes that could have an answer

<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]);
      }
    }
  }
  var collFilters = jQuery('.coll-filter');
  collFilters.change(function() {
      var newTags = [];
      var newURL = '';
      delete Shopify.queryParams.page;
      collFilters.each(function() { 
        if (jQuery(this).val()) {
          newTags.push(jQuery(this).val());
        }
      });
      
      newURL = '/collections/' + 'clothing';
      if (newTags.length) {
        newURL += '/' + newTags.join('+');
      }
      var search = jQuery.param(Shopify.queryParams);
      if (search.length) {
        newURL += '?' + search;
      }
      location.href = newURL;    
            
  });
  jQuery('.sort-by')
    .val('title-ascending')
    .bind('change', function() {
      Shopify.queryParams.sort_by = jQuery(this).val();
      location.search = jQuery.param(Shopify.queryParams).replace(/\+/g, '%20');
    });
</script>

This is annoying really..

0 Likes
Excursionist
45 0 8

Hi Tomas, the URL format goes /collections/collection-handle/tag+tag+tag you can use {{ collection.handle }} so you probably want to replace this link in your themes code /collections/all/{{ tag | handle }} to /collections/{{ collection.handle }}/{{ tag | handle }} to stop it redirecting to /collections/all

I believe this documentation may also help: https://help.shopify.com/themes/customization/collections/filter-collections-with-product-tags

Remember that every themes different so just because the current theme you're using may not exactly suit your needs doesn't mean other themes don't already include the tag filtering you're looking for.

1 Like
New Member
4 0 0

Yes, I already found that myself, but I see you send a format as tag+tag+tag, sooo.. how can I edit the code, so that it would be possible for tag+tag? at the moment its only 1 tag..

As an example, I would want for people to use 2x TAGS like: size+color, which would look like /collections/currentcollection/S+black

 

0 Likes
Explorer
51 0 32

@Munawar_Sheikh 
That tutorial is no longer online. Is it anywhere else?

 

0 Likes