templates/default/components/organisms/header/header.html.twig line 1

Open in your IDE?
  1. <div class="header-observer"></div>
  3. <header class="header{% block headerClass %}{% endblock %}">
  4. {% if cms_globals.upper_menu is defined and cms_globals.upper_menu|default|length > 0 %}
  5. <div class="header__upper">
  6. <div class="header__upper--inner">
  7. {% include 'components/organisms/storyblok/storyblok.html.twig' with {
  8. 'componentData': cms_globals.upper_menu|default,
  9. 'componentConfig': {
  10. 'link-open-menu': {
  11. additionalClass: 'header__upper-entry',
  12. },
  13. 'text-link': {
  14. class: 'header__upper-entry text-link--upper-menu',
  15. },
  17. }
  18. }
  19. %}
  20. </div>
  21. </div>
  22. {% endif %}
  23. <div class="header__inner">
  24. {% block headerLogo %}
  25. <div class="header__logo">
  26. {% set eventArray = {
  27. 'X_MAS' : asset('build/images/denios/logo_denios_x_mas.svg'),
  28. 'birthdayES':asset('build/images/denios/logo_es_20aniversario.svg')
  29. } %}
  30. {% if isPunchout %}
  31. {% set path_logo_home = 'app_shop' %}
  32. {% else %}
  33. {% set path_logo_home = 'app_get_home' %}
  34. {% endif %}
  35. {% include 'components/molecules/logo/logo.html.twig'
  36. with {
  37. 'class': 'logo--header',
  38. 'href': path(path_logo_home),
  39. 'src': getLogo(storeContext, asset('build/images/denios/logo_minimal.svg'), eventArray )|default(asset('build/images/denios/logo_minimal.svg')),
  40. 'srcset': asset('build/images/denios/logo_minimal.svg'),
  41. 'alt': 'header_logo_description'|trans,
  42. 'lazyload':false
  43. } %}
  44. </div>
  45. {% endblock %}
  47. {% block headerLinks %}
  48. <div class="header__links">
  49. {% include 'components/molecules/expert-advice-trigger/expert-advice-trigger.html.twig' with {
  50. 'class': 'header__link-entry header__link-entry--expert-advice',
  51. }%}
  53. {% if storeContext.languages|default|length > 1 %}
  54. {% include 'components/molecules/language-select/language-select.html.twig'
  55. with {
  56. 'class': 'language-select--desktop',
  57. 'current_language': storeContext.localeInfo.currentLocale,
  58. 'languages': storeContext.languages} %}
  59. {% endif %}
  60. </div>
  61. {% endblock %}
  63. {% block headerShopNavigation %}
  64. <div class="header__shop-navigation">
  65. {% if not isPunchout %}
  66. <div class="header__shop-action">
  67. {% embed 'components/molecules/icon-link/icon-link.html.twig' with {
  68. 'class': 'icon-link--shop-action icon-link--account js-shop-action-account' ~ ((app.user) ? ' icon-link--active' : ' js-offside'),
  69. 'href': path('app_get_account'),
  70. 'attributes': {
  71. 'data-offside-component': 'accountMenu',
  72. 'data-collapse-close-on-body': 'true',
  73. 'data-offside-sliding-side': 'right',
  74. 'title': ((app.user) ? 'header_account_label'|trans : 'header_account_label_logged_out'|trans),
  75. 'aria-label': ((app.user) ? 'header_account_label'|trans : 'header_account_label_logged_out'|trans),
  76. }
  77. } %}
  78. {% block icon %}
  79. <div class="icon-link__icon icon-link__account" aria-hidden="true" title="{{ 'header_account_label'|trans}}">
  80. {% include 'components/atoms/badge/badge.html.twig' with {
  81. 'class': 'badge--check ' ~ ((app.user) ? '' : 'badge--hide'),
  82. } %}
  83. </div>
  84. {% endblock %}
  85. {% block linkText %}
  86. {% endblock %}
  87. {% endembed %}
  89. {% block accountStatus %}
  90. {# User email should be a data attribute in a div on every page (see DO-355) #}
  91. {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
  92. <div class="account__user-logged-in-status" data-gtm-user-email="{{ user.email|default('')}}"></div>
  93. {% endif %}
  94. {% endblock %}
  95. </div>
  97. <div class="header__shop-action">
  98. {% embed 'components/molecules/icon-link/icon-link.html.twig' with {
  99. 'class': 'icon-link--shop-action',
  100. 'href': path('app_get_account_shopping_list'),
  101. 'attributes' : {
  102. 'aria-label': 'header_note_label'|trans,
  103. 'title': 'header_note_label'|trans,
  104. }
  105. } %}
  106. {% block icon %}
  107. <div class="icon-link__icon icon-link__shopping-list" title="{{ 'shopping_list_forwarded_headline'|trans}}">
  108. {% set shopping_list_product_count = shopping_list_product_count() %}
  109. {% if shopping_list_product_count > 0 %}
  110. {% include 'components/atoms/badge/badge.html.twig' with {
  111. 'class': 'badge--header',
  112. 'content': shopping_list_product_count
  113. } %}
  114. {% endif %}
  115. </div>
  116. {% endblock %}
  118. {% block linkText %}
  119. {% endblock %}
  120. {% endembed %}
  121. </div>
  122. {% endif %}
  123. <div class="header__shop-action">
  124. {% if cart is defined and cart.lineItems|length > 0 %}
  125. {% set ariaLabelCart= '. ' ~ 'line_item_header_quantity'|trans ~': '~ cart.lineItems|length %}
  126. {% endif %}
  127. {% embed 'components/molecules/icon-link/icon-link.html.twig' with {
  128. 'class': 'icon-link--shop-action',
  129. 'href': path('checkout_cart_index'),
  130. 'attributes' : {
  131. 'aria-label': 'off_canvas_cart_go_to_cart'|trans ~ ariaLabelCart|default,
  132. 'title': 'off_canvas_cart_go_to_cart'|trans,
  133. }
  134. } %}
  135. {% block icon %}
  136. <div class="icon-link__icon icon-link__icon--cart" title="{{ 'header_cart_label'|trans }}">
  137. {% if cart is defined and cart.lineItems|length > 0 %}
  138. {% include 'components/atoms/badge/badge.html.twig' with {
  139. 'class': 'badge--header js-badge-cart',
  140. 'content': cart.lineItems|length
  141. } %}
  142. {% endif %}
  143. </div>
  144. {% endblock %}
  146. {% block linkText %}
  147. {% endblock %}
  148. {% endembed %}
  149. </div>
  150. </div>
  151. {% endblock %}
  153. {% block headerNavigationBar %}
  154. <div class="header__navigation-bar">
  155. {% include 'components/organisms/navigation-bar/navigation-bar.html.twig' %}
  156. </div>
  157. {% endblock %}
  158. {% block headerPrint %}
  159. <div class="header__contact">
  160. {{ 'header_contact_print'|trans|raw }}
  161. </div>
  162. {% endblock %}
  163. </div>
  164. </header>