Sub menu in mega menu

1

Hi,

I’m working on a personalised version of quark theme,
in navbar I have various menu and sub-menu, here no problem,
but I’m working on a megamenu, where inside there are the products pages, divided by categories. Product is a folder, where inside I have categories and sub-categories.
To not see in standard navbar the link to “products folder” I put hte folder as routable but not visible.

try to be more clear:
in navbar I have the button [PRODUCTS]
the dropdown open the full width menu
inside full width menu I I entered the call to: {% include ‘partials/mega-menu-navigation.html.twig’ %}
the menu is dived in 3 sections (3 columns 60% 20% 20%):
section 1 is for pages in “category one”
section 2 is for pages in “category two”
section 2 is for pages in “category three”
every section have some sub-categories (linked to category page), and direct link to product page.

structure of pages:

inside folder “products”

category one

subcategory one-one

product page “product name 1”

subcategory one-two

product page “product name 2”
product page “product name 3”

category two

subcategory two-one

product page “product name 4”

subcategory two-two

product page “product name 5”
product page “product name 6”

category three

subcategory two-one

product page “product name 7”
product page “product name 8”

TWIG
partials/mega-menu-navigation.html.twig

to show the list of pages I tried to use this code:

    {% for p in page.find('/products/category_one').children if p != page %}
  • {{ p.title }}
    • {% endfor %}

but I see only the list of subcategories, and not his children…

I’ve tried to intend and use the “macro loop” inside “navigation.html.twig”, but without success…

someone can help me?

Many thanks

2

Seems I solved, this is my mega-menu-navigation.html.twig:

{{ page.find('/products/category_one').header.title }}
    <ul class="menu">
        {% for page in pages.find('/products/category_one').children.visible %}
            {% if page.children.visible is empty %}
            <li class="menu-item">
                <a href="{{ page.url }}">{{ page.title }}</a>
                {% else %}
                    <li class="menu-item">
                        <a href="{{ page.url }}">{{ page.title }}</a>
                        <ul class="menu">
                        {% for child in page.children.visible %}
                            {% if child.children.visible is empty %}
                                <li class="menu-item">
                                    <a href="{{ child.url }}">{{ child.title }}</a>
                            {% else %}
                                <li class="menu-item">
                                    <a href="{{ page.url }}">{{ child.title }}</a>
                                    <ul class="menu">
                                    {% for subchild in child.children.visible %}
                                        <li><a href="{{ subchild.url }}">{{ subchild.title }}</a></li>
                                    {% endfor %}
                                    </ul>
                                </li>
                            {% endif %}
                            </li>
                        {% endfor %}
                </ul>
            {% endif %}
            </li>
        {% endfor %}
    </ul>

    
  </div>
  <div class="column col-3">
      <h5 class="text-primary p-2 text-lowercase">{{ page.find('/products/category_two').header.title }}</h5>
      <div class="divider"></div>

      <ul class="menu">
        {% for page in pages.find('/products/category_two').children.visible %}
            {% if page.children.visible is empty %}
            <li class="menu-item">
                <a href="{{ page.url }}">{{ page.title }}</a>
                {% else %}
                    <li class="menu-item">
                        <a href="{{ page.url }}">{{ page.title }}</a>
                        <ul class="menu">
                        {% for child in page.children.visible %}
                            {% if child.children.visible is empty %}
                                <li class="menu-item">
                                    <a href="{{ child.url }}">{{ child.title }}</a>
                            {% else %}
                                <li class="menu-item">
                                    <a href="{{ page.url }}">{{ child.title }}</a>
                                    <ul class="menu">
                                    {% for subchild in child.children.visible %}
                                        <li><a href="{{ subchild.url }}">{{ subchild.title }}</a></li>
                                    {% endfor %}
                                    </ul>
                                </li>
                            {% endif %}
                            </li>
                        {% endfor %}
                </ul>
            {% endif %}
            </li>
        {% endfor %}
    </ul>
      
  </div>
  <div class="column col-2">
    <h5 class="p-2"><span class="label label-error"></span></h5>
    <div class="divider"></div>
    
  </div>

  

</div>

:smiley:

1 Like