Select Dropdown Menu that removes part of URL when changed | Shopify

Question

The company I work for has decided to switch our eCommerce Platform to Shopify due to the option of support and functionality. Now I am trying to learn Liquid and getting our site to function correctly.

The problem is we have a category filter option that is populated using Liquid. We have three tiers:

Main Category -- Sub-Category -- Sub-Sub-Category

I have gotten the filtering option to work using the code below, but when a Sub or Sub-Sub Category are selected and the main category is changed, the sub and sub-sub values stay the same which returns no products because it's the incorrect maincategory for the subcategories.

the Url goes from maincategory1 to maincategory2 but keeps the sub values.

/maincat1+subcat1 -> /maincat2+subcat1

I found a jquery script that shows an alert when the options are changed, but I can't figure out how to remove the sub category values when changed?

 <script>
  $( "#maincategory" ).change(function() {
    alert( "Handler for .change() called." );
  });
</script>

Here is my filtering code:

<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="{{ 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>

I would like the the sub and sub-sub category to be removed when the main category is changed. I'm not sure if this is possible using liquid or if I will have to use a combo of liquid and jquery. Any help would be appreciated!

questilar questilar · Accepted Answer · 2019-05-23T20:43:51

I figured it out!

<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;
  });
});

Select Dropdown Menu that removes part of URL when changed | Shopify

1 Answers