custom/plugins/TcinnThemeWareModern/src/Resources/views/storefront/layout/header/header.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/layout/header/header.html.twig' %}
  2. {# TODO: prüfen... #}
  3. {# ---------------- START: SET TEMPLATE VARS ---------------- #}
  4. {# ThemeWare: Set theme variables #}
  5. {% set twtHeaderSearchShow = theme_config('twt-header-search-show') %}
  6. {% set twtHeaderSearchType = theme_config('twt-header-search-type') %}
  7. {% set twtHeaderTopBarShow = theme_config('twt-header-top-bar-show') %}
  8. {% set twtHeaderType = theme_config('twt-header-type') %}
  9. {% set twtNavMainShow = theme_config('twt-nav-main-show') %}
  10. {% set twtHeaderTypeCompatibility = theme_config('twt-header-type-compatibility') %}
  11. {% set twtNavMainShow = theme_config('twt-nav-main-show') %}
  12. {% set twtUspBarHeaderLayout = theme_config('twt-usp-bar-header-layout') %}
  13. {# ---------------- END: SET TEMPLATE VARS ---------------- #}
  14. {# TODO: Add "twtHeaderTypeCompatibility"-if to disable all header-adjustments #}
  15. {# TODO: HC-Architecture... #}
  16. {# ThemeWare: "Top-Bar" entfernen falls diese über die Theme-Konfiguration deaktiviert wurde. #}
  17. {% block layout_top_bar %}
  18.     {% if twtHeaderTopBarShow == 1 %}
  19.         {# ThemeWare: Remove top bar #}
  20.     {% else %}
  21.         {# Default block #}
  22.         {{ parent() }}
  23.     {% endif %}
  24. {% endblock %}
  25. {# TODO: HC-Architecture... #}
  26. {# ThemeWare: Such-Input entfernen falls...
  27.     - ... "Header 2.1" (twt-header-type 4) aktiv ist. (Info: Header 2.1 unterstützt derzeit lediglich die "Flyout-" bzw. "Fullscreen-Suche")
  28.     - ... die "Flyout-Suche" in der Theme-Konfiguration aktiviert wurde.
  29.     - ... die "Fullscreen-Suche" in der Theme-Konfiguration aktiviert wurde.
  30. #}
  31. {% block layout_header_search %}
  32.     {% if twtHeaderSearchType == 2 or twtHeaderSearchType == 4 or twtHeaderType == 4 %}
  33.         {# ThemeWare: Remove search input #}
  34.     {% else %}
  35.         {# Default block #}
  36.         {{ parent() }}
  37.     {% endif %}
  38. {% endblock %}
  39. {# TODO: HC-Architecture... #}
  40. {# ThemeWare: Anpassungen am Toggle-Button der "Top-Navigation" #}
  41. {% block layout_header_navigation_toggle %}
  42.     {# ThemeWare: Klassen modifizieren um den Toggle-Button ein-/auszublenden. #}
  43.     {% set blockClassesMenuButton = ['col'] %}
  44.     
  45.     {# ThemeWare: 'Top navigation' => hidden #}
  46.     {# "Top-Navigation" nur mobil anzeigen wenn Sie über die Theme-Konfiguration deaktiviert wurde #}
  47.     {% if twtNavMainShow == 1 %}
  48.         {% set blockClassesMenuButton = ['d-block d-lg-none']|merge(blockClassesMenuButton) %}
  49.     {% endif %}
  50.     
  51.     {# ThemeWare: 'Top navigation' => list #}
  52.     {# Anpassungen falls die "Top-Navigation" als "Liste" dargestellt werden soll #}
  53.     {% if twtNavMainShow == 2  %}
  54.         {% if twtHeaderType == 4 %}
  55.             {# ThemeWare: Klassen für "Header 2.1" hinzufügen #}
  56.             {% set blockClassesMenuButton = ['d-block d-lg-none']|merge(blockClassesMenuButton) %}
  57.         {% elseif twtHeaderType == 10 %}
  58.             {# ThemeWare: Klassen für "Header 10" hinzufügen   #customHeader #}
  59.             {% set blockClassesMenuButton = ['d-none twt-sticky-header-menu-button']|merge(blockClassesMenuButton) %}
  60.         {% else %}
  61.             {# ThemeWare: Klassen für alle anderen Header hinzufügen #}
  62.             {% if twtHeaderSearchType == 2 or twtHeaderSearchType == 4 %}
  63.                 {# ThemeWare: "Flyout search" (twt-header-search-type 2) oder "Fullscreen search" (twt-header-search-type 4) aktiv #}
  64.                 {% set blockClassesMenuButton = ['d-block d-lg-none']|merge(blockClassesMenuButton) %}
  65.             {% else %}
  66.                 {% set blockClassesMenuButton = ['d-block d-sm-none']|merge(blockClassesMenuButton) %}
  67.             {% endif %}
  68.         {% endif %}
  69.     {% endif %}
  70.     
  71.     {# ThemeWare: 'Top navigation' => button #}
  72.     {# Anpassungen falls die "Top-Navigation" als "Button" (default) dargestellt werden soll... #}
  73.     {% if twtNavMainShow == 3 %}
  74.         {# ThemeWare: Klassen für die "Flyout-Suche" oder die "Fullscreen-Suche" hinzufügen #}
  75.         {% if twtHeaderSearchType == 2 or twtHeaderSearchType == 4 %}
  76.             {% set blockClassesMenuButton = ['d-block']|merge(blockClassesMenuButton) %}
  77.         {% else %}
  78.             {# ThemeWare: Klassen für "Header 2.1" hinzufügen #}
  79.             {% if twtHeaderType == 4 %}
  80.                 {% set blockClassesMenuButton = ['d-sm-block']|merge(blockClassesMenuButton) %}
  81.             {% else %}
  82.                 {% set blockClassesMenuButton = ['d-sm-none d-lg-block']|merge(blockClassesMenuButton) %}
  83.             {% endif %}
  84.         {% endif %}
  85.     {% endif %}
  86.     {# ThemeWare: Anpassungen am Toggle-Button der "Top-Navigation" #}
  87.     {# Klassen (siehe oben) hinzufügen und Label 'Navigation' ergänzen #}
  88.     <div class="{{ blockClassesMenuButton|join(' ') }}">
  89.         <div class="menu-button">
  90.             {% block layout_header_navigation_toggle_button %}
  91.                 <button class="btn nav-main-toggle-btn header-actions-btn"
  92.                         type="button"
  93.                         title="{{ "twt.header.offcanvasMenuText"|trans }}"
  94.                         data-offcanvas-menu="true"
  95.                         aria-label="{{ "general.menuLink"|trans|striptags }}">
  96.                     {% block layout_header_navigation_toggle_button_icon %}
  97.                         {% sw_icon 'stack' %}
  98.                     {% endblock %}
  99.                     {# ThemeWare: Label 'Navigation' zum Toggle-Button hinzufügen #}
  100.                     <span class="header-nav-main-toggle-label">
  101.                         {{ "twt.header.offcanvasMenuText"|trans }}
  102.                     </span>
  103.                 </button>
  104.             {% endblock %}
  105.         </div>
  106.     </div>
  107. {% endblock %}
  108. {# ThemeWare: Anpassungen am Toggle-Button der "Top-Navigation" @tablet #}
  109. {#
  110. {% block layout_header_navigation_toggle_tablet  %}{% endblock %}
  111. #}
  112. {# TODO: HC-Architecture... #}
  113. {# ThemeWare: Anpassungen am Icon vom Toggle-Button der "Top-Navigation" @tablet #}
  114. {# TODO: Default-Konfiguration ergänzen... #}
  115. {# TODO: Mit toggle button (siehe oben) abgleichen... #}
  116. {% block layout_header_navigation_toggle_tablet_button_icon %}
  117.     {% sw_icon 'stack' %}
  118.     {# ThemeWare: Label 'Navigation' zum Toggle-Button hinzufügen #}
  119.     <span class="header-nav-main-toggle-label">
  120.         {{ "twt.header.offcanvasMenuText"|trans }}
  121.     </span>
  122. {% endblock %}
  123. {# TODO: HC-Architecture... #}
  124. {# ThemeWare: Anpassungen am Toggle-Button der Suche
  125.     - $twt-header-search-show: 1 don't, 2 show > d-none
  126.     - $twt-header-search-type: 1 input, 2 flyout > d-sm-none
  127. #}
  128. {# TODO:
  129.     - Default-Konfiguration ergänzen...
  130.     - "Header 2.1" (twt-header-type 4) ggf. berücksichtigen ?!
  131. #}
  132. {% block layout_header_search_toggle %}
  133.     {# ThemeWare: Klassen modifizieren um den Toggle-Button ein-/auszublenden. #}
  134.     {% set blockClassesSearchToggle = ['col-auto'] %}
  135.     {# ThemeWare: 'Search' => hidden #}
  136.     {% if twtHeaderSearchShow == 1 %}
  137.         {% set blockClassesSearchToggle = ['d-none']|merge(blockClassesSearchToggle) %}
  138.     {% endif %}
  139.     {# ThemeWare: Klassen hinzufpgen falls nicht die "Flyout search" (twt-header-search-type 2) oder "Fullscreen search" (twt-header-search-type 4) aktiv ist. #}
  140.     {% if twtHeaderSearchType != 2 and twtHeaderSearchType != 4 %}
  141.         {% set blockClassesSearchToggle = ['d-sm-none']|merge(blockClassesSearchToggle) %}
  142.     {% endif %}
  143.     {#  ThemeWare: Toggle-Button ausblenden im "Header 2.1" (twt-header-type 4) oder falls die "Flyout search" bzw. die "Fullscreen search" aktiv sind. #}
  144.     {% if twtHeaderSearchType != 2 and twtHeaderSearchType != 4 %}
  145.         {% if twtHeaderType == 4 %}
  146.             {% set blockClassesSearchToggle = ['d-none'] %}
  147.         {% endif %}
  148.     {% endif %}
  149.     <div class="{{ blockClassesSearchToggle|join(' ') }}">
  150.           <div class="search-toggle">
  151.                 <button class="btn header-actions-btn search-toggle-btn js-search-toggle-btn collapsed"
  152.                           type="button"
  153.                           data-toggle="collapse"
  154.                           data-target="#searchCollapse"
  155.                           aria-expanded="false"
  156.                           aria-controls="searchCollapse"
  157.                           aria-label="{{ "header.searchButton"|trans|striptags }}">
  158.                     {# ThemeWare: Wrapper um Icon ergänzen und 'x'-Icon hinzufügen. #}
  159.                      <span class="header-search-toggle-icon">
  160.                          {% sw_icon 'search' %}
  161.                          {% sw_icon 'x' %}
  162.                      </span>
  163.                     {# ThemeWare: Label zum Toggle-Button hinzufügen. #}
  164.                      <span class="header-search-toggle-name">
  165.                         {{ "twt.header.searchText"|trans }}
  166.                      </span>
  167.                 </button>
  168.           </div>
  169.      </div>
  170. {% endblock %}
  171. {# TODO: HC-Architecture... #}
  172. {# ThemeWare: "Header 10" (twt-header-type 10)   #customHeader #}
  173. {# Aufbau für den Custom-Header modifizieren. #}
  174. {% block layout_header_navigation %}
  175.     {% if twtHeaderType == 10 %}
  176.         <div class="nav-header {{ navHeaderClasses|join(' ') }}">
  177.             <div class="container">
  178.                 <div class="header-row row no-gutters align-items-center {{ headerRowClasses }}">
  179.                     {{ block('layout_header_logo') }}
  180.                     {% block twt_layout_header_main_navigation %}
  181.                         <div class="header-nav-col nav-main d-none col-lg">
  182.                             {% block twt_layout_header_main_navigation_inner %}
  183.                                 {% sw_include '@Storefront/storefront/layout/navigation/navigation.html.twig' %}
  184.                             {% endblock %}
  185.                         </div>
  186.                     {% endblock %}
  187.                     {{ block('layout_header_search') }}
  188.                     {{ block('layout_header_actions') }}
  189.                 </div>
  190.             </div>
  191.         </div>
  192.     {% else %}
  193.         {# Default block #}
  194.         {{ parent() }}
  195.     {% endif %}
  196. {% endblock %}