How to hide empty collections in nested navigation (Minimal theme)

Solved
Highlighted
New Member
2 0 0

Hello! I am trying to figure out how to hide empty collections in a nested linklist navigation menu (using the Minimal theme). There are several threads about hiding empty collections and I haven't been able to get any of them to work for nested links. 

 

For example, if I have a nested navigation group of MLB > Boston Red Sox, New York Yankees wherein MLB is a top-level collection consisting of Boston Red Sox, a sub-collection menu item that has items in it, but New York Yankees, another sub-collection menu item that does not have items in it, I wish to hide the New York Yankees collection. The use case is that I will have varying inventory among all of my created collections and want to programmatically hide it when products are nonexistent for it.

 

Here is the full code of the `site-nav.liquid` file in the Minimal theme:

 

<nav>
  <ul class="site-nav" id="AccessibleNav">
    {% for link in site-nav.links %}
      {% if link.links != blank %}
      {% assign parent_index = forloop.index %}
        <li 
          class="site-nav--has-dropdown {% if link.active %}site-nav--active{% endif %}"
          aria-haspopup="true">
          <a
            href="{{ link.url }}"
            class="site-nav__link"
            data-meganav-type="parent"
            aria-controls="MenuParent-{{ parent_index }}"
            aria-expanded="false"
            {% unless template.name == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
              {{ link.title | escape }}
              <span class="icon icon-arrow-down" aria-hidden="true"></span>
          </a>
          <ul
            id="MenuParent-{{ parent_index }}"
            class="site-nav__dropdown {% if link.levels == 2 %}site-nav--has-grandchildren{% endif %}"
            data-meganav-dropdown>
            {% for childlink in link.links %}
              {% if childlink.links != blank %}
              {% assign child_index = forloop.index %}
                <li
                  class="site-nav--has-dropdown site-nav--has-dropdown-grandchild {% if childlink.active %}site-nav--active{% endif %}"
                  aria-haspopup="true">
                  <a
                    href="{{ childlink.url }}"
                    class="site-nav__link"
                    aria-controls="MenuChildren-{{ parent_index }}-{{ child_index }}"
                    data-meganav-type="parent"
                    {% unless template.name == 'index' %}{% if childlink.active %}aria-current="page"{% endif %}{% endunless%}
                    tabindex="-1">
                      {{ childlink.title | escape }}
                      <span class="icon icon-arrow-down" aria-hidden="true"></span>
                  </a>
                  <ul
                    id="MenuChildren-{{ parent_index }}-{{ child_index }}"
                    class="site-nav__dropdown-grandchild"
                    data-meganav-dropdown>
                    {% for grandchildlink in childlink.links %}
                      <li{% if grandchildlink.active %} class="site-nav--active"{% endif %}>
                        <a 
                          href="{{ grandchildlink.url }}"
                          class="site-nav__link"
                          data-meganav-type="child"
                          {% unless template.name == 'index' %}{% if grandchildlink.active %}aria-current="page"{% endif %}{% endunless %}
                          tabindex="-1">
                            {{ grandchildlink.title | escape }}
                          </a>
                      </li>
                    {% endfor %}
                  </ul>
                </li>
              {% else %}
                <li{% if childlink.active %} class="site-nav--active"{% endif %}>
                  <a
                    href="{{ childlink.url }}"
                    class="site-nav__link"
                    data-meganav-type="child"
                    {% if childlink.active %}aria-current="page"{% endif %}
                    tabindex="-1">
                      {{ childlink.title | escape }}
                  </a>
                </li>
              {% endif %}
            {% endfor %}
          </ul>
        </li>
      {% else %}
        <li{% if link.active %} class="site-nav--active"{% endif %}>
          <a
            href="{{ link.url }}"
            class="site-nav__link"
            data-meganav-type="child"
            {% unless template.name == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
              {{ link.title | escape }}
          </a>
        </li>
      {% endif %}
    {% endfor %}
  </ul>
</nav>

I would appreciate any help - thanks!

0 Likes
Highlighted
Shopify Partner
242 59 122

This is an accepted solution.

Hi @santasecondhand,

 

Welcome to the Shopify Community!

 

I understand that you want to hide empty collections in a nested linklist navigation menu (using the Minimal theme). I may be able to help you with this.

 

First, you'll need to create a new theme file called should_skip_link.liquid

 

Step 1: Before you customize your theme:

  • Duplicate your theme to create a backup copy. This makes it easy to discard your changes and start again if you need to.

 

Step 2: Add a new theme file:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Click Actions > Edit code.
    • The code editor shows a directory of theme files on the left, and a space to view and edit the files on the right.
    • When you click a file in the directory on the left, it opens in the code editor.
  3. Find the Snippets folder, and click Add a new snippet.
  4. Type in should_skip_link
  5. Click Create snippet.
  6. Copy/paste this code into the new file:
    {% assign should_skip_link = false %}
    {% if current_link.type == 'collection_link' and current_links.links == blank %}
      {% assign should_skip_link = true %}
      {% for item in current_link.object.products %}
        {% if item.available %}
          {% assign should_skip_link = false %}
        {% endif %}
      {% endfor %}
    {% elsif current_link.type == 'collection_link' %}
      {% assign should_skip_link = true %}
      {% for current_child_link in current_link.links %}
        {% for item in current_child_link.object.products %}
          {% if item.available %}
            {% assign should_skip_link = false %}
          {% endif %}
        {% endfor %}
      {% endfor %}
    {% endif %}
  7. Click Save.

 

Step 3: Edit the site-nav.liquid file:

  1. Open the site-nav.liquid file, located in the Snippets folder.
  2. Replace the entire contents of the file with this code:
    <nav>
      <ul class="site-nav" id="AccessibleNav">
        {% for link in site-nav.links %}
          {% if link.links != blank %}
          {% assign parent_index = forloop.index %}
            {% include 'should_skip_link', current_link: link %}
            {% if should_skip_link == false %}
              <li 
                class="site-nav--has-dropdown {% if link.active %}site-nav--active{% endif %}"
                aria-haspopup="true">
                <a
                  href="{{ link.url }}"
                  class="site-nav__link"
                  data-meganav-type="parent"
                  aria-controls="MenuParent-{{ parent_index }}"
                  aria-expanded="false"
                  {% unless template.name == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
                    {{ link.title | escape }}
                    <span class="icon icon-arrow-down" aria-hidden="true"></span>
                </a>
                <ul
                  id="MenuParent-{{ parent_index }}"
                  class="site-nav__dropdown {% if link.levels == 2 %}site-nav--has-grandchildren{% endif %}"
                  data-meganav-dropdown>
                  {% for childlink in link.links %}
                    {% if childlink.links != blank %}
                    {% assign child_index = forloop.index %}
                      {% include 'should_skip_link', current_link: childlink %}
                      {% if should_skip_link == false %}
                        <li
                          class="site-nav--has-dropdown site-nav--has-dropdown-grandchild {% if childlink.active %}site-nav--active{% endif %}"
                          aria-haspopup="true">
                          <a
                            href="{{ childlink.url }}"
                            class="site-nav__link"
                            aria-controls="MenuChildren-{{ parent_index }}-{{ child_index }}"
                            data-meganav-type="parent"
                            {% unless template.name == 'index' %}{% if childlink.active %}aria-current="page"{% endif %}{% endunless%}
                            tabindex="-1">
                              {{ childlink.title | escape }}
                              <span class="icon icon-arrow-down" aria-hidden="true"></span>
                          </a>
                          <ul
                            id="MenuChildren-{{ parent_index }}-{{ child_index }}"
                            class="site-nav__dropdown-grandchild"
                            data-meganav-dropdown>
                            {% for grandchildlink in childlink.links %}
                              {% include 'should_skip_link', current_link: grandchildlink %}
                              {% if should_skip_link == false %}
                                <li{% if grandchildlink.active %} class="site-nav--active"{% endif %}>
                                  <a 
                                    href="{{ grandchildlink.url }}"
                                    class="site-nav__link"
                                    data-meganav-type="child"
                                    {% unless template.name == 'index' %}{% if grandchildlink.active %}aria-current="page"{% endif %}{% endunless %}
                                    tabindex="-1">
                                      {{ grandchildlink.title | escape }}
                                    </a>
                                </li>
                              {% endif %}
                            {% endfor %}
                          </ul>
                        </li>
                      {% endif %}
                    {% else %}
                      {% include 'should_skip_link', current_link: childlink %}
                      {% if should_skip_link == false %}
                        <li{% if childlink.active %} class="site-nav--active"{% endif %}>
                          <a
                            href="{{ childlink.url }}"
                            class="site-nav__link"
                            data-meganav-type="child"
                            {% if childlink.active %}aria-current="page"{% endif %}
                            tabindex="-1">
                              {{ childlink.title | escape }}
                          </a>
                        </li>
                      {% endif %}
                    {% endif %}
                  {% endfor %}
                </ul>
              </li>
            {% endif %}
          {% else %}
            <li{% if link.active %} class="site-nav--active"{% endif %}>
              <a
                href="{{ link.url }}"
                class="site-nav__link"
                data-meganav-type="child"
                {% unless template.name == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
                  {{ link.title | escape }}
              </a>
            </li>
          {% endif %}
        {% endfor %}
      </ul>
    </nav>
  3. Click Save.

 

Let me know if this solves your problem or if you need further help!

Brian | Shopify Partner | Ecommerce Consultant
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution  
 - Need further assistance? Visit www.BrianAtWork.com

0 Likes
Highlighted
New Member
2 0 0

@BrianAtWork this worked perfectly, thank you!!!

0 Likes
Highlighted
New Member
3 0 0

Hey Brian, 

So I'm having a bit of a problem with this. My sublinks are from the same collection but in the navigation, we had added filters for specific types. I.e. main categories types of clothes and subcategories green shirts and red shirts. 

This issue I'm having with the function you wrote for the should_show_link is that the link.object.products show every product from the full 'shirts' collection when choosing a submenu link like 'green shirts' even though the filters are applied to the product tags. The actually liked page works and only shows green shirts but the nav menu thinks that submenu items that have no products have the products of their parent link because they are from the same collection. 

Do you have any advice for these submenus? Let me know if that doesn't make sense. 

 

Thanks, 

Aaron

 

 

 

 

0 Likes