Boundless theme navigation three sub levels on the action bar menu

Highlighted
Explorer
67 0 10

Hi, 

I am using the boundless theme with three sub levels on the action bar menu (e.g. CLOTHING - UPPER BODY - TOPS)  now when you are in TOPS and you click on the back button the menu displays directly the main menu level, I would like it instead to display the 2nd sub menu level, meaning all the categories that are in the same level as "UPPER BODY". This way the user can navigate through all levels of the menu. Would really appreciate your help on this!

 

<!-- snippets/action-bar.liquid -->
{% comment %}
  Action Bar
    - Only appears on pages which contain a link that is in the action bar
    - Exceptions: always on for collections. Always off for product.

    To remove the action bar, remove or comment out `{% include 'action-bar' %}
    anythwere it appears.

LO HE METIDO YO 3rd level action bar
{% endcomment %}


{% assign action_bar_main_active = true %}
{% for link in linklists[section.settings.action_bar_link_list].links %}
  {% if link.active or template.name == 'index' or template.name == 'collection' %}
    {% assign child_list_handle = link.title | handleize %}
    {% if link.links == blank and link.active %}
      {% assign action_bar_active_url = link.url %}
    {% endif %}

    {% if link.links != blank %}
      {% for childlink in link.links %}
	{% if childlink.active or template.name == 'index' or template.name == 'collection' %}
		{% assign grandchild_list_handle = childlink.title | handleize %}
	{% if childlink.active or link.active %}
		{% assign active_child_link = true %}
		{% assign active_child_link_handle = child_list_handle %}

{% comment %}
make sure we're handling duplicate links in the action bar and
sub action bar menus.
{% endcomment %}

{% if childlink.active.url == action_bar_active_url %}
	{% assign action_bar_main_active = false %}      
{% endif %}
  
{% if childlink.links != blank %}
{% for grandchildlink in childlink.links %}
	{% if  grandchildlink.active or childlink.active %}
		{% assign active_grandchild_link = true %}
		{% assign active_grandchild_link_handle = grandchild_list_handle %}
	{% endif %}
{% endfor %}
{% endif %}
  
{% endif %}
{% endif %}
      {% endfor %}
    {% endif %}
  {% endif %}
{% endfor %}


  {% comment %}
    If on index, it should be at the bottom of the hero area
  {% endcomment %}
  <div class="action-bar-wrapper {% if template.name == 'index' %} action-bar--hero{% endif %} {% if section.settings.action_bar_link_list == blank %} hide {% endif %}" data-section-id="{{ section.id }}" data-section-type="action-bar-section">


    <nav class="action-bar action-bar--has-menu" role="presentation">
      <ul class="action-bar__menu--main action-bar__menu list--inline {% if action_bar_main_active %} action-bar--show{% endif %}" id="SiteNav" role="navigation">
        {% comment %}
          Assign which child linklist is associated with the action bar
          link
        {% endcomment %}
        {% for link in linklists[section.settings.action_bar_link_list].links %}
          {% assign child_list_handle = link.title | handleize %}
          {% if link.links != blank %}
            {% if child_list_handle == active_child_link_handle %}
              {% assign active_children = true %}
            {% else %}
              {% assign active_children = false %}
            {% endif %}
        	{% comment %} Removed by MattB @shopify on Jun. 04, 2020
            <li class="action-bar__menu-item action-bar--has-dropdown{% if link.active or active_children %} action-bar--active{% endif %}{% if active_children %} action-bar--disabled{% endif %}" data-child-list-handle="{{ child_list_handle }}" >
              <a href="{{ link.url }}" class="action-bar__link" aria-controls="{{ child_list_handle | capitalize }}">{{ link.title }}</a>
            </li>
        	{% endcomment %}
        	{% comment %} Added by MattB @shopify on Jun. 04, 2020 {% endcomment %} 
            <li class="action-bar__menu-item action-bar--has-dropdown{% if link.active or active_children %} action-bar--active{% endif %}" data-child-list-handle="{{ child_list_handle }}" >
              <a href="{{ link.url }}" class="action-bar__link" aria-controls="{{ child_list_handle | capitalize }}">{{ link.title }}</a>
            </li>
            {% comment %} End of code edits by MattB @shopify on Jun. 04, 2020 {% endcomment %} 
          {% else %}
            <li class="action-bar__menu-item {% if link.active %}action-bar--active{% endif %}">
              <a href="{{ link.url }}" class="action-bar__link">{{ link.title }}</a>
            </li>
          {% endif %}
        {% endfor %}
      </ul>

      {% for link in linklists[section.settings.action_bar_link_list].links %}
        {% assign child_list_handle = link.title | handleize %}
        {% if link.links != blank %}
          <ul class="action-bar__menu--sub action-bar__menu list--inline  {% if child_list_handle == active_child_link_handle %} action-bar--show{% endif %}" id="{{ child_list_handle | capitalize }}" data-child-list-handle="{{ child_list_handle }}" role="navigation">
            <li>
              <button type="button" class="btn action-bar__back action-bar__link" aria-controls="SiteNav">
                <span class="icon icon-arrow-left" aria-hidden="true"></span>
                <span class="icon__fallback-text">{{ 'layout.navigation.action_bar_back' | t }}</span>
              </button>
            </li>
            {% for childlink in link.links %}
              <li class="action-bar__menu-item {% if childlink.active %}action-bar--active{% endif %}">
                <a href="{{ childlink.url }}" class="action-bar__link">{{ childlink.title | escape }}</a>
              </li>
            {% endfor %}
          </ul>
        {% endif %}
      {% endfor %}
  
  {% for link in linklists[section.settings.action_bar_link_list].links %}
{% if link.links != blank %}
{% for childlink in link.links %}
  {% assign grandchild_list_handle = childlink.title | handleize %}
{% if childlink.links != blank %}
<ul class="action-bar__menu--sub action-bar__menu list--inline  {% if grandchild_list_handle == active_grandchild_link_handle %} action-bar--show{% endif %}" id="{{ grandchild_list_handle | capitalize }}" data-grandchild-list-handle="{{ grandchild_list_handle }}" role="navigation">
  <li>
  <button type="button" class="btn action-bar__back action-bar__link" aria-controls="SiteNav">
  <span class="icon icon-arrow-left" aria-hidden="true"></span>
  <span class="icon__fallback-text">{{ 'layout.navigation.action_bar_back' | t }}</span>
  </button>
  </li>
  {% for grandchildlink in childlink.links %}
  <li class="action-bar__menu-item {% if grandchildlink.active %}action-bar--active{% endif %}">
  <a href="{{ grandchildlink.url }}" class="action-bar__link">{{ grandchildlink.title | escape }}</a>
  </li>
  {% endfor %}
</ul>
  
  {% endif %}
{% endfor %}
{% endif %}
  {% endfor %}
  
  
    </nav>
  </div>
0 Likes