如果Shopify中没有显示标签,如何隐藏列表?

时间:2018-05-14 14:04:27

标签: html css shopify liquid

如果没有要为当前集合显示的标签,我试图隐藏过滤器部分。

这是我目前的代码:

{% assign tags = 'Blue, Grey, Black, Oak, Bronze, Pewter, Gunmetal, Utile, Mahogany' | split: ',' %}
{% assign colour = tags | size %}
 <ul class="subnav clearfix" {% if colour <= 0 %} style="display: none;" {% endif %}>
  <li class="coll-filter filter-heading clearfix">
   <label>Colour</label>
   <hr class="hr--sidebar">
   {% for t in tags %}
   {% assign tag = t | strip %}
   {% if current_tags contains tag %}
    <li class="selection{% unless current_tag %} active{% endunless%}">
     <span>{{ tag | link_to_remove_tag: tag }}</span>
    </li>
   {% elsif collection.tags contains tag %}
    <li class="selection{% unless current_tag %} active{% endunless%}">
     <div id="swatch-{{ tag }}" class="colour-filter">&nbsp;</div>
      <span> {{ tag | link_to_tag: tag }}</span>
    </li>
   {% endif %}
  {% endfor %}
 </li>
</ul>


{% assign tags = 'Egyptian Cotton, Silk, Satin, Salt' | split: ',' %}
{% assign material = tags | size %}
 <ul class="subnav clearfix" {% if material <= 0 %} style="display: none;" {% endif %}>
  <li class="coll-filter filter-heading clearfix">
   <label>Material</label>
   <hr class="hr--sidebar">
   {% for t in tags %}
   {% assign tag = t | strip %}
    {% if current_tags contains tag %}
     <li {% unless current_tag %}class="active"{% endunless%}>
      {{ tag | link_to_remove_tag: tag }}
     </li>
    {% elsif collection.tags contains tag %}
     <li>
      {{ tag | link_to_tag: tag }}
     </li>
    {% endif %}
   {% endfor %}
  </li>
 </ul>

{% assign tags = 'Small, Medium, Large' | split: ',' %}
{% assign size = tags | size %} 
 <ul class="subnav clearfix" {% if size <= 0 %} style="display: none;" {% endif %}>
  <li class="coll-filter filter-heading clearfix">
   <label>Size</label>
   <hr class="hr--sidebar">
   {% for t in tags %}
   {% assign tag = t | strip %}
   {% if current_tags contains tag %}
    <li {% unless current_tag %}class="active"{% endunless%}>
     {{ tag | link_to_remove_tag: tag }}
    </li>
   {% elsif collection.tags contains tag %}
    <li>
     {{ tag | link_to_tag: tag }}
    </li>
   {% endif %}
  {% endfor %}
 </li>
</ul>

{% assign tags = 'Under £5, £15-£100, £100-£250, £250-£750, £750-1000£, £1000' | split: ',' %}
{% assign price-range = tags | size %}
 <ul class="subnav clearfix" {% if price-range <= 0 %} style="display: none;" {% endif %}>
  <li class="coll-filter filter-heading clearfix">
   <label>Price Range</label>
   <hr class="hr--sidebar">
   {% for t in tags %}
   {% assign tag = t | strip %}
   {% if current_tags contains tag %}
    <li {% unless current_tag %}class="active"{% endunless%}>
     {{ tag | link_to_remove_tag: tag }}
    </li>
   {% elsif collection.tags contains tag %}
    <li>
     {{ tag | link_to_tag: tag }}
    </li>
   {% endif %}
  {% endfor %}
 </li>
</ul>

我的代码已根据以下答案进行了更新。 目前仍然没有工作。

我确定我是否有多个过滤器然后为标签分配尺寸,颜色,材料和价格范围这一事实使它无效?

提前致谢。

2 个答案:

答案 0 :(得分:0)

检查标签集合是否小于或等于零,然后应用display:none style。

{%if tags&lt; = 0%}

答案 1 :(得分:0)

试试这个

{% assign tags = 'Egyptian Cotton, Silk, Satin' | split: ',' %}
{% assign count = 0 %}
{% for t in tags %}
  {% assign tag = t | strip %}
  {% if current_tags contains tag or collection.all_tags contains tag %}
    {% increment count %}
  {% endif %}
{% endfor %}

<ul class="subnav clearfix" {% if count <= 0 %} style="display:none" {% endif %} >
 <li class="coll-filter clearfix{% unless current_tags %} active{% endunless %}">
   <label>Material</label>
    <hr class="hr--sidebar">
     {% for t in tags %}
      {% assign tag = t | strip %}
       {% if current_tags contains tag %}
        <li {% unless current_tag %}class="active"{% endunless%}>
         {{ tag | link_to_remove_tag: tag }}
        </li>
       {% elsif collection.all_tags contains tag %}
       <li>
       {{ tag | link_to_tag: tag }}
      </li>
   {% endif %}
  {% endfor %}
 </li>
</ul>