templates/includes/header.html.twig line 1

Open in your IDE?
  1. {% do jsConfig().add({
  2.     'loadCart': url('cart_overlay')
  3. }) %}
  5. {% set siteConfig = getSiteConfig() %}
  6. {% set microSiteConfig = siteConfig is instanceof('\\Pimcore\\Model\\DataObject\\MicroSiteConfig') ? siteConfig : null %}
  7. {% set isTradepage = document.property("isTradepage") ? document.property("isTradepage") : false  %}
  8. {% if microSiteConfig and microSiteConfig.name == 'alpineCrossing' %}
  9.     {# only alpine crossing navigation should not be fixed   #}
  10.     {% set isFixed = false %}
  11. {% endif %}
  13. {% set polygonImage = siteConfig.polygonImage %}
  14. {% set bgImageSrc = polygonImage ? polygonImage.thumbnail('sustainability-area-bg').getAsFormat("webp") : null %}
  16. {% set trackingKey = 'click-header-logo' %}
  17. {% set trackingData = {
  18.     "trigger": "click",
  19.     'datalayer': {
  20.         'event': 'click_header_icon',
  21.         'click_item': 'logo',
  22.         'click_url': (document.property('navigationRoot')|default('')).getPath()
  23.     }
  24. } %}
  26. {% set hideNavigation = document.getProperty('hideNavigation') %}
  28. {% do jsConfig('_trackingData').add({
  29.     (trackingKey): trackingData
  30. }) %}
  32. <header class="main-navbar js-main-navbar {{ initiallyTransparent|default(false) ? 'js-nav--scroll-transform is-transparent' : '' }} {{ isFixed is defined ? isFixed == true ? 'position-sticky' : 'position-absolute' : '' }}">
  33.     {{ include('includes/main-navbar-meta.html.twig') }}
  35.     {% if not hideNavigation|default(false) %}
  36.         <a href="{{ document.property('navigationRoot') }}" class="pointer-events-auto {{ microSiteConfig and microSiteConfig.name == 'alpineCrossing' ? 'main-navbar__brand--mobile-big' : '' }} main-navbar__brand--mobile js-cursor__interaction" data-event-tracking-key="{{ trackingKey }}">
  37.             <img class="js-nav__logo-white main-navbar__brand__logo {{ initiallyTransparent|default(false) ? 'is-active' : '' }}"
  38.                  width="132px" height="20px" src="{{ elements_cache_buster(elements_staticFolder() ~ '/img/logo-white.svg') }}" alt="{{ 'header.logo'|trans }}"
  39.             >
  40.             <img class="js-nav__logo-color main-navbar__brand__logo {{ initiallyTransparent|default(false) ? '' : 'is-active' }}"
  41.                  width="132px" height="20px" src="{{ elements_cache_buster(elements_staticFolder() ~ '/img/logo-color.svg') }}" alt="{{ 'header.logo'|trans }}"
  42.             >
  43.         </a>
  45.         <nav class="main-navbar-nav js-nav">
  46.             {% if microSiteConfig and not microSiteConfig.hideHeaderLiveInfo %}
  47.                 {{ include('includes/header-live-info.html.twig') }}
  48.             {% endif %}
  49.             {% if not microSiteConfig or not microSiteConfig.hideNav %}
  50.                 <button class="main-navbar-toggle collapsed js-nav__toggle-overlay  js-nav__toggle-overlay--main js-navigation-expand-background-button" type="button"
  51.                         aria-expanded="false" aria-label="{{ 'header.toggle-navbar'|trans }}" data-nav-overlay-target="#main-navbar-nav"
  52.                         aria-controls="main-navbar-nav"
  53.                 >
  54.                     <img class="main-navbar-toggle__expand-background js-navigation-expand-background" data-fill-screen-scale-x="20" data-fill-screen-scale-y="10" alt="" src="{{ bgImageSrc }}" />
  56.                     <span class="main-navbar-toggle__button">
  57.                         <svg class="main-navbar-toggle__ham main-navbar-toggle__ham--rotate" viewBox="0 0 100 100" width="80" onclick="this.classList.toggle('active')">
  58.                           <path
  59.                               class="main-navbar-toggle__ham-line"
  60.                               d="m 70,33 h -40 c 0,0 -8.5,-0.149796 -8.5,8.5 0,8.649796 8.5,8.5 8.5,8.5 h 20 v -20" />
  61.                           <path
  62.                               class="main-navbar-toggle__ham-line"
  63.                               d="m 70,50 h -40" />
  64.                           <path
  65.                               class="main-navbar-toggle__ham-line"
  66.                               d="m 30,67 h 40 c 0,0 8.5,0.149796 8.5,-8.5 0,-8.649796 -8.5,-8.5 -8.5,-8.5 h -20 v 20" />
  67.                         </svg>
  68.                     </span>
  69.                     <span class="main-navbar-toggle__text">{{ 'header.menu'|trans }}</span>
  70.                 </button>
  71.             {% endif %}
  73.             {{ include('navigation/partials/left-links.html.twig', {
  74.                 'microSiteConfig': microSiteConfig,
  75.                 'siteConfig': siteConfig
  76.             }) }}
  78.             {% set logo = microSiteConfig ? microSiteConfig.logo.fullPath : elements_cache_buster(elements_staticFolder() ~ '/img/logo-color.svg') %}
  80.             <a href="{{ document.property('navigationRoot') }}" class="{{ microSiteConfig ? "mx-md-auto" : " "}} pointer-events-auto main-navbar__brand js-cursor__interaction" data-event-tracking-key="{{ trackingKey }}">
  81.                 <img class="js-nav__logo-white main-navbar__brand__logo {{ initiallyTransparent|default(false) ? 'is-active' : '' }}"
  82.                      src="{{ elements_cache_buster(elements_staticFolder() ~ '/img/logo-white.svg') }}"
  83.                      alt="{{ 'header.logo'|trans }}" width="200px" height="30px"
  84.                 >
  85.                 <img class="js-nav__logo-color main-navbar__brand__logo {{ initiallyTransparent|default(false) ? '' : 'is-active' }}"
  86.                      src="{{ logo }}" alt="{{ 'header.logo'|trans }}" width="200px" height="30px"
  87.                 >
  88.             </a>
  90.             <div class="main-navbar__right">
  91.                 {# to-do: remove class "justify-content-start" when it's not just alpine crossing anymore and the menu is shown #}
  92.                 <ul class="list-unstyled main-navbar__link-list justify-content-start">
  93.                     {% if not microSiteConfig or not microSiteConfig.hideLanguageSwitch %}
  94.                         {# to-do: remove class "ms-4" and re-add class "main-navbar__link-list-item--hidden-xs" when it's not just alpine crossing anymore and the menu is shown #}
  95.                         <li class="main-navbar__link-list-item ms-4 ">
  96.                             {{ include('navigation/language-switch.html.twig') }}
  97.                         </li>
  98.                     {% endif %}
  99.                     {% if not microSiteConfig or not microSiteConfig.hideSearch %}
  100.                         {% set trackingKey = 'click-header-icon-search' %}
  101.                         {% set trackingData = {
  102.                             "trigger": "click",
  103.                             'datalayer': {
  104.                                 'event': 'click_header_icon',
  105.                                 'click_item': 'search',
  106.                             }
  107.                         } %}
  109.                         {% do jsConfig('_trackingData').add({
  110.                             (trackingKey): trackingData
  111.                         }) %}
  113.                         <li class="main-navbar__link-list-item">
  114.                             <button role="button" aria-expanded="false" aria-label="{{ 'header.toggle-search'|trans }}"
  115.                                     class="main-navbar__link btn-no-styling font-decorative collapsed js-nav__toggle-overlay"
  116.                                     data-nav-overlay-target="#main-navbar-search" aria-controls="main-navbar-search"
  117.                                     data-event-tracking-key="{{ trackingKey }}"
  118.                             >
  119.                                 <span class="icon icon-search main-navbar__link-icon" aria-hidden="true"></span>
  120.                                 <span class="main-navbar__link__text">{{ 'header.search'|trans }}</span>
  121.                             </button>
  122.                             {{ include('includes/overlays/search-overlay.html.twig') }}
  123.                         </li>
  124.                     {% endif %}
  125.                     {% if (not microSiteConfig or not microSiteConfig.hideProfile) and not isTradepage %}
  126.                         {% set trackingKey = 'click-header-icon-login' %}
  127.                         {% set trackingData = {
  128.                             "trigger": "click",
  129.                             'datalayer': {
  130.                                 'event': 'click_header_icon',
  131.                                 'click_item': 'login',
  132.                                 'click_url': url('cdm_auth_login')
  133.                             }
  134.                         } %}
  136.                         {% do jsConfig('_trackingData').add({
  137.                             (trackingKey): trackingData
  138.                         }) %}
  140.                         <li class="main-navbar__link-list-item">
  141.                             <a class="main-navbar__link" href="{{ url('cdm_auth_login') }}" data-event-tracking-key="{{ trackingKey }}">
  142.                                 <span class="icon icon-avatar main-navbar__link-icon" aria-hidden="true"></span>
  143.                                 <span class="main-navbar__link__text">
  144.                                     {% if app.user is instanceof('App\\Model\\DataObject\\Customer') %}
  145.                                         {{ 'header.profile'|trans }}
  146.                                     {% else %}
  147.                                         {{ 'header.login'|trans }}
  148.                                     {% endif %}
  149.                                 </span>
  150.                             </a>
  151.                         </li>
  152.                     {% endif %}
  153.                     {% set cart = cart|default(getCart()) %}
  154.                     {% if ((not microSiteConfig or not microSiteConfig.hideCart) and cart|default(false)) and not isTradepage %}
  155.                         {% set trackingKey = 'click-header-icon-cart' %}
  156.                         {% set trackingData = {
  157.                             "trigger": "click",
  158.                             'datalayer': {
  159.                                 'event': 'click_header_icon',
  160.                                 'click_item': 'cart'
  161.                             }
  162.                         } %}
  164.                         {% do jsConfig('_trackingData').add({
  165.                             (trackingKey): trackingData
  166.                         }) %}
  168.                         <li class="main-navbar__link-list-item">
  169.                             <button type="button" class="main-navbar__link js-nav__toggle-overlay js-load-cart btn-no-styling"
  170.                                     aria-expanded="false" aria-label="{{ 'header.toggle-cart'|trans }}"
  171.                                     data-nav-overlay-target="#main-navbar-cart" aria-controls="main-navbar-cart"
  172.                                     data-event-tracking-key="{{ trackingKey }}"
  173.                             >
  174.                                 <span class="icon icon-cart main-navbar__link-icon"></span>
  175.                                 <span class="visually-hidden">{{ 'header.cart'|trans }}</span>
  176.                                 <span class="main-navbar__cart-count js-load-cart__count">{{ cart.itemAmount }}</span>
  177.                             </button>
  178.                             {{ include('includes/overlays/cart-overlay.html.twig', {
  179.                                 'className': isFixed|default(true) ? '' : 'main-navbar__cart-overlay--absolute'
  180.                             }) }}
  181.                         </li>
  182.                     {% endif %}
  183.                 </ul>
  184.                 {% if ((siteConfig or not microSiteConfig.hideShop) and siteConfig.shopOverview()) and not isTradepage %}
  186.                     {% set trackingKey = 'click-header-icon-shop' %}
  187.                     {% set trackingData = {
  188.                         "trigger": "click",
  189.                         'datalayer': {
  190.                             'event': 'click_header_icon',
  191.                             'click_item': 'shop'
  192.                         }
  193.                     } %}
  195.                     {% do jsConfig('_trackingData').add({
  196.                         (trackingKey): trackingData
  197.                     }) %}
  199.                     <a href="{{ siteConfig.shopOverview() }}" class="main-navbar__button js-cursor__interaction" data-event-tracking-key="{{ trackingKey }}">
  200.                         <span class="icon icon-ticket main-navbar__button__icon" aria-hidden="true"></span>
  201.                         <span class="main-navbar__button__text">{{ 'header.shop'|trans }}</span>
  202.                     </a>
  203.                 {% endif %}
  204.                 {% if not microSiteConfig or not microSiteConfig.hideNav %}
  205.                     {{ include('navigation/nav.html.twig') }}
  206.                 {% endif %}
  207.             </div>
  208.         </nav>
  209.     {% endif %}
  210. </header>