custom/plugins/Itptheme/src/Resources/views/storefront/layout/navigation/navigation.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/layout/navigation/navigation.html.twig' %}
  3. {# CIO-AI-Driven: CSS-first flyouts — each top-level item wraps trigger + panel
  4.    in .main-navigation-item so :hover/:focus-within can open the panel without JS.
  5.    Stock FlyoutMenu JS stays active for touch (is-open flow). #}
  7. {% set megaMenuCategoryId = 'e6245cf3105048d69cb220a9ab115030' %}
  9. {% block layout_main_navigation_menu_items %}
  10.     {% if page.product is defined %}
  11.         {% set activePath = page.product.categoryTree %}
  12.     {% else %}
  13.         {% set activePath = page.header.navigation.active.path %}
  14.     {% endif %}
  16.     {% for treeItem in page.header.navigation.tree %}
  17.         {% set category = treeItem.category %}
  18.         {% set name = category.translated.name %}
  20.         {# @deprecated tag:v6.5.0 - Use "category.id" directly instead. #}
  21.         {% set categorId = category.id %}
  23.         {% set isMegaMenu = category.id == megaMenuCategoryId %}
  24.         {% set hasChildren = treeItem.children|length > 0 %}
  26.         <div class="main-navigation-item{% if isMegaMenu %} is-mega-menu{% endif %}">
  27.             {% block layout_main_navigation_menu_item %}
  28.                 {% if category.type == 'folder' %}
  29.                     <div class="nav-link main-navigation-link{% if isMegaMenu %} is-mega-menu{% endif %}"
  30.                         {% if hasChildren %}
  31.                             data-flyout-menu-trigger="{{ category.id }}"
  32.                             tabindex="0"
  33.                             aria-haspopup="true"
  34.                             aria-expanded="false"
  35.                             aria-controls="navigation-flyout-{{ category.id }}"
  36.                         {% endif %}
  37.                           title="{{ name }}">
  38.                         <div class="main-navigation-link-text">
  39.                             <span itemprop="name">{{ name }}</span>
  40.                         </div>
  41.                     </div>
  42.                 {% else %}
  43.                     <a class="nav-link main-navigation-link{% if category.id == page.header.navigation.active.id or category.id in activePath %} active{% endif %}{% if isMegaMenu %} is-mega-menu{% endif %}"
  44.                        href="{{ category_url(category) }}"
  45.                        itemprop="url"
  46.                        {% if hasChildren %}
  47.                            data-flyout-menu-trigger="{{ category.id }}"
  48.                            aria-haspopup="true"
  49.                            aria-expanded="false"
  50.                            aria-controls="navigation-flyout-{{ category.id }}"
  51.                        {% endif %}
  52.                        {% if category_linknewtab(category) %}target="_blank"{% endif %}
  53.                        title="{{ name }}">
  54.                         <div class="main-navigation-link-text">
  55.                             <span itemprop="name">{{ name }}</span>
  56.                         </div>
  57.                     </a>
  58.                 {% endif %}
  59.             {% endblock %}
  61.             {% if hasChildren %}
  62.                 {% block layout_main_navigation_menu_flyout %}
  63.                     <div class="navigation-flyout{% if isMegaMenu %} has-mega-menu{% endif %}"
  64.                          id="navigation-flyout-{{ category.id }}"
  65.                          data-flyout-menu-id="{{ category.id }}">
  66.                         <div class="container">
  67.                             {% block layout_main_navigation_menu_flyout_include %}
  68.                                 {% sw_include '@Storefront/storefront/layout/navigation/flyout.html.twig' with {navigationTree: treeItem, level: level+1, page: page} only %}
  69.                             {% endblock %}
  70.                         </div>
  71.                     </div>
  72.                 {% endblock %}
  73.             {% endif %}
  74.         </div>
  75.     {% endfor %}
  76. {% endblock %}
  78. {# Stock .navigation-flyouts container is no longer used — panels live inside their item wrapper. #}
  79. {% block layout_main_navigation_menu_flyout_wrapper %}{% endblock %}