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

  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 twtHeaderPhoneType = theme_config('twt-header-phone-type') %}
  13. {% set twtHeaderPhoneCartBtnHighlighting = theme_config('twt-header-phone-cart-btn-highlighting') %}
  14. {% set twtHeaderPhoneBtnHome = theme_config('twt-header-phone-btn-home') %}
  15. {% set twtIconSet = theme_config('twt-iconset') %}
  16. {% set twtNavMainShow = theme_config('twt-nav-main-show') %}
  18. {% set twtHeaderTypeCompatibility = theme_config('twt-header-type-compatibility') %}
  20. {% set twtNavMainShow = theme_config('twt-nav-main-show') %}
  21. {% set twtUspBarHeaderLayout = theme_config('twt-usp-bar-header-layout') %}
  23. {# ---------------- END: SET TEMPLATE VARS ---------------- #}
  25. {# @TODO: Add "twtHeaderTypeCompatibility"-if to disable all header-adjustments #}
  27. {# @TODO: HC-Architecture... #}
  28. {# ThemeWare: Remove "Top bar" if it has been disabled via the theme configuration #}
  29. {% block layout_top_bar %}
  30.     {% if twtHeaderTopBarShow == 1 %}
  31.         {# Clear block -> Remove top bar #}
  33.     {% else %}
  34.         {# Default block #}
  35.         {{ parent() }}
  37.     {% endif %}
  38. {% endblock %}
  41. {# @TODO: HC-Architecture... #}
  42. {# INFO: Such-Input entfernen falls...
  43.     - ... "Header 2.1" (twt-header-type 4) aktiv ist. (Info: Header 2.1 unterstützt derzeit lediglich die "Flyout-" bzw. "Fullscreen-Suche")
  44.     - ... die "Flyout-Suche" in der Theme-Konfiguration aktiviert wurde.
  45.     - ... die "Fullscreen-Suche" in der Theme-Konfiguration aktiviert wurde.
  46. #}
  47. {% block layout_header_search %}
  48.     {% if twtHeaderSearchType == 2 or twtHeaderSearchType == 4 or twtHeaderType == 4 %}
  49.         {# Clear block -> Remove search input #}
  51.     {% else %}
  52.         {# Default block #}
  53.         {{ parent() }}
  55.     {% endif %}
  56. {% endblock %}
  59. {# @TODO: HC-Architecture... #}
  60. {# ThemeWare: Adjustments of the toggle button of the "Top navigation" #}
  61. {% block layout_header_navigation_toggle %}
  63.     {# ThemeWare: Phone "Home button" #}
  64.     {% if twtHeaderPhoneType == 2 and twtHeaderPhoneBtnHome == 2 %}
  66.         {# Only with "Sales Promoting Navigation" and active home button #}
  67.         {% block twt_layout_header_home_button %}
  68.             <div class="col-auto twt-home-col d-sm-none">
  69.                 <a class="btn header-home-btn header-actions-btn{% if controllerAction is same as('home') %} active{% endif %} home-link"
  70.                 href="{{ path('frontend.home.page') }}" aria-label="Home" 
  71.                 itemprop="url"
  72.                 title="{{ "general.homeLink"|trans|striptags }}">
  73.                     <span class="header-home-icon">
  74.                         <span itemprop="name">{% sw_icon 'home' %}</span>
  75.                     </span>
  76.                 </a>
  77.             </div>
  78.         {% endblock %}
  80.     {% endif %}
  82.     {# ThemeWare: Modify classes to show/hide toggle button #}
  84.     {# ThemeWare: "Phone header" #}
  85.     {# INFO: Klassen für den Phone-Header "Navigation" hinzufügen #}
  86.     {% if twtHeaderPhoneType == 2 %}
  87.         {% set blockClassesMenuButton = ['col-auto col-sm twt-navigation-col'] %}
  88.     {% else %}
  89.         {% set blockClassesMenuButton = ['col'] %}
  90.     {% endif %}
  91.     
  92.     {# ThemeWare: "Top navigation" => hidden #}
  93.     {# INFO: "Top-Navigation" nur mobil anzeigen wenn Sie über die Theme-Konfiguration deaktiviert wurde #}
  94.     {% if twtNavMainShow == 1 %}
  95.         {% set blockClassesMenuButton = ['d-block d-lg-none']|merge(blockClassesMenuButton) %}
  96.     {% endif %}
  99.     {# ThemeWare: "Top navigation" => list #}
  100.     {# INFO: Anpassungen falls die "Top-Navigation" als "Liste" dargestellt werden soll #}
  101.     {% if twtNavMainShow == 2 %}
  102.         {% if twtHeaderType == 4 %}
  103.             {# ThemeWare: Add classes for "Header 2.1" #}
  104.             {% set blockClassesMenuButton = ['d-block d-lg-none']|merge(blockClassesMenuButton) %}
  106.         {% elseif twtHeaderType == 10 %}
  107.             {# ThemeWare: Add classes for "Header 10" #customHeader #}
  108.             {% set blockClassesMenuButton = ['d-none twt-sticky-header-menu-button']|merge(blockClassesMenuButton) %}
  110.         {% else %}
  111.             {# ThemeWare: Add classes for all other headers #}
  112.             {% if twtHeaderSearchType == 2 or twtHeaderSearchType == 4 %}
  113.                 {# ThemeWare: "Flyout search" (twt-header-search-type 2) or "Fullscreen search" (twt-header-search-type 4) active #}
  114.                 {% set blockClassesMenuButton = ['d-block d-lg-none']|merge(blockClassesMenuButton) %}
  115.             {% else %}
  116.                 {% set blockClassesMenuButton = ['d-block d-sm-none']|merge(blockClassesMenuButton) %}
  117.             {% endif %}
  118.         {% endif %}
  119.     {% endif %}
  122.     {# ThemeWare: "Top navigation" => button #}
  123.     {# INFO: Anpassungen falls die "Top-Navigation" als "Button" (default) dargestellt werden soll... #}
  124.     {% if twtNavMainShow == 3 %}
  125.         {# ThemeWare: Add classes for the "flyout search" or the "fullscreen search" #}
  126.         {% if twtHeaderSearchType == 2 or twtHeaderSearchType == 4 %}
  127.             {% set blockClassesMenuButton = ['d-block']|merge(blockClassesMenuButton) %}
  129.         {% else %}
  130.             {# ThemeWare: Add classes for "Header 2.1" #}
  131.             {% if twtHeaderType == 4 %}
  132.                 {% set blockClassesMenuButton = ['d-sm-block']|merge(blockClassesMenuButton) %}
  133.             {% else %}
  134.                 {% set blockClassesMenuButton = ['d-sm-none d-lg-block']|merge(blockClassesMenuButton) %}
  135.             {% endif %}
  136.         {% endif %}
  137.     {% endif %}
  140.     {# ThemeWare: Adjustments to the "Top navigation" toggle button #}
  141.     {# INFO: Klassen (siehe oben) hinzufügen und Label "Navigation" ergänzen #}
  142.     <div class="{{ blockClassesMenuButton|join(' ') }}">
  143.         <div class="menu-button">
  145.             {% block layout_header_navigation_toggle_button %}
  146.                 <button class="btn nav-main-toggle-btn header-actions-btn"
  147.                         type="button"
  148.                         title="{{ "twt.header.offcanvasMenuText"|trans }}"
  149.                         data-offcanvas-menu="true"
  150.                         aria-label="{{ "general.menuLink"|trans|striptags }}">
  152.                     {% block layout_header_navigation_toggle_button_icon %}
  153.                         {# ThemeWare: Replace icon #}
  154.                         {% if twtIconSet is not same as ('default') %}
  155.                             {% sw_icon 'stack' style {'pack':'themeware'} %}
  156.                         {% else %}
  157.                             {% sw_icon 'stack' %}
  158.                         {% endif %}
  159.                     {% endblock %}
  161.                     {# ThemeWare: Add label "Navigation" to the toggle button #}
  162.                     <span class="header-nav-main-toggle-label">
  163.                         {{ "twt.header.offcanvasMenuText"|trans }}
  164.                     </span>
  165.                 </button>
  166.             {% endblock %}
  168.         </div>
  169.     </div>
  170. {% endblock %}
  173. {# ThemeWare: Adjustments on the toggle button of the "Top navigation". @tablet #}
  174. {#
  175. {% block layout_header_navigation_toggle_tablet %}{% endblock %}
  176. #}
  179. {# @TODO: HC-Architecture... #}
  180. {# ThemeWare: Adjustments on the icon of the "Top navigation" toggle button @tablet #}
  181. {# @TODO: Default-Konfiguration ergänzen... #}
  182. {# @TODO: Mit toggle button (siehe oben) abgleichen... #}
  183. {% block layout_header_navigation_toggle_tablet_button_icon %}
  184.     {# ThemeWare: Replace icon #}
  185.     {% if twtIconSet is not same as ('default') %}
  186.         {% sw_icon 'stack' style {'pack':'themeware'} %}
  187.     {% else %}
  188.         {% sw_icon 'stack' %}
  189.     {% endif %}
  191.     {# ThemeWare: Add label "Navigation" to the toggle button #}
  192.     <span class="header-nav-main-toggle-label">
  193.         {{ "twt.header.offcanvasMenuText"|trans }}
  194.     </span>
  195. {% endblock %}
  198. {# @TODO: HC-Architecture... #}
  199. {# ThemeWare: Anpassungen am Toggle-Button der Suche
  200.     - $twt-header-search-show: 1 don't, 2 show > d-none
  201.     - $twt-header-search-type: 1 input, 2 flyout > d-sm-none
  202. #}
  203. {# @TODO:
  204.     - Default-Konfiguration ergänzen...
  205.     - "Header 2.1" (twt-header-type 4) ggf. berücksichtigen ?!
  206. #}
  207. {% block layout_header_search_toggle %}
  208.     {# ThemeWare: Modify classes to show/hide the toggle button #}
  209.     {% set blockClassesSearchToggle = ['col-auto twt-search-col'] %}
  211.     {# ThemeWare: "Search" => hidden #}
  212.     {% if twtHeaderSearchShow == 1 %}
  213.         {% set blockClassesSearchToggle = ['d-none']|merge(blockClassesSearchToggle) %}
  214.     {% endif %}
  216.     {# ThemeWare: Add classes if the "Flyout search" (twt-header-search-type 2) or the "Fullscreen search" (twt-header-search-type 4) are not active #}
  217.     {% if twtHeaderSearchType != 2 and twtHeaderSearchType != 4 %}
  218.         {% set blockClassesSearchToggle = ['d-sm-none']|merge(blockClassesSearchToggle) %}
  219.     {% endif %}
  221.     {#  ThemeWare: Hide toggle button in "Header 2.1" (twt-header-type 4) or if "Flyout search" or "Fullscreen search" are active #}
  222.     {% if twtHeaderSearchType != 2 and twtHeaderSearchType != 4 %}
  223.         {% if twtHeaderType == 4 %}
  224.             {% set blockClassesSearchToggle = ['d-none'] %}
  225.         {% endif %}
  226.     {% endif %}
  228.     <div class="{{ blockClassesSearchToggle|join(' ') }}">
  229.           <div class="search-toggle">
  230.                 <button class="btn header-actions-btn search-toggle-btn js-search-toggle-btn collapsed"
  231.                           type="button"
  232.                           data-bs-toggle="collapse"
  233.                           data-bs-target="#searchCollapse"
  234.                           aria-expanded="false"
  235.                           aria-controls="searchCollapse"
  236.                           aria-label="{{ "header.searchButton"|trans|striptags }}">
  238.                     {# ThemeWare: Add wrapper around icon and 'x' icon #}
  239.                     <span class="header-search-toggle-icon">
  240.                         {% if twtIconSet is not same as ('default') %}
  241.                             {% sw_icon 'search' style {'pack':'themeware'} %}
  242.                         {% else %}
  243.                             {% sw_icon 'search' %}
  244.                         {% endif %}
  246.                         {% if twtIconSet is not same as ('default') %}
  247.                             {% sw_icon 'x' style {'pack':'themeware'} %}
  248.                         {% else %}
  249.                             {% sw_icon 'x' %}
  250.                         {% endif %}
  251.                     </span>
  253.                     {# ThemeWare: Add label to toggle button #}
  254.                     <span class="header-search-toggle-name">
  255.                         {{ "twt.header.searchText"|trans }}
  256.                     </span>
  257.                 </button>
  258.           </div>
  259.      </div>
  260. {% endblock %}
  263. {# @TODO: HC-Architecture... #}
  264. {# ThemeWare: "Header 10" (twt-header-type 10) #customHeader #}
  265. {# INFO: Aufbau für den Custom-Header modifizieren #}
  266. {% block layout_header_navigation %}
  267.     {% if twtHeaderType == 10 %}
  268.         <div class="nav-header {{ navHeaderClasses|join(' ') }}">
  269.             <div class="container">
  270.                 <div class="row align-items-center header-row {{ headerRowClasses }}">
  272.                     {{ block('layout_header_logo') }}
  274.                     {% block twt_layout_header_main_navigation %}
  275.                         <div class="header-nav-col nav-main d-none col-lg">
  276.                             {% block twt_layout_header_main_navigation_inner %}
  277.                                 {% sw_include '@Storefront/storefront/layout/navigation/navigation.html.twig' %}
  278.                             {% endblock %}
  279.                         </div>
  280.                     {% endblock %}
  282.                     {{ block('layout_header_search') }}
  284.                     {{ block('layout_header_actions') }}
  286.                 </div>
  287.             </div>
  288.         </div>
  290.     {% else %}
  291.         {# Default block #}
  292.         {{ parent() }}
  294.     {% endif %}
  295. {% endblock %}
  298. {# ThemeWare: Add classes for the "Cart button" in phone header (Cart highlighting) #}
  299. {% block layout_header_actions_cart %}
  300.     {% if twtHeaderPhoneType == 2 and twtHeaderPhoneCartBtnHighlighting == 2 %}
  301.         <div class="col-auto twt-cart-col">
  302.             <div class="header-cart"
  303.                 data-offcanvas-cart="true">
  304.                 <a class="btn header-cart-btn header-actions-btn"
  305.                 href="{{ path('frontend.checkout.cart.page') }}"
  306.                 data-cart-widget="true"
  307.                 title="{{ 'checkout.cartTitle'|trans|striptags }}"
  308.                 aria-label="{{ 'checkout.cartTitle'|trans|striptags }}">
  309.                     {% sw_include '@Storefront/storefront/layout/header/actions/cart-widget.html.twig' %}
  310.                 </a>
  311.             </div>
  312.         </div>
  314.     {% else %}
  315.         {# Default block #}
  316.         {{ parent() }}
  318.     {% endif %}
  319. {% endblock %}
  322. {# ThemeWare: Add classes for the "Wishlist button" in phone header (Cart highlighting) #}
  323. {% block layout_header_actions_wishlist %}
  324.     {% if twtHeaderPhoneType == 2 and twtHeaderPhoneCartBtnHighlighting == 2 %}
  325.         <div class="col-auto twt-wishlist-col">
  326.             <div class="header-wishlist">
  327.                 <a class="btn header-wishlist-btn header-actions-btn"
  328.                 href="{{ path('frontend.wishlist.page') }}"
  329.                 title="{{ 'header.wishlist'|trans|striptags }}"
  330.                 aria-label="{{ 'header.wishlist'|trans|striptags }}">
  331.                     {% sw_include '@Storefront/storefront/layout/header/actions/wishlist-widget.html.twig' %}
  332.                 </a>
  333.             </div>
  334.         </div>
  336.     {% else %}
  337.         {# Default block #}
  338.         {{ parent() }}
  340.     {% endif %}
  341. {% endblock %}
  344. {# ThemeWare: Add classes for the "Account button" in phone header. (Cart highlighting) #}
  345. {% block layout_header_actions_account %}
  346.     {% if twtHeaderPhoneType == 2 and twtHeaderPhoneCartBtnHighlighting == 2 %}
  347.         <div class="col-auto twt-account-col">
  348.             <div class="account-menu">
  349.                 {% sw_include '@Storefront/storefront/layout/header/actions/account-widget.html.twig' %}
  350.             </div>
  351.         </div>
  353.     {% else %}
  354.         {# Default block #}
  355.         {{ parent() }}
  357.     {% endif %}
  358. {% endblock %}