【问题标题】:Shopify: Filter by Multiple Tags at Same timeShopify:同时按多个标签过滤
【发布时间】:2019-05-22 18:02:42
【问题描述】:

好的,我正在创建用于过滤产品的菜单,以防止我的标签和子菜单过长。

我为我的主要类别创建了一个下拉过滤器(我添加了一个除非来消除子级别的类别标签)

然后,我有一个子类别菜单,仅在未选择“所有类别”时显示。

这会为该类别中的所有标签生成一个子类别过滤器。代码见下:

<div class="text-center">
<div class="browseby" style="display:inline;padding:20px;">
    <div class="clearfix filter" style="float:left;">
       Browse By Category <select class="coll-filter">
         <option value="">All</option>
         {% for tag in collection.all_tags %}
             {% unless tag == 'HP' or tag == 'Latex' or tag == 'Latex 570' or tag == 'Parts' or tag == 'Aqueous Media' or tag == 'Latex Media' or tag == 'Solvent Media' %}  
                 {% if current_tags contains tag %}
                    <option value="{{ tag | handle }}" selected>{{ tag }} ({{ collection.products_count }})</option>
                 {% else %}
                    <option value="{{ tag | handle }}">{{ tag }}</option>
                 {% endif %}
             {% endunless %}
         {% endfor %}
       </select>
    </div>
    {% if current_tags %}
        <div class="clearfix filter" style="float:left; padding-left:20px">

            Browse By Sub-Category <select class="coll-filter">
             <option value="">All</option>
             {% for tag in collection.tags %}
                {% unless current_tags contains tag  %}  
                    {% if current_tags contains tag %}
                        <option value="{{ tag | handle }}" selected>{{ tag }} ({{ collection.products_count }})</option>
                    {% else %}
                        <option value="{{ tag | handle }}">{{ tag }}</option>
                    {% endif %}
                {% endunless %}
             {% endfor %}



           </select>
        </div>
    {% else %}

    {% endif %}
</div>

现在的问题是,当我选择子类别过滤器时,标签未显示为选中状态。

按类别浏览显示全部,然后在我拥有的下拉列表中(全部,Category1,Category2,Category3 ..) 如果我选择 Category3,页面会重新加载并显示按类别浏览:Category3

按子类别浏览显示全部,然后在我拥有的下拉列表中(全部,SubMenu1,SubMenu2,SubMenu3) 如果我选择 SubMenu2 产品全部过滤。 按类别浏览仍显示:Category3 但按子类别浏览显示:全部 在下拉菜单中,我有 (All, SubMenu1, SubMenu3)

如果这令人困惑,请告诉我。

【问题讨论】:

    标签: shopify liquid


    【解决方案1】:

    已解决!!

    我在上面的代码中发现了问题。第二个过滤器中的 {% unless %} 标记导致了问题。除非是过滤掉主要类别过滤器,但最终使所选选项不可用。我让我的主要类别以 cat- 开头,而子级别类别以 sub- 开头

    现在代码大部分工作...在使用子类别然后过滤回主类别时仍然存在问题。 URL 保留了子猫,只是添加了一个新的主类别...

    无论如何,对这里感兴趣的人是我的新代码:

    <div class="text-center">
    <div class="browseby" style="display:inline;padding:20px;">
        <div class="clearfix filter" style="float:left;">
           Browse By Category <select 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>
    
            <div class="clearfix filter" style="float:left; padding-left:20px">
    
                Browse By Type: <select 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>
    

    【讨论】:

    • 你能发布你实现这个的商店的链接吗?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-01-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多