templates/web/default/brands.html.twig line 139

Open in your IDE?
  1. {% extends 'web/base.html.twig' %}
  3. {% block title %}{{'brands.title'| trans}}{% endblock %}
  4. {% block keywords %}{{ 'brands.keywords' | trans }}{% endblock %}
  5. {% block description %}{{ 'brands.metaDescription' | trans }}{% endblock %}
  7. {% trans_default_domain 'web' %}
  8. {% block javascripts %}
  9. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  10. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
  11. {#<script>
  12. // JavaScript pro posunutí stránky na daný blok s odpovídajícím písmenem
  13. const alphabetNavLinks = document.querySelectorAll('.alphabet-nav a');
  15. alphabetNavLinks.forEach(link => {
  16. link.addEventListener('click', (e) => {
  17. e.preventDefault();
  18. const targetId = link.getAttribute('href');
  19. const targetBlock = document.querySelector(targetId);
  20. const targetBlockTop = targetBlock.getBoundingClientRect().top;
  21. const offset = window.pageYOffset;
  22. const screenHeight = window.innerHeight;
  23. const targetOffset = targetBlockTop + offset - (screenHeight / 5) + (targetBlock.clientHeight / 5);
  25. window.scrollTo({
  26. top: targetOffset,
  27. behavior: 'smooth'
  28. });
  29. });
  30. });
  31. </script>#}
  32. <script>
  33. const alphabetNavLinks = document.querySelectorAll('.alphabet-nav a');
  35. alphabetNavLinks.forEach(link => {
  36. link.addEventListener('click', (e) => {
  37. e.preventDefault();
  38. const targetId = link.getAttribute('href');
  39. const targetBlock = document.querySelector(targetId);
  40. const targetBlockTop = targetBlock.getBoundingClientRect().top;
  41. const offset = window.pageYOffset;
  43. const headerHeight = document.querySelector('.qodef-page-header').clientHeight;
  44. const targetOffset = targetBlockTop + offset - headerHeight - 20;
  46. window.scrollTo({
  47. top: targetOffset,
  48. behavior: 'smooth'
  49. });
  50. });
  51. });
  52. </script>
  53. {% endblock %}
  54. {% block body %}
  55. <style>
  56. .alphabet-block {
  57. display: block; /* Změna display na block */
  58. margin-bottom: 60px; /* Odstup mezi bloky */
  59. }
  61. h2 {
  62. font-size: 36px;
  63. text-transform: uppercase;
  64. }
  66. ul {
  67. list-style: none;
  68. margin: 0;
  69. padding: 0;
  70. flex-wrap: wrap;
  71. }
  73. li {
  74. margin-right: 20px;
  75. margin-bottom: 10px;
  76. }
  78. </style>
  79. {{ include('web/core/header.html.twig') }}
  80. <div class="qodef-content">
  81. <div class="qodef-content-inner">
  82. <div class="qodef-full-width">
  83. <div class="qodef-full-width-inner">
  84. <div class="qodef-grid-row">
  85. <div class="qodef-page-content-holder qodef-grid-col-12">
  86. <div class="qodef-row-grid-section-wrapper ">
  87. <div class="qodef-row-grid-section">
  88. <div class="vc_row wpb_row vc_row-fluid vc_custom_1567069896783">
  89. <div class="wpb_column vc_column_container vc_col-sm-12">
  90. <div class="vc_column-inner">
  91. <div class="wpb_wrapper">
  92. <div class="qodef-title-holder qodef-breadcrumbs-type qodef-title-full-width qodef-title-va-header-bottom breadcrumb">
  93. <div itemprop="breadcrumb" class="qodef-breadcrumbs">
  94. <a itemprop="url" href="{{ path('app_web_homepage') }}">Home</a>
  95. <span class="qodef-delimiter">&nbsp; / &nbsp</span>
  96. <a itemprop="url" href="{{ path('app_web_brands') }}">{{ 'brands.title'|trans }}</a>
  97. </div>
  98. <div class="qodef-section-title-holder" style="text-align: center; padding-bottom: 50px;">
  99. <div class="qodef-st-inner">
  100. <h1 class="qodef-st-title">{{ 'brands.title'|trans }}</h1>
  101. </div>
  102. </div>
  103. </div>
  104. {#Navigation to scroll#}
  105. <div class="alphabet-nav">
  106. {% for k,v in brands %}
  108. <a href="#{{ k }}">{{ k }}</a>
  109. {% endfor %}
  111. </div>
  112. <div class="col-sm-12" style="padding-top: 30px">
  113. {% for k,v in brands %}
  114. <div class="alphabet-block">
  115. <div class="alphabet-title" id="{{ k }}">{{ k }}</div>
  116. <div class="alphabet-list">
  117. <ul>
  118. {% for b in v %}
  119. <li><a href="{{ path('app_web_shop_detail',{'slug':b.stores[0].getSlug}) }}">{{ b.name }}</a></li>
  120. {% endfor %}
  122. </ul>
  123. </div>
  124. </div>
  125. {% endfor %}
  127. </div>
  128. </div>
  129. </div>
  130. </div>
  131. </div>
  132. </div>
  133. </div>
  134. </div>
  135. </div>
  136. </div>
  138. </div>
  139. {{ include('web/core/gift-card.html.twig') }}
  140. </div>
  141. </div>
  142. {{ include('web/core/footer.html.twig') }}
  143. {% endblock %}