Выберите выпадающее меню, которое удаляет часть URL при изменении |Shopify

Question

Компания, в которой я работаю, решила переключить нашу платформу электронной коммерции на Shopify из-за возможности поддержки и функциональности.Сейчас я пытаюсь изучить Liquid и заставить наш сайт работать правильно.

Проблема в том, что у нас есть опция фильтрации категорий, которая заполняется с помощью Liquid.У нас есть три уровня:

Основная категория - Подкатегория - Подкатегория

Я получил возможность фильтрации для работы с использованием приведенного ниже кода, но когда Sub или Sub-Sub Category выбраны, и основная категория изменена, значения sub и sub-sub остаются прежними, что не возвращает товаров, потому что это неверная основная категория для подкатегорий.

URL переходит от maincategory1 к maincategory2, но сохраняетзначения sub.

/ maincat1 + subcat1 -> / maincat2 + subcat1

Я нашел скрипт jquery, который показывает предупреждение при изменении параметров, но я не могу понять, какудалить значения подкатегории при изменении?

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

Вот мой код фильтрации:

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

Я бы хотел, чтобы подкатегория и под-подкатегориябыть удалены при изменении основной категории.Я не уверен, возможно ли это с помощью жидкости или мне придется использовать комбинацию жидкости и jquery.Любая помощь будет оценена!

Answer 1

Я понял это!

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