How do you create smart filters? (currently based on tags)

Highlighted
New Member
2 0 0

Hello,

 

I'm trying to create multiple filters (select dropdowns) that will update themselves based on their individual selections.

So, say I have 3 filters Enclosure, Phase and Frame. Selecting Enclosure should update the Phase and Frame lists respectfully and selecting Phase would update both Enclosure and Frame. Basically, with each selection, I would want to narrow the selection lists down. I have the filters pulling in products correctly but I can't get my filtering system to update the way I would like. I have written the below in the collection.template.liquid file. (debut theme)


FIlters:

 

<div class="four-columns">
        <p>Enclosure:</p>
        <select class="coll-filter">
          <option value="">All</option>
          {% for tag in collection.all_tags %}
            {% if tag contains 'enclosure-' %}
             {% assign tagName = tag | remove: 'enclosure-' %}         
              {% if current_tags contains tag %}
              <option value="{{ tag | handle }}" selected>{{ tagName }}</option>
              {% else %}
              <option value="{{ tag | handle }}">{{ tagName }}</option>
              {% endif %}                     
            {% endif %}
          {% endfor %}
        </select>
      </div>
      <div class="four-columns">
        <p>Phase:</p>
        <select class="coll-filter">
          <option value="">All</option>
          {% for tag in collection.all_tags %}
            {% if tag contains 'phase-' %}
             {% assign tagName = tag | remove: 'phase-' %}         
              {% if current_tags contains tag %}
              <option value="{{ tag | handle }}" selected>{{ tagName }}</option>
              {% else %}
              <option value="{{ tag | handle }}">{{ tagName }}</option>
              {% endif %}                     
            {% endif %}
          {% endfor %}
        </select>
      </div>
      <div class="four-columns">
        <p>Frame:</p>
        <select class="coll-filter">
          <option value="">All</option>
          {% for tag in collection.all_tags %}
            {% if tag contains 'frame-' %}
             {% assign tagName = tag | remove: 'frame-' %}         
              {% if current_tags contains tag %}
              <option value="{{ tag | handle }}" selected>{{ tagName }}</option>
              {% else %}
              <option value="{{ tag | handle }}">{{ tagName }}</option>
              {% endif %}                     
            {% endif %}
          {% endfor %}
        </select>
      </div>

JS to control filters

<script> /* Product Tag Filters - Good for any number of filters on any type of collection pages */

		var collFilters = jQuery('.coll-filter');

		collFilters.change(function() {

			var newTags = [];

			collFilters.each(function() {

				if (jQuery(this).val()) {

					newTags.push(jQuery(this).val()); } });
  					console.log(newTags);
					
					if (newTags.length) {

						var query = newTags.join('+'); 
                      	window.location.href = jQuery('{{ 'tag' | link_to_tag: 'tag' }}').attr('href').replace('/' + 'tag', '/' + query)+'#filter';
						//ajaxLoadPage(jQuery('{{ 'tag' | link_to_tag: 'tag' }}').attr('href').replace('/' + 'tag', '/' + query));
						} else { 
                        	{% if collection.handle %} 
                            	//window.location.href = '/collections/{{ collection.handle }}';
								ajaxLoadPage('/collections/{{ collection.handle }}');
							{% elsif collection.products.first.type == collection.title %} 
                        		//window.location.href = '{{ collection.title | url_for_type }}'; 
                                ajaxLoadPage('{{ collection.title | url_for_type }}');
                        	{% elsif collection.products.first.vendor == collection.title %} 
                        		//window.location.href = '{{ collection.title | url_for_vendor }}';
                                ajaxLoadPage('{{ collection.title | url_for_vendor }}');
                        	{% endif %} 
                        } 
                    }
           );
    	var ajaxLoadPage = function (url) {
            $.ajax({
                type: 'GET',
                url: url,
                data: {},
                complete: function (data) {
                  //console.log(data.responseText);
                  $('#filter').html($("#filter", data.responseText).html());
                    history.pushState({
                        page: url
                    }, url, url);
                    
                }
            });
        }
    </script>

I'm assuming I need to pull a list of filters based on the user's initial selection then remove/hide selection option based on that list but I can't figure out how to get said list. Is there a better approach to this? Am I close? Any response is welcome. My thanks in Advance.

 

0 Likes
Highlighted
New Member
2 0 0

Bump?

0 Likes
Highlighted
New Member
5 0 0

Hello, I am hoping to do a similar thing, did you manage to sort it out? If so, would you mind explaining how? Thanks in advance.

0 Likes