Empire Theme - Hide Empty Collections from Main Menu

Highlighted
New Member
1 0 0

I am trying to hide Collections from the Main Menu that do not have products yet. Once products are added, we want to show the menu item. Here is code and also code for mobile. What needs to be changed?

 

navmenu.liquid

{%- capture meganav_classes -%}
navmenu-submenu
navmenu-meganav
navmenu-meganav--desktop
{%- endcapture -%}

{%- capture navmenu_classes -%}
navmenu
navmenu-depth-2
navmenu-meganav-items
{%- endcapture -%}

{% assign list_max_width = 0 %}
{% if menu.links.size <= 4 %}
{% assign available_width = 1000 %}
{% if meganav_block.settings.image_1 %}
{% case meganav_block.settings.size_1 %}
{% when 'small' %}{% assign available_width = available_width | minus: 200 %}
{% when 'medium' %}{% assign available_width = available_width | minus: 300 %}
{% when 'large' %}{% assign available_width = available_width | minus: 400 %}
{% endcase %}
{% endif %}
{% if meganav_block.settings.image_2 %}
{% case meganav_block.settings.size_2 %}
{% when 'small' %}{% assign available_width = available_width | minus: 200 %}
{% when 'medium' %}{% assign available_width = available_width | minus: 300 %}
{% when 'large' %}{% assign available_width = available_width | minus: 400 %}
{% endcase %}
{% endif %}

{% assign desired_width = 225 | times: menu.links.size %}

{% if desired_width < available_width %}
{% assign list_max_width = desired_width %}
{% endif %}
{% endif %}

<div
class="{{ meganav_classes | strip_newlines }}"
data-navmenu-submenu
data-meganav-menu
data-meganav-id="{{ meganav_block.id }}"
>
<div class="navmenu-meganav-wrapper">
{%
include 'meganav-promo',
meganav_block: meganav_block,
position: 'first'
%}
<ul
class="{{ navmenu_classes | strip_newlines }}"
{% if list_max_width > 0 %}style="max-width: {{ list_max_width }}px"{% endif %}
>
{% for menu_item in menu.links %}
{%- capture navmenu_item_classes -%}
navmenu-item
navmenu-item-parent
navmenu-id-{{ menu_item.title | handle }}
navmenu-meganav-item
{%- endcapture -%}

<li
class="{{ navmenu_item_classes | strip_newlines }}"
{% if menu_item.links.size > 0 %}data-navmenu-trigger{% endif %}
{% if linklists[menu_item.handle] != blank %}data-navmenu-parent{% endif %}
{{ block.shopify_attributes }}>
<a href="{{ menu_item.url }}" class="navmenu-item-text navmenu-link-parent">
{{ menu_item.title }}
</a>

{% if menu_item.links.size > 0 %}
{% include
'mobile-navmenu-button',
button_label: menu_item.title,
depth: depth,
%}
{% endif %}

{%
include 'navlist',
menu_list: linklists[menu_item.handle].links,
depth: 3,
max_depth: 3,
is_submenu: true,
has_triggers: true,
submenu_arrows: true,
aria_expanded: true,
is_mobile: false,
%}
</li>
{% endfor %}
</ul>
{%
include 'meganav-promo',
meganav_block: meganav_block,
position: 'last'
%}
</div>
</div>

 

mobile-nav-list.liquid

<ul
class="navmenu navmenu-depth-1"
data-navmenu
{% if menu_title %}aria-label="{{ menu_title }}"{% endif %}
>
{% for menu_item in menu_list %}
{% assign show_subnav = true %}
{% if linklists[menu_item.handle] == blank %}
{% assign show_subnav = false %}
{% endif %}

{% assign meganav_block = null %}
{% assign meganav_trigger = null %}
{% if blocks.size > 0 %}
{% for block in blocks %}
{% if block.type == 'meganav_images' %}
{% assign meganav_trigger = block.settings.meganav_trigger | handle | strip %}
{% endif %}

{% if menu_item.handle == meganav_trigger and menu_item.links.size > 0 %}
{% assign meganav_block = block %}
{% elsif menu_item.title == meganav_trigger %}
{% assign meganav_block = block %}
{% endif %}
{% endfor %}
{% endif %}

{%- capture navmenu_item_classes -%}
navmenu-item
{% if show_subnav %}navmenu-item-parent{% endif %}
navmenu-id-{{ menu_item.handle }}
{%- endcapture -%}

<li
class="{{ navmenu_item_classes | strip_newlines }}"
{% if show_subnav %}data-navmenu-parent{% endif %}
>
<a
class="navmenu-link {% if show_subnav %}navmenu-link-parent{% endif %} {% if menu_item.active %}navmenu-link-active{% endif %}"
href="{{ menu_item.url }}"
{% if show_subnav %}
aria-haspopup="true"
aria-expanded="false"
{% endif %}
>
{{ menu_item.title }}
</a>

{% if show_subnav %}
{%
include 'mobile-navmenu-button',
button_label: menu_item.title,
%}
{% endif %}

{% if meganav_block %}
<div class="navmenu-submenu navmenu-meganav" data-navmenu-submenu>
{%
include 'meganav-promo',
meganav_block: meganav_block,
position: 'first'
%}
{% endif %}

{% if show_subnav %}
{%
include 'navlist',
menu_list: linklists[menu_item.handle].links,
depth: 2,
max_depth: 3,
show_arrows: true,
aria_expanded: false,
is_mobile: true,
%}
{% endif %}

{% if meganav_block %}
{%
include 'meganav-promo',
meganav_block: meganav_block,
position: 'last'
%}
</div>
{% endif %}
</li>
{% endfor %}
</ul>

0 Likes