Question

由于支持和功能选项的存在，我工作的公司决定将我们的电子商务平台转换为Shopify。现在，我正在尝试学习Liquid，并使我们的网站正常运行。

问题是我们有一个使用Liquid填充的类别过滤器选项。我们分为三层：

主要类别-子类别-子子类别

我已经获得了使用以下代码进行过滤的选项，但是当选择了Sub或Sub-Sub类别并且更改了主类别时，sub和sub-sub值保持不变，因为它是子类别的主类别不正确。

Url从maincategory1转到maincategory2，但保留子值。

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

选择下拉菜单，该菜单会在更改后删除部分URL | Shopify

1 个答案: