shopify - Shopify:同时按多个标签过滤
问题描述
好的,所以我正在创建用于过滤产品的菜单,以防止我的标签和子菜单过长。
我为我的主要类别创建了一个下拉过滤器(我添加了一个除非以消除子级别类别标签)
然后,我有一个子类别菜单,仅在未选择“所有类别”时显示。
然后,这会为该类别中的所有标签生成一个子类别过滤器。请参阅下面的代码:
<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)<-- 正在过滤的类别从列表中消失,但会过滤产品。
如果这令人困惑,请告诉我。
解决方案
解决!!
我在上面的代码中发现了问题。第二个过滤器中的 {% 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>
推荐阅读
- mysql - 添加连接时MYSQL结果集不同
- anaconda - “不被识别为内部或外部命令、可运行程序或批处理文件。”
- php - 尝试使用 PHP 循环并显示 JSON 文件
- node.js - 在视图中调用时如何从 ajax 结果集在 ejs 视图中显示数据
- javascript - 为什么在不使用 `=>` 或绑定的情况下,'this' 不会在 React Component 的 ES6 实例方法中绑定?
- makefile - CentOS 6下的C++ 14个关键字
- css - 使用 Sass 将样式应用于具有空下一个兄弟元素的元素
- java - lineChartView findViewById in fragment
- bash - eval 解释 bash 中的新行
- c# - 如何使用 AccessViolationException 使 C# 应用程序崩溃