[HOW TO] Filter Multiple Tags at Same Time and remove sub-category filters

[questilar]

After searching through many discussion posts I found a How-To for filtering products using multiple tags. I used Shawn19's method for filtering products you can find his post:

https://community.shopify.com/c/Shopify-Design/How-to-Multiple-Dropdown-Sorting-Boxes-on-Collection-...

Then I added the javascript from the Shopify tutorial:

https://help.shopify.com/en/themes/customization/collections/filter-collections-with-product-tags

I'll add my code so you can see the actual product. 

<div class="filtering">
	<div class="browseby" style="display:inline;">
		<div class="clearfix filter" style="float:left;padding-left:20px;">
		   Browse By Category <select id="maincategory" class="coll-filter">
			 <option value="">All</option>
			 {% for tag in collection.all_tags %}
				{% if tag contains 'cat-' %}
				 {% assign tagName = tag | remove: 'cat-' %}         
				  {% if current_tags contains tag %}
				  <option value="{{ shop.url }}/collections/all/{{ tag | handle }}" selected>{{ tagName }}</option>
				  {% else %}
				  <option value="{{ tag | handle }}">{{ tagName }}</option>
				  {% endif %}                     
				{% endif %}
			  {% endfor %}
		   </select>
		</div>
		{% if current_tags %}
			<div class="clearfix filter" style="float:left; padding-left:20px">
				Browse By Sub-Category: <select id="subcat1" class="coll-filter">
				 <option value="">All</option>
				 {% for tag in collection.tags %}
					{% if tag contains 'sub-' %}
					 {% assign tagName = tag | remove: 'sub-' %}         
					  {% 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="clearfix filter" style="float:left; padding-left:20px">
			   Browse By Type <select id="subcat2" 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 %}
					  <option value="{{ tag | handle }}" selected>{{ tagName }}</option>
					  {% else %}
					  <option value="{{ tag | handle }}">{{ tagName }}</option>
					  {% endif %}                     
					{% endif %}
				  {% endfor %}
			   </select>
			</div>
		{% else %}
			<div class="clearfix filter" style="float:left; padding-left:20px">
				Browse By Sub-Category: <select class="coll-filter">
				 <option value="">All</option>
				 
				</select>
			</div>
			<div class="clearfix filter" style="float:left; padding-left:20px">
			   Browse By Type <select class="coll-filter">
				 <option value="">All</option>
				 
			   </select>
			</div>
		{% endif %}
	</div>
</div>

The follow javascript is the biggest contribution:

<script>
    $(function(){
      // bind change event to select
      $('#maincategory').on('change', function () {
          var url = $(this).val(); // get selected value
          if (url) { // require a URL
              window.location = url; // redirect
          }
          return false;
      });
    });
</script>

So basically in the first main category (only the main category area) I added an id="maincategory" and changed

<option value="{{ tag | handle }}" selected>{{ tagName }}</option>

to

<option value="{{ shop.url }}/collections/all/{{ tag | handle }}" selected>{{ tagName }}</option>

That did it for me! So now if I have /collections/all/maincat1+subcat2 and click maincat2 the url changes to /collections/all/maincat2

Let me know if you have any issues!!

[shasikaud]

Hi, where should i add the javascript code.

[A_Kuciks]

Hi! Thanks for the tutorial, everything works perfectly except for one thing. I'm trying to change the dropdown background and text color when it's selected but so far I couldn't manage to do it. Snippets here to see what i'm talking about: 

Do you know by any chance how to fix this?

[A_Kuciks]

A small followup from yesterdays post. I noticed that the dark character problem exists only on Google Chrome browser. When visiting the page from Firefox the character color in dropdown is white

[YerayLg]

Hello, do you know how have to be now, because I'm trying to do it, but I can't

Thanks for all.