vendor/shopware/storefront/Resources/views/storefront/layout/header/header.html.twig line 1

Open in your IDE?
  1. {% block layout_header %}
  2. {% block layout_top_bar %}
  3. {% sw_include '@Storefront/storefront/layout/header/top-bar.html.twig' %}
  4. {% endblock %}
  6. {% block layout_header_navigation %}
  7. <div class="row align-items-center header-row">
  8. {% block layout_header_logo %}
  9. <div class="col-12 col-lg-auto header-logo-col">
  10. {% sw_include '@Storefront/storefront/layout/header/logo.html.twig' %}
  11. </div>
  12. {% endblock %}
  14. {% block layout_header_search %}
  15. <div class="col-12 order-2 col-sm order-sm-1 header-search-col">
  16. <div class="row">
  17. <div class="col-sm-auto d-none d-sm-block d-lg-none">
  18. {% block layout_header_navigation_toggle_tablet %}
  19. <div class="nav-main-toggle">
  20. {% block layout_header_navigation_toggle_tablet_button %}
  21. <button class="btn nav-main-toggle-btn header-actions-btn"
  22. type="button"
  23. data-offcanvas-menu="true"
  24. aria-label="{{ "general.menuLink"|trans|striptags }}">
  25. {% block layout_header_navigation_toggle_tablet_button_icon %}
  26. {% sw_icon 'stack' %}
  27. {% endblock %}
  28. </button>
  29. {% endblock %}
  30. </div>
  31. {% endblock %}
  32. </div>
  33. <div class="col">
  34. {% sw_include '@Storefront/storefront/layout/header/search.html.twig' %}
  35. </div>
  36. </div>
  37. </div>
  38. {% endblock %}
  40. {% block layout_header_actions %}
  41. <div class="col-12 order-1 col-sm-auto order-sm-2 header-actions-col">
  42. <div class="row {{ gridNoGuttersClass }}">
  43. {% block layout_header_navigation_toggle %}
  44. <div class="col d-sm-none">
  45. <div class="menu-button">
  46. {% block layout_header_navigation_toggle_button %}
  47. <button class="btn nav-main-toggle-btn header-actions-btn"
  48. type="button"
  49. data-offcanvas-menu="true"
  50. aria-label="{{ "general.menuLink"|trans|striptags }}">
  51. {% block layout_header_navigation_toggle_button_icon %}
  52. {% sw_icon 'stack' %}
  53. {% endblock %}
  54. </button>
  55. {% endblock %}
  56. </div>
  57. </div>
  58. {% endblock %}
  60. {% block layout_header_search_toggle %}
  61. <div class="col-auto d-sm-none">
  62. <div class="search-toggle">
  63. <button class="btn header-actions-btn search-toggle-btn js-search-toggle-btn collapsed"
  64. type="button"
  65. {{ dataBsToggleAttr }}="collapse"
  66. {{ dataBsTargetAttr }}="#searchCollapse"
  67. aria-expanded="false"
  68. aria-controls="searchCollapse"
  69. aria-label="{{ "header.searchButton"|trans|striptags }}">
  70. {% sw_icon 'search' %}
  71. </button>
  72. </div>
  73. </div>
  74. {% endblock %}
  76. {% if config('core.cart.wishlistEnabled') %}
  77. {% block layout_header_actions_wishlist %}
  78. <div class="col-auto">
  79. <div class="header-wishlist">
  80. <a class="btn header-wishlist-btn header-actions-btn"
  81. href="{{ path('frontend.wishlist.page') }}"
  82. title="{{ 'header.wishlist'|trans|striptags }}"
  83. aria-label="{{ 'header.wishlist'|trans|striptags }}">
  84. {% sw_include '@Storefront/storefront/layout/header/actions/wishlist-widget.html.twig' %}
  85. </a>
  86. </div>
  87. </div>
  88. {% endblock %}
  89. {% endif %}
  91. {% block layout_header_actions_account %}
  92. <div class="col-auto">
  93. <div class="account-menu">
  94. {% sw_include '@Storefront/storefront/layout/header/actions/account-widget.html.twig' %}
  95. </div>
  96. </div>
  97. {% endblock %}
  99. {% block layout_header_actions_cart %}
  100. <div class="col-auto">
  101. <div class="header-cart"
  102. data-offcanvas-cart="true">
  103. <a class="btn header-cart-btn header-actions-btn"
  104. href="{{ path('frontend.checkout.cart.page') }}"
  105. data-cart-widget="true"
  106. title="{{ 'checkout.cartTitle'|trans|striptags }}"
  107. aria-label="{{ 'checkout.cartTitle'|trans|striptags }}">
  108. {% sw_include '@Storefront/storefront/layout/header/actions/cart-widget.html.twig' %}
  109. </a>
  110. </div>
  111. </div>
  112. {% endblock %}
  113. </div>
  114. </div>
  115. {% endblock %}
  116. </div>
  117. {% endblock %}
  118. {% endblock %}