src/PentagastBundle/Resources/views/storefront/layout/breadcrumb.html.twig line 1

Open in your IDE?
  1. {% sw_extends "@Storefront/storefront/layout/breadcrumb.html.twig" %}
  3. {% block layout_breadcrumb_inner %}
  4.     {{ parent() }}
  5.     
  6.     {% set currentSalesChannelId = context.salesChannel.id %}
  7.     {% set showNextPrevBar = context.salesChannel.customFields['val_pentagast_bundle_prev_next_navigation_enabled'] %}
  8.     
  9.     {% if app.request.get('_route') != 'frontend.home.page' and showNextPrevBar %}
  10.         <style>
  11.             .is-ctl-search .custom-prev-next-bar,
  12.             .is-act-search .custom-prev-next-bar {
  13.                 float: right;
  14.             }
  15.             
  16.             .custom-prev-next-bar {
  17.                 margin-left: auto;
  18.                 display: flex;
  19.                 align-items: center;
  20.                 gap: .5rem;
  21.                 flex: 0 0 auto;
  22.                 padding-top: 10px;
  23.                 padding-bottom: 10px;
  24.             }
  25.             .custom-prev-next-bar .custom-prev-next-btn {
  26.                 background: #e8e8e8;
  27.                 width: 30px;
  28.                 height: 30px;
  29.                 border-radius: 100%;
  30.                 transition: all .2s ease;
  31.             }
  32.             .custom-prev-next-btn.is-disabled {
  33.                 pointer-events: none;
  34.                 opacity: .45;
  35.                 cursor: default;
  36.             }
  37.             .custom-prev-next-bar .custom-prev-next-btn:hover { background: var(--primary); }
  38.             .custom-prev-next-btn:hover .icon { color: #fff; }
  39.             .custom-prev-next-bar .custom-prev-next-btn svg {
  40.                 margin: 0 auto;
  41.                 height: auto;
  42.                 top: auto;
  43.                 width: 18px;
  44.             }
  45.         </style>
  47.         <div class="custom-prev-next-bar" data-navbar>
  48.             <a href="#" class="custom-prev-btn custom-prev-next-btn" data-action="back" title="Zurück" aria-disabled="true" tabindex="-1">
  49.                 <span class="icon icon-arrow-medium-left icon-fluid">
  50.                     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
  51.                         <defs>
  52.                             <path id="icons-solid-arrow-medium-left" d="M4.7071 5.2929c-.3905-.3905-1.0237-.3905-1.4142 0-.3905.3905-.3905 1.0237 0 1.4142l4 4c.3905.3905 1.0237.3905 1.4142 0l4-4c.3905-.3905.3905-1.0237 0-1.4142-.3905-.3905-1.0237-.3905-1.4142 0L8 8.5858l-3.2929-3.293z"></path>
  53.                         </defs>
  54.                         <use transform="matrix(0 -1 -1 0 16 16)" xlink:href="#icons-solid-arrow-medium-left" fill="#758CA3" fill-rule="evenodd"></use>
  55.                     </svg>
  56.                 </span>
  57.             </a>
  58.             <a href="#" class="custom-next-btn custom-prev-next-btn" data-action="forward" title="Vor" aria-disabled="true" tabindex="-1">
  59.                 <span class="icon icon-arrow-medium-right icon-fluid">
  60.                     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
  61.                         <defs>
  62.                             <path id="icons-solid-arrow-medium-right" d="M4.7071 5.2929c-.3905-.3905-1.0237-.3905-1.4142 0-.3905.3905-.3905 1.0237 0 1.4142l4 4c.3905.3905 1.0237.3905 1.4142 0l4-4c.3905-.3905.3905-1.0237 0-1.4142-.3905-.3905-1.0237-.3905-1.4142 0L8 8.5858l-3.2929-3.293z"></path>
  63.                         </defs>
  64.                         <use transform="rotate(-90 8 8)" xlink:href="#icons-solid-arrow-medium-right" fill="#758CA3" fill-rule="evenodd"></use>
  65.                     </svg>
  66.                 </span>
  67.             </a>
  68.         </div>
  69.         
  70.         <script>
  71.         (function() {
  72.           function boot() {
  73.             const prev = document.querySelector('.custom-prev-btn');
  74.             const next = document.querySelector('.custom-next-btn');
  75.             if (!prev && !next) return;
  77.             prev?.addEventListener('click', function (e) {
  78.               e.preventDefault();
  79.               history.back();
  80.             });
  82.             next?.addEventListener('click', function (e) {
  83.               e.preventDefault();
  84.               history.forward();
  85.             });
  86.           }
  88.           if (document.readyState === 'loading') {
  89.             document.addEventListener('DOMContentLoaded', boot);
  90.           } else {
  91.             boot();
  92.           }
  93.         })();
  94.         </script>
  95.     {% endif %}
  96. {% endblock %}