What is the best way to conceal a list in Shopify when no tags are visible?

I need help hiding a filter section when there are no tags to display for the current collection.

Below is the code I am currently using:

{% assign colors = 'Blue, Grey, Black, Oak, Bronze, Pewter, Gunmetal, Utile, Mahogany' | split: ',' %}
{% assign colorCount = colors | size %}
 <ul class="subnav clearfix" {% if colorCount <= 0 %} style="display: none;" {% endif %}>
  <li class="coll-filter filter-heading clearfix">
   <label>Color</label>
   <hr class="hr--sidebar">
   {% for c in colors %}
   {% assign tag = c | 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 materials = 'Egyptian Cotton, Silk, Satin, Salt' | split: ',' %}
{% assign materialCount = materials | size %}
 <ul class="subnav clearfix" {% if materialCount <= 0 %} style="display: none;" {% endif %}>
  <li class="coll-filter filter-heading clearfix">
   <label>Material</label>
   <hr class="hr--sidebar">
   {% for m in materials %}
   {% assign tag = m | 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 sizes = 'Small, Medium, Large' | split: ',' %}
{% assign sizeCount = sizes | size %} 
 <ul class="subnav clearfix" {% if sizeCount <= 0 %} style="display: none;" {% endif %}>
  <li class="coll-filter filter-heading clearfix">
   <label>Size</label>
   <hr class="hr--sidebar">
   {% for s in sizes %}
   {% assign tag = s | 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 priceRanges = 'Under £5, £15-£100, £100-£250, £250-£750, £750-1000£, £1000' | split: ',' %}
{% assign priceRangeCount = priceRanges | size %}
 <ul class="subnav clearfix" {% if priceRangeCount <= 0 %} style="display: none;" {% endif %}>
  <li class="coll-filter filter-heading clearfix">
   <label>Price Range</label>
   <hr class="hr--sidebar">
   {% for p in priceRanges %}
   {% assign tag = p | 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>

I have tried updating my code based on the suggestions provided, but it is still not functioning correctly.

Is it possible that having multiple filters and assigning different variables such as size, colorCount, materialCount, and priceRangeCount to the tags could be causing the issue?

Thank you for any assistance.

Answer №1

To determine if the tags collection is smaller than or equal to zero, and only then do we implement the display:none style.

{% if tags <= 0 %}

Answer №2

Give this a shot

{% assign categories = 'Cotton, Linen, Polyester' | split: ',' %}
{% assign total = 0 %}
{% for category in categories %}
  {% assign cat = category | strip %}
  {% if current_categories contains cat or collection.all_categories contains cat %}
    {% increment total %}
  {% endif %}
{% endfor %}

<ul class="subcategories clearfix" {% if total <= 0 %} style="display:none" {% endif %} >
 <li class="cat-filter clearfix{% unless current_categories %} active{% endunless %}">
   <label>Material</label>
    <hr class="hr--sidebar">
     {% for category in categories %}
      {% assign cat = category | strip %}
       {% if current_categories contains cat %}
        <li {% unless current_cat %}class="active"{% endunless%}>
         {{ cat | link_to_remove_category: cat }}
        </li>
       {% elsif collection.all_categories contains cat %}
       <li>
       {{ cat | link_to_category: cat }}
      </li>
   {% endif %}
  {% endfor %}
 </li>
</ul>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Here is a unique version: "Learn how to efficiently transfer data from multiple parent elements to another page using the same buttons by leveraging LocalStorage

I received assistance from mplungjan to create part of the code. Currently, I have created multiple buttons for various paragraphs, functioning as favorite buttons. My goal is to transfer these favorited paragraphs to a different page. For more details, yo ...

What could be the reason for the absence of this Javascript function in my attribute?

I have been working on an app using electron, and I have a function that successfully adds tabs to the app. The issue arises when I try to add tabs via JavaScript with the onclick attribute - they show up as expected but do not execute the code to hide and ...

Guide to utilizing the bootstrap grid system to stack below a width of 480px

I have been grappling with this issue, but unfortunately, there seems to be a lack of information on how to resolve it. I have gone through numerous old posts where individuals are "modding" the files and creating their own col-ms (medium-small) that stack ...

I am experiencing difficulties with certain images not appearing on my website

Everything was running smoothly while I was working on my website locally. However, as soon as I uploaded it online, some of the images refused to load and are now missing. I built my website using wordpress version 3.7.1. If you'd like to take a loo ...

The alignment of text in the flex column is incorrect on the right side

The flex column I created is having an issue with the arrow on the right side. It's not displaying properly and is hidden. The arrow should be similar to the one on the left and point to the left direction. I have used left: 0; for the left side and ...

Tips on connecting data within a jQuery element to a table of data

I am currently developing a program that involves searching the source code to list out element names and their corresponding IDs. Instead of displaying this information in alert popups, I would like to present it neatly within a data table. <script> ...

Ways to effectively conceal an HTML div element with CSS or JavaScript

Is there a way to hide the div element that is nested inside a bootstraps radio or checkbox container using jquery? I'm unable to upload an image, but here is a preview: http://prntscr.com/6wrk2m <style> .my-radio{ border: 1px solid #F0F; } &l ...

Establish the Starting Height for Adjustable Text Area with a Generous Initial Setting

Is there a way to set the initial height of a text area element at 168px, with the ability for users to expand it vertically if needed later on? The challenge is that the initial value loaded into the box is large and causes it to auto-expand past the 16 ...

Picture failing to stretch the width of the table cell

I am facing an issue with the image in a table cell. The table has a width of 604px and a height of 379px, but the image is not stretching to occupy the full space of the cell even though I have set its CSS properties to width: auto and height: auto. If I ...

In-depth CSS Reset for specific tags

Creating a Firefox extension that inserts HTML elements into web pages poses the challenge of ensuring consistent styling across various websites. The CSS rules must be robust enough to override any potential modifications introduced by developers. This ta ...

How to implement an overlay fix in HTML

Here is a problem I need help with: The image has an overlay with a lighter black background applied. However, the text is also becoming overlaid, which is not the desired effect. Can anyone provide a solution to fix this issue? ...

Endless stream of text flowing in a continuous line within each paragraph

I am trying to create a unique scrolling effect for each line in a paragraph. The goal is to have each line repeat after one scroll is completed. For example: Let's say there is a line like this in the paragraph: 1,2,3,4, The desired outcome is for ...

What is the best way to navigate a class to the end of the queue?

My table cells have a specific class structure: class="a", and/or class="b": class="a b". This is the CSS: .a { background-color:blue; } .b { background-color:green; } When the classes intersect, the color becomes green. I want to implement a functional ...

Is there a way to undo the transition when hovering out?

Is it possible to achieve a reverse transition animation on hover out using CSS? I want the "Menu" text to slide to the right blue line when I hover out, and after a delay of 400ms, slide back from the left grey line. Can this be done? .menu { displ ...

What is the way to define the maximum width of a table cell by using percentage values?

<table> <tr> <td>Example</td> <td>An extended phrase blah blah blah</td> </tr> </table> <style> td { maximum-width: 67%; } </style> This configuration is not functioning prop ...

The `overflow:auto` property is causing the flex container to overflow due to the size of its fixed width children

Here's a unique CSS puzzle for you all: Imagine the following hierarchy: app container flex container item1 - fixed width(80px) item2 - responsive width(width:100%). MUI Stepper - overflow:scroll, width:100% This structure would look like this: ...

JQuery Submission with Multiple Forms

Hey everyone! I have a jQuery form with multiple fieldsets that switch between each other using jQuery. Eventually, it leads to a submit button. Can someone assist me by editing my jfiddle or providing code on how I can submit this data using JavaScript, j ...

Unable to modify variable to play audio

As I work on constructing my website, I am incorporating various sounds to enhance user experience when interacting with buttons and other elements. However, managing multiple audio files has proven challenging, as overlapping sounds often result in no aud ...

Animation of hand-drawn letters using SVG technology

I'm exploring SVG animations and am currently struggling with animating a slogan letter by letter. The font is handwritten and should give the effect of being written with a text marker. Can anyone provide me with some tips on how to approach this cha ...

The function driver.find_element is unable to locate an element using the "class_name" attribute

My attempt at using driver.find_element, with the "class_name" method to locate and click on a button for expanding rooms on this website resulted in an error message: raise exception_class(message, screen, stacktrace) selenium.common.exceptions.N ...