custom/plugins/TcinnThemeWareStrong/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 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: "Top-Bar" entfernen falls diese über die Theme-Konfiguration deaktiviert wurde. #}
  29. {% block layout_top_bar %}
  30.     {% if twtHeaderTopBarShow == 1 %}
  31.         {# ThemeWare: Remove top bar #}
  32.     {% else %}
  34.         {# Default block #}
  35.         {{ parent() }}
  36.     {% endif %}
  37. {% endblock %}
  40. {# TODO: HC-Architecture... #}
  41. {# ThemeWare: Such-Input entfernen falls...
  42.     - ... "Header 2.1" (twt-header-type 4) aktiv ist. (Info: Header 2.1 unterstützt derzeit lediglich die "Flyout-" bzw. "Fullscreen-Suche")
  43.     - ... die "Flyout-Suche" in der Theme-Konfiguration aktiviert wurde.
  44.     - ... die "Fullscreen-Suche" in der Theme-Konfiguration aktiviert wurde.
  45. #}
  46. {% block layout_header_search %}
  47.     {% if twtHeaderSearchType == 2 or twtHeaderSearchType == 4 or twtHeaderType == 4 %}
  48.         {# ThemeWare: Remove search input #}
  49.     {% else %}
  51.         {# Default block #}
  52.         {{ parent() }}
  53.     {% endif %}
  54. {% endblock %}
  57. {# TODO: HC-Architecture... #}
  58. {# ThemeWare: Anpassungen am Toggle-Button der "Top-Navigation" #}
  59. {% block layout_header_navigation_toggle %}
  61.     {# ThemeWare: Phone Home Button #}
  62.     {% if twtHeaderPhoneType == 2 and twtHeaderPhoneBtnHome == 2 %}
  64.         {# Only with "Sales Promoting Navigation" and active home button #}
  65.         {% block twt_layout_header_home_button %}
  66.             <div class="col-auto twt-home-col d-sm-none">
  67.                 <a class="btn header-home-btn header-actions-btn{% if controllerAction is same as('home') %} active{% endif %} home-link"
  68.                 href="{{ path('frontend.home.page') }}" aria-label="Home" 
  69.                 itemprop="url"
  70.                 title="{{ "general.homeLink"|trans|striptags }}">
  71.                     <span class="header-home-icon">
  72.                         <span itemprop="name">{% sw_icon 'home' %}</span>
  73.                     </span>
  74.                 </a>
  75.             </div>
  76.         {% endblock %}
  78.     {% endif %}
  80.     {# ThemeWare: Klassen modifizieren um den Toggle-Button ein-/auszublenden. #}
  82.     {# ThemeWare: "Phone-Header" #}
  83.     {# Klassen für den Phone-Header "Navigation" hinzufügen. #}
  84.     {% if twtHeaderPhoneType == 2 %}
  85.         {% set blockClassesMenuButton = ['col-auto col-sm twt-navigation-col'] %}
  86.     {% else %}
  87.         {% set blockClassesMenuButton = ['col'] %}
  88.     {% endif %}
  89.     
  90.     {# ThemeWare: 'Top navigation' => hidden #}
  91.     {# "Top-Navigation" nur mobil anzeigen wenn Sie über die Theme-Konfiguration deaktiviert wurde #}
  92.     {% if twtNavMainShow == 1 %}
  93.         {% set blockClassesMenuButton = ['d-block d-lg-none']|merge(blockClassesMenuButton) %}
  94.     {% endif %}
  95.     
  96.     {# ThemeWare: 'Top navigation' => list #}
  97.     {# Anpassungen falls die "Top-Navigation" als "Liste" dargestellt werden soll #}
  98.     {% if twtNavMainShow == 2  %}
  99.         {% if twtHeaderType == 4 %}
  100.             {# ThemeWare: Klassen für "Header 2.1" hinzufügen #}
  101.             {% set blockClassesMenuButton = ['d-block d-lg-none']|merge(blockClassesMenuButton) %}
  103.         {% elseif twtHeaderType == 10 %}
  104.             {# ThemeWare: Klassen für "Header 10" hinzufügen   #customHeader #}
  105.             {% set blockClassesMenuButton = ['d-none twt-sticky-header-menu-button']|merge(blockClassesMenuButton) %}
  107.         {% else %}
  108.             {# ThemeWare: Klassen für alle anderen Header hinzufügen #}
  109.             {% if twtHeaderSearchType == 2 or twtHeaderSearchType == 4 %}
  110.                 {# ThemeWare: "Flyout search" (twt-header-search-type 2) oder "Fullscreen search" (twt-header-search-type 4) aktiv #}
  111.                 {% set blockClassesMenuButton = ['d-block d-lg-none']|merge(blockClassesMenuButton) %}
  112.             {% else %}
  113.                 {% set blockClassesMenuButton = ['d-block d-sm-none']|merge(blockClassesMenuButton) %}
  114.             {% endif %}
  115.         {% endif %}
  116.     {% endif %}
  117.     
  118.     {# ThemeWare: 'Top navigation' => button #}
  119.     {# Anpassungen falls die "Top-Navigation" als "Button" (default) dargestellt werden soll... #}
  120.     {% if twtNavMainShow == 3 %}
  121.         {# ThemeWare: Klassen für die "Flyout-Suche" oder die "Fullscreen-Suche" hinzufügen #}
  122.         {% if twtHeaderSearchType == 2 or twtHeaderSearchType == 4 %}
  123.             {% set blockClassesMenuButton = ['d-block']|merge(blockClassesMenuButton) %}
  125.         {% else %}
  126.             {# ThemeWare: Klassen für "Header 2.1" hinzufügen #}
  127.             {% if twtHeaderType == 4 %}
  128.                 {% set blockClassesMenuButton = ['d-sm-block']|merge(blockClassesMenuButton) %}
  129.             {% else %}
  130.                 {% set blockClassesMenuButton = ['d-sm-none d-lg-block']|merge(blockClassesMenuButton) %}
  131.             {% endif %}
  132.         {% endif %}
  133.     {% endif %}
  135.     {# ThemeWare: Anpassungen am Toggle-Button der "Top-Navigation" #}
  136.     {# Klassen (siehe oben) hinzufügen und Label 'Navigation' ergänzen #}
  137.     <div class="{{ blockClassesMenuButton|join(' ') }}">
  138.         <div class="menu-button">
  140.             {% block layout_header_navigation_toggle_button %}
  141.                 <button class="btn nav-main-toggle-btn header-actions-btn"
  142.                         type="button"
  143.                         title="{{ "twt.header.offcanvasMenuText"|trans }}"
  144.                         data-offcanvas-menu="true"
  145.                         aria-label="{{ "general.menuLink"|trans|striptags }}">
  147.                     {% block layout_header_navigation_toggle_button_icon %}
  148.                         {# ThemeWare: Icon austauschen #}
  149.                         {% if twtIconSet is not same as ('default') %}
  150.                             {% sw_icon 'stack' style {'pack':'themeware'} %}
  151.                         {% else %}
  152.                             {% sw_icon 'stack' %}
  153.                         {% endif %}
  154.                     {% endblock %}
  156.                     {# ThemeWare: Label 'Navigation' zum Toggle-Button hinzufügen #}
  157.                     <span class="header-nav-main-toggle-label">
  158.                         {{ "twt.header.offcanvasMenuText"|trans }}
  159.                     </span>
  160.                 </button>
  161.             {% endblock %}
  163.         </div>
  164.     </div>
  165. {% endblock %}
  168. {# ThemeWare: Anpassungen am Toggle-Button der "Top-Navigation" @tablet #}
  169. {#
  170. {% block layout_header_navigation_toggle_tablet  %}{% endblock %}
  171. #}
  174. {# TODO: HC-Architecture... #}
  175. {# ThemeWare: Anpassungen am Icon vom Toggle-Button der "Top-Navigation" @tablet #}
  176. {# TODO: Default-Konfiguration ergänzen... #}
  177. {# TODO: Mit toggle button (siehe oben) abgleichen... #}
  178. {% block layout_header_navigation_toggle_tablet_button_icon %}
  179.     {# ThemeWare: Icon austauschen #}
  180.     {% if twtIconSet is not same as ('default') %}
  181.         {% sw_icon 'stack' style {'pack':'themeware'} %}
  182.     {% else %}
  183.         {% sw_icon 'stack' %}
  184.     {% endif %}
  186.     {# ThemeWare: Label 'Navigation' zum Toggle-Button hinzufügen #}
  187.     <span class="header-nav-main-toggle-label">
  188.         {{ "twt.header.offcanvasMenuText"|trans }}
  189.     </span>
  190. {% endblock %}
  193. {# TODO: HC-Architecture... #}
  194. {# ThemeWare: Anpassungen am Toggle-Button der Suche
  195.     - $twt-header-search-show: 1 don't, 2 show > d-none
  196.     - $twt-header-search-type: 1 input, 2 flyout > d-sm-none
  197. #}
  198. {# TODO:
  199.     - Default-Konfiguration ergänzen...
  200.     - "Header 2.1" (twt-header-type 4) ggf. berücksichtigen ?!
  201. #}
  202. {% block layout_header_search_toggle %}
  203.     {# ThemeWare: Klassen modifizieren um den Toggle-Button ein-/auszublenden. #}
  204.     {% set blockClassesSearchToggle = ['col-auto twt-search-col'] %}
  206.     {# ThemeWare: 'Search' => hidden #}
  207.     {% if twtHeaderSearchShow == 1 %}
  208.         {% set blockClassesSearchToggle = ['d-none']|merge(blockClassesSearchToggle) %}
  209.     {% endif %}
  211.     {# ThemeWare: Klassen hinzufpgen falls nicht die "Flyout search" (twt-header-search-type 2) oder "Fullscreen search" (twt-header-search-type 4) aktiv ist. #}
  212.     {% if twtHeaderSearchType != 2 and twtHeaderSearchType != 4 %}
  213.         {% set blockClassesSearchToggle = ['d-sm-none']|merge(blockClassesSearchToggle) %}
  214.     {% endif %}
  216.     {#  ThemeWare: Toggle-Button ausblenden im "Header 2.1" (twt-header-type 4) oder falls die "Flyout search" bzw. die "Fullscreen search" aktiv sind. #}
  217.     {% if twtHeaderSearchType != 2 and twtHeaderSearchType != 4 %}
  218.         {% if twtHeaderType == 4 %}
  219.             {% set blockClassesSearchToggle = ['d-none'] %}
  220.         {% endif %}
  221.     {% endif %}
  223.     <div class="{{ blockClassesSearchToggle|join(' ') }}">
  224.           <div class="search-toggle">
  225.                 <button class="btn header-actions-btn search-toggle-btn js-search-toggle-btn collapsed"
  226.                           type="button"
  227.                           data-toggle="collapse"
  228.                           data-target="#searchCollapse"
  229.                           aria-expanded="false"
  230.                           aria-controls="searchCollapse"
  231.                           aria-label="{{ "header.searchButton"|trans|striptags }}">
  233.                     {# ThemeWare: Wrapper um Icon ergänzen und 'x'-Icon hinzufügen. #}
  234.                     <span class="header-search-toggle-icon">
  235.                         {% if twtIconSet is not same as ('default') %}
  236.                             {% sw_icon 'search' style {'pack':'themeware'} %}
  237.                         {% else %}
  238.                             {% sw_icon 'search' %}
  239.                         {% endif %}
  241.                         {% if twtIconSet is not same as ('default') %}
  242.                             {% sw_icon 'x' style {'pack':'themeware'} %}
  243.                         {% else %}
  244.                             {% sw_icon 'x' %}
  245.                         {% endif %}
  246.                     </span>
  248.                     {# ThemeWare: Label zum Toggle-Button hinzufügen. #}
  249.                     <span class="header-search-toggle-name">
  250.                         {{ "twt.header.searchText"|trans }}
  251.                     </span>
  252.                 </button>
  253.           </div>
  254.      </div>
  255. {% endblock %}
  258. {# TODO: HC-Architecture... #}
  259. {# ThemeWare: "Header 10" (twt-header-type 10)   #customHeader #}
  260. {# Aufbau für den Custom-Header modifizieren. #}
  261. {% block layout_header_navigation %}
  262.     {% if twtHeaderType == 10 %}
  263.         <div class="nav-header {{ navHeaderClasses|join(' ') }}">
  264.             <div class="container">
  265.                 <div class="header-row row align-items-center {{ headerRowClasses }}">
  267.                     {{ block('layout_header_logo') }}
  269.                     {% block twt_layout_header_main_navigation %}
  270.                         <div class="header-nav-col nav-main d-none col-lg">
  271.                             {% block twt_layout_header_main_navigation_inner %}
  272.                                 {% sw_include '@Storefront/storefront/layout/navigation/navigation.html.twig' %}
  273.                             {% endblock %}
  274.                         </div>
  275.                     {% endblock %}
  277.                     {{ block('layout_header_search') }}
  279.                     {{ block('layout_header_actions') }}
  281.                 </div>
  282.             </div>
  283.         </div>
  284.     {% else %}
  286.         {# Default block #}
  287.         {{ parent() }}
  288.     {% endif %}
  289. {% endblock %}
  292. {# ThemeWare: Klassen für den Phone-Header "Cart" hinzufügen. (Cart highlighting) #}
  293. {% block layout_header_actions_cart %}
  294.     {% if twtHeaderPhoneType == 2 and twtHeaderPhoneCartBtnHighlighting == 2 %}
  295.         <div class="col-auto twt-cart-col">
  296.             <div class="header-cart"
  297.                 data-offcanvas-cart="true">
  298.                 <a class="btn header-cart-btn header-actions-btn"
  299.                 href="{{ path('frontend.checkout.cart.page') }}"
  300.                 data-cart-widget="true"
  301.                 title="{{ 'checkout.cartTitle'|trans|striptags }}"
  302.                 aria-label="{{ 'checkout.cartTitle'|trans|striptags }}">
  303.                     {% sw_include '@Storefront/storefront/layout/header/actions/cart-widget.html.twig' %}
  304.                 </a>
  305.             </div>
  306.         </div>
  307.     {% else %}
  309.         {# Default block #}
  310.         {{ parent() }}
  311.     {% endif %}
  312. {% endblock %}
  314. {# ThemeWare: Klassen für den Phone-Header "Wishlist" hinzufügen. (Cart highlighting) #}
  315. {% block layout_header_actions_wishlist %}
  316.     {% if twtHeaderPhoneType == 2 and twtHeaderPhoneCartBtnHighlighting == 2 %}
  317.         <div class="col-auto twt-wishlist-col">
  318.             <div class="header-wishlist">
  319.                 <a class="btn header-wishlist-btn header-actions-btn"
  320.                 href="{{ path('frontend.wishlist.page') }}"
  321.                 title="{{ 'header.wishlist'|trans|striptags }}"
  322.                 aria-label="{{ 'header.wishlist'|trans|striptags }}">
  323.                     {% sw_include '@Storefront/storefront/layout/header/actions/wishlist-widget.html.twig' %}
  324.                 </a>
  325.             </div>
  326.         </div>
  327.     {% else %}
  329.         {# Default block #}
  330.         {{ parent() }}
  331.     {% endif %}
  332. {% endblock %}
  334. {# ThemeWare: Klassen für den Phone-Header "Account" hinzufügen. (Cart highlighting) #}
  335. {% block layout_header_actions_account %}
  336.     {% if twtHeaderPhoneType == 2 and twtHeaderPhoneCartBtnHighlighting == 2 %}
  337.         <div class="col-auto twt-account-col">
  338.             <div class="account-menu">
  339.                 {% sw_include '@Storefront/storefront/layout/header/actions/account-widget.html.twig' %}
  340.             </div>
  341.         </div>
  342.     {% else %}
  344.         {# Default block #}
  345.         {{ parent() }}
  346.     {% endif %}
  347. {% endblock %}