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