custom/plugins/IdeaBooks/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.     {% block layout_top_bar %}
  4.     {% endblock %}
  6.     {% block layout_header_navigation %}
  7.         <div class="row no-gutters align-items-center header-row">
  8.             {% block layout_header_logo %}
  9.                 {# voeg mr-auto toe om social media icons naar rechts te duwen #}
  10.                 <div class="col-6 col-lg-auto header-logo-col mr-auto">
  11.                     {% sw_include '@Storefront/storefront/layout/header/logo.html.twig' %}
  12.                 </div>
  13.             {% endblock %}
  15.             {% block layout_header_search %}
  16.             {# search zit nu in balk links - zie base.html.twig #}
  17.             {% endblock %}
  19.             {% block layout_header_actions %}
  20.                 <div class="col-6 order-1 col-sm-auto order-sm-2 header-actions-col justify-content-end d-flex">
  21.                     <div class="row no-gutters">
  22.                     {{ parent() }}
  23.                     </div>
  24.                 </div>
  25.             {% endblock %}
  26.         </div>
  27.     {% endblock %}
  30.     {% block layout_header_navigation_toggle %}
  31.     {# shopware menu-button weg #}
  32.     {% endblock %}
  34.     {% block layout_header_search_toggle %}
  35.     {# shopware search toggle weg - maar m.b.v. bootstrap d-none, anders js error 'all.js?1615624846904711:3 Error: the search-toggle-btn doesn´t own the ".js-search-toggle-btn" class. So the search-input-field wont´t have an autofocus, on Mobile.' #}
  36.         <div class="col-auto d-none">
  37.             <div class="search-toggle">
  38.                 <button class="btn header-actions-btn search-toggle-btn js-search-toggle-btn collapsed"
  39.                         type="button"
  40.                         data-toggle="collapse"
  41.                         data-target="#searchCollapse"
  42.                         aria-expanded="false"
  43.                         aria-controls="searchCollapse"
  44.                         aria-label="{{ "header.searchButton"|trans|striptags }}">
  45.                     {% sw_icon 'search' %}
  46.                 </button>
  47.             </div>
  48.         </div>
  49.     {% endblock %}
  51.     {% block layout_header_actions_account %}
  52.     {# account-menu zit nu in balk links - zie base.html.twig #}
  53.         {#<div>
  54.             <div class="account-menu">
  55.                 {% sw_include '@Storefront/storefront/layout/header/actions/account-widget.html.twig' %}
  56.             </div>
  57.         </div>#}
  58.         <div>
  59.         {% block layout_header_actions_account_widget_dropdown_button %}
  60.             {# 11-10-21 accountmenu uitgezet
  61.             <button class="btn account-menu-btn header-actions-btn"
  62.                     type="button"
  63.                     id="accountWidget"
  64.                     data-toggle="canvas"
  65.                     data-target="#bs-canvas-right-account-menu"
  66.                     aria-expanded="false"
  67.                     aria-controls="bs-canvas-right-account-menu"
  68.                     aria-label="{{ "account.myAccount"|trans|striptags }}"
  69.                     title="{{ "account.myAccount"|trans|striptags }}">
  70.                 {% sw_icon 'avatar' %}
  71.             </button>
  72.             #}
  73.         {% endblock %}
  74.         </div>
  75.     {% endblock %}
  77.     {# voeg facebook en instagram icons toe #}
  78.     {% block layout_header_actions_cart %}
  79.          {# shopping cart zit nu in balk links - zie base.html.twig #}
  80.         {# 9-8-21 social media weg
  81.         <div class="col-auto ml-auto social-media-icons">
  82.             <div class="facebook-icon">
  83.                 <a href="https://www.facebook.com/ideabooks.nl" target="_blank">
  84.                 <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  85.                      viewBox="0 0 1024 1024" xml:space="preserve">
  86.                 <g>
  87.                     <title>Idea Books on Facebook</title>
  88.                     <path d="M1024,512C1024,229.23,794.77,0,512,0S0,229.23,0,512c0,255.55,187.23,467.37,432,505.78V660H302V512h130V399.2
  89.                         C432,270.88,508.44,200,625.39,200C681.41,200,740,210,740,210v126h-64.56c-63.6,0-83.44,39.47-83.44,79.96V512h142l-22.7,148H592
  90.                         v357.78C836.77,979.37,1024,767.55,1024,512z" fill="#000"/>
  91.                     <path class="st0" d="M711.3,660L734,512H592v-96.04c0-40.49,19.84-79.96,83.44-79.96H740V210c0,0-58.59-10-114.61-10
  92.                         C508.44,200,432,270.88,432,399.2V512H302v148h130v357.78c26.07,4.09,52.78,6.22,80,6.22s53.93-2.13,80-6.22V660H711.3z" fill="currentColor"/>
  93.                 </g>
  94.                 </svg>
  95.                 </a>
  96.             </div>
  97.             <div class="instagram-icon">
  98.                 <a href="https://www.instagram.com/ideabooksnl" target="_blank">
  99.                     <img width="17" src="/images/ig_icon.png" alt="Idea Books on Instagram" title="Idea Books on Instagram" />
  100.                 </a>
  101.             </div>
  102.         </div>
  103.         #}
  105.         {# nu search, shopping cart, trade en hamburger bovenin #}
  106.         <div>
  107.             <span class="btn header-actions-btn" data-toggle="canvas" href="#bs-canvas-left" data-target="#bs-canvas-left" aria-expanded="false" aria-controls="bs-canvas-left">
  108.                 <span class="icon icon-search">
  109.                     <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" xml:space="preserve">
  110.                         <g fill="#000000">
  111.                             <path d="M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M10.7142857,6.42857143 C8.34735107,6.42857143 6.42857143,8.34735107 6.42857143,10.7142857 C6.42857143,13.0812204 8.34735107,15 10.7142857,15 C11.5879201,15 12.4005003,14.7385961 13.0780774,14.2897374 L13.0780774,14.2897374 L16.1081942,17.3203772 L16.1889433,17.3916818 C16.5251929,17.6531317 17.011391,17.6293635 17.3203772,17.3203772 C17.6551123,16.9856421 17.6551123,16.4429293 17.3203772,16.1081942 L17.3203772,16.1081942 L14.2897374,13.0780774 C14.7385961,12.4005003 15,11.5879201 15,10.7142857 C15,8.34735107 13.0812204,6.42857143 10.7142857,6.42857143 Z"></path>
  112.                         </g>
  113.                     </svg>
  114.                 </span>
  115.             </span>
  116.             {#<button class="btn" type="button" data-toggle="canvas" data-target="#bs-canvas-left" aria-expanded="false" aria-controls="bs-canvas-left">&#x1F50D;</button>#}
  117.         </div>
  120.         <div>
  121.             <div class="header-cart"
  122.                  data-offcanvas-cart="true">
  123.                 <a class="btn header-cart-btn header-actions-btn d-flex flex-column"
  124.                    href="{{ path('frontend.checkout.cart.page') }}"
  125.                    data-cart-widget="true"
  126.                    title="{{ 'checkout.cartTitle'|trans|striptags }}"
  127.                    aria-label="{{ 'checkout.cartTitle'|trans|striptags }}">
  128.                     {% sw_include '@Storefront/storefront/layout/header/actions/cart-widget.html.twig' %}
  129.                 </a>
  130.             </div>
  131.         </div>
  133.         {# voeg button toe voor trade menu  #}
  134.         <div class="col-3">
  135.             <button class="btn header-trade-btn header-actions-btn"
  136.                     type="button"
  137.                     data-toggle="canvas"
  138.                     data-target="#bs-canvas-right-trade-menu"
  139.                     aria-expanded="false"
  140.                     aria-controls="bs-canvas-right-trade-menu">
  141.                 <span class="icon icon-stack">
  142.                     <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" xml:space="preserve">
  143.                         <g stroke="none" stroke-width="1" fill="#000000" fill-rule="evenodd">
  144.                             <path d="M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M14.46825,7.07908502 C13.2499688,6.84198207 12.0864375,7.18986088 10.912125,7.44123687 C9.842625,7.67013815 8.7819375,7.97317404 7.70446875,8.12687554 C6.83053125,8.2516049 6.26315625,8.685335 6,9.63395982 L6,9.63395982 L6,10.0600208 C6.15825,10.4131189 6.3165,10.7663235 6.484875,11.1420027 C6.33825,11.4268245 6.169125,11.7553176 6,12.0838106 L6,12.0838106 L6,12.8294173 C6.1635,13.1378855 6.327,13.4463537 6.494625,13.762704 C6.34125,14.0348504 6.170625,14.3374603 6,14.6401766 L6,14.6401766 L6,15.4922986 C6.28959375,16.2531371 6.82884375,16.6223189 7.5125625,16.8392905 C8.443125,17.1344442 9.36065625,17.4857315 10.2754687,17.8406403 C10.7669062,18.0313026 11.2429687,18.0475995 11.7452812,17.9071059 C12.7752188,17.6191951 13.8115313,17.3608957 14.8453125,17.09056 C15.7851562,16.8447228 16.725,16.5988856 17.6601562,16.3544331 C17.577375,15.6210756 17.48025,15.5354373 16.921125,15.679872 C15.2934375,16.1002877 13.6681875,16.5332722 12.0377812,16.9393083 C11.6462813,17.0368763 11.2064063,17.1849325 10.8435,17.0754348 C9.60975,16.7034835 8.39428125,16.2470657 7.18546875,15.7774399 C6.82565625,15.6376919 6.67125,15.250296 6.805125,14.8152877 C6.93384375,14.3965762 7.218375,14.2059139 7.61428125,14.2775987 C7.736625,14.2997539 7.856625,14.3447033 7.9753125,14.3874159 C8.77828125,14.6767113 9.57178125,15.0072282 10.38675,15.2423073 C10.779,15.3554265 11.225625,15.3751318 11.6226562,15.288961 C12.2122969,15.1609297 12.7989844,15.0151369 13.3846406,14.8632861 L15.1404375,14.4012629 C15.9848437,14.1816285 16.8275625,13.9536858 17.6657813,13.7308559 C17.5686563,13.0076174 17.4580312,12.9146295 16.8924375,13.0605554 C15.1126875,13.5200622 13.3366875,13.9985287 11.5525313,14.4347087 C11.2311562,14.5133169 10.8586875,14.5046892 10.5437813,14.401902 C9.49509375,14.059775 8.4601875,13.6620471 7.4233125,13.274225 C6.8926875,13.0757871 6.66740625,12.6832784 6.79209375,12.2231325 C6.92671875,11.7259193 7.3156875,11.5412219 7.8615,11.7332689 C8.680875,12.0216057 9.5019375,12.3050428 10.31325,12.6206475 C10.8045,12.8117358 11.2809375,12.8271805 11.782875,12.6874325 C12.8130938,12.4003739 13.8493125,12.1413288 14.8830938,11.8708866 C15.8222812,11.6251559 16.761375,11.3795318 17.6955,11.1351858 C17.6175,10.403639 17.5154062,10.3144858 16.953375,10.4597726 C15.2039062,10.9118233 13.4578125,11.3811295 11.7034688,11.8074035 C11.3495625,11.8933613 10.9433438,11.9104038 10.5995625,11.8020778 C9.53325,11.4661287 8.48353125,11.0612642 7.431375,10.669075 C6.916125,10.4771345 6.7055625,10.0696072 6.8386875,9.58709311 C6.96778125,9.11917162 7.35984375,8.93351554 7.8796875,9.12194101 C8.51859375,9.35350517 9.1395,9.6694294 9.790875,9.82994789 C10.3575937,9.96958938 10.9783125,10.082389 11.5364062,9.96650044 C13.6993125,9.51721911 15.84675,8.97186103 18,8.46229207 L18,8.46229207 L18,8.14274631 C17.9314688,7.68270695 17.6521875,7.5797067 17.28675,7.53060317 C16.3446562,7.40395654 15.403125,7.26101307 14.46825,7.07908502 Z"></path>
  145.                         </g>
  146.                     </svg>
  147.                 </span>
  148.             </button>
  149.         </div>
  151.         {# voeg button toe om rechter sidebarmenu te openen  #}
  152.         <div class="col-3">
  153.             <button class="btn nav-main-toggle-btn header-actions-btn"
  154.                     type="button"
  155.                     data-toggle="canvas"
  156.                     data-target="#bs-canvas-right"
  157.                     aria-expanded="false"
  158.                     aria-controls="bs-canvas-right">
  159.                 {% block layout_header_navigation_toggle_button_icon %}
  160.                 <span class="icon icon-stack">
  161.                     <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" xml:space="preserve">
  162.                         <g fill="#000000" id="color">
  163.                             <path d="M19,16 C19.5522847,16 20,16.4477153 20,17 C20,17.5522847 19.5522847,18 19,18 L5,18 C4.44771525,18 4,17.5522847 4,17 C4,16.4477153 4.44771525,16 5,16 L19,16 Z M19,11 C19.5522847,11 20,11.4477153 20,12 C20,12.5522847 19.5522847,13 19,13 L5,13 C4.44771525,13 4,12.5522847 4,12 C4,11.4477153 4.44771525,11 5,11 L19,11 Z M19,6 C19.5522847,6 20,6.44771525 20,7 C20,7.55228475 19.5522847,8 19,8 L5,8 C4.44771525,8 4,7.55228475 4,7 C4,6.44771525 4.44771525,6 5,6 L19,6 Z"></path>
  164.                         </g>
  165.                     </svg>
  166.                 </span>
  167.                 {% endblock %}
  168.             </button>
  169.         </div>
  170.     {% endblock %}