templates/pages/list.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block page_class %}
  4. page list
  5. {% endblock %}
  7. {% set url = app.request.server.get('REQUEST_SCHEME') ~ '://' ~ app.request.server.get('SERVER_NAME') ~ app.request.server.get('REQUEST_URI') %}
  9. {% block stylesheets %}
  10. {{parent()}}
  11. {{ encore_entry_link_tags('list_styles') }}
  12. {# Leaflet chargé à la demande à l'ouverture de la modale carte (initModalLeaflet)
  13. <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin=""/>
  14. #}
  15. {% endblock %}
  17. {# Simulation de pagination #}
  18. {# {% set cruisesPerPage = 8 %}
  19. {% set totalCruises = croisieres|length %}
  20. {% set totalPages = (totalCruises / cruisesPerPage)|round(0, 'ceil') %}
  21. {% set currentPage = 1 %}
  22. {% set pageRange = 3 %} #}{% block header_search %}
  23. {# Page liste : pas de barre de recherche #}
  24. {% endblock %}
  26. {% block header_search_mobile %}
  27. {# Page liste : pas de barre de recherche #}
  28. {% endblock %}
  30. {% block content %}
  33. {# Tri des navires #}
  34. {# {% set navires_top = navires|filter(n => n.top == 1) %}
  35. {% set navires_rest = navires|filter(n => n.top != 1) %}
  37. {% set sorted_navires = navires_top|merge(navires_rest) %} #}
  39. {# {% set cruises_number = companiesDatas|reduce((carry, company) => carry + (company.cruises|length), 0) %} #}
  41. {% set cruises_number = cruiseSearchResult.pagination.total_count|default(0) %}
  42. {# Fil d'Ariane #}
  43. <div class="container-fluid">
  44. <div class="row">
  45. <div class="col-lg-1 col-md-1 col-sm-12 list-page-gutter" aria-hidden="true"></div>
  46. <div class="col-lg-10 col-md-10 col-sm-12 list-page-main">
  47. {% set destinationData = null %}
  48. {% set companyData = null %}
  50. {% set destinationId = app.request.query.get('destination') %}
  51. {% set companyId = app.request.query.get('company') %}
  53. {% if destinationId is not null and destinationId is not empty %}
  54. {% set destination = getDestinationById(destinationId + 0) %}
  55. {% if destination %}
  56. {% set destinationData = { name: destination.name, url: '/croisieres?destination=' ~ destinationId } %}
  57. {% endif %}
  58. {% endif %}
  60. {% if companyId is not null and companyId is not empty %}
  61. {% set company = getCompanyById(companyId + 0) %}
  62. {% if company %}
  63. {% set companyData = { name: company.name, url: '/croisieres?company=' ~ companyId } %}
  64. {% endif %}
  65. {% endif %}
  67. {% include 'pages/_includes/_breadcrumb.html.twig' with {
  68. destination: destinationData,
  69. company: companyData
  70. } %}
  71. </div>
  72. <div class="col-lg-1 col-md-1 col-sm-12 list-page-gutter" aria-hidden="true"></div>
  73. </div>
  74. </div>
  76. <div class="container-fluid mb-5">
  77. <div class="row">
  78. <div class="col-lg-1 col-md-1 col-sm-12 list-page-gutter" aria-hidden="true"></div>
  79. <div class="col-lg-10 col-md-10 col-sm-12 list-page-main">
  80. <div id="title">
  81. {% block seo %}
  82. {% if searchMainSubjectInfos.subject is defined and searchMainSubjectInfos.subject is not empty %}
  83. {% include 'pages/_includes/list/seo_templates/_' ~ searchMainSubjectInfos.template ~ '.html.twig' with { content: searchMainSubjectInfos.subject } %}
  84. {% else%}
  85. {% include 'pages/_includes/list/seo_templates/_seo_default.html.twig' %}
  86. {% endif %}
  87. {% endblock %}
  88. </div>
  90. <div class="content layout container-fluid px-0">
  92. {% set filters = {
  93. 'ships' : [],
  94. 'companies' : [],
  95. 'destinations' : [],
  96. 'ports' : [],
  97. 'durations' : [],
  98. 'sort' : null,
  99. 'number_of_cruises' : 0
  100. }%}
  102. <div class="row">
  103. <div id="filters" class="col-lg-3 col-md-4 col-sm-12" data-search-url="{{ searchUrl|default(app.request.uri) }}">
  104. {% include 'pages/_includes/list/_filters.html.twig' %}
  106. </div>
  108. <div id="list" class="col-lg-9 col-md-8 col-sm-12">
  109. {% block tags %}
  110. {% include 'pages/_includes/list/_super-tags.html.twig' %}
  111. {% endblock %}
  113. <div class="tag_by_mobile mobile">
  114. <div class="tag_by accordion">
  115. <button class="tagBy accordion-trigger">
  116. <span>{{ 'list.sort.label'|trans }}</span>
  117. <div class="icon">{{ getLucidIcon('arrow-down-wide-narrow') }}</div>
  118. </button>
  119. <ul
  120. class=" br1 accordion-content"
  121. data-sort-label-date-desc="{{ 'list.sort.date_desc'|trans|e('html_attr') }}"
  122. data-sort-label-date-asc="{{ 'list.sort.date_asc'|trans|e('html_attr') }}"
  123. data-sort-label-price-asc="{{ 'list.sort.price_asc'|trans|e('html_attr') }}"
  124. data-sort-label-price-desc="{{ 'list.sort.price_desc'|trans|e('html_attr') }}"
  125. data-sort-label-duration-asc="{{ 'list.sort.duration_asc'|trans|e('html_attr') }}"
  126. data-sort-label-duration-desc="{{ 'list.sort.duration_desc'|trans|e('html_attr') }}"
  127. ></ul>
  128. </div>
  129. </div>
  130. {#
  131. {% block cruises %}
  132. {% include '_snippets/mocks/card_list.html.twig' %}
  133. {% endblock %} #}
  135. {# Zone AJAX (cf. _cruise_search_ajax.js) : au filtre / pagination,
  136. seuls #cruise_results, le scroll infini et la pagination sont mis à jour. #}
  137. {% set cruise_list = cruiseSearchResult.paginated_result|default([]) %}
  138. <div class="cruise-search-zone" data-cruise-search-zone>
  139. <div
  140. id="cruise_results"
  141. class="cruises-container"
  142. {% if cruiseSearchResult.pagination is defined %}
  143. data-cruise-per-page="{{ cruiseSearchResult.pagination.per_page|default(5) }}"
  144. data-cruise-total-count="{{ cruiseSearchResult.pagination.total_count|default(0) }}"
  145. data-cruise-total-pages="{{ cruiseSearchResult.pagination.total_pages|default(1) }}"
  146. data-cruise-current-page="{{ cruiseSearchResult.pagination.current_page|default(1) }}"
  147. {% endif %}
  148. >
  149. {% if cruise_list is not empty %}
  150. {% for cruise in cruise_list %}
  151. {% set content = { isFloa: true } %}
  152. {% include '_snippets/components/cards/list_card.html.twig' with {
  153. cruise: cruise,
  154. content: content
  155. } %}
  156. {% endfor %}
  157. {% else %}
  158. {% include 'pages/_includes/list/_no_results_card.html.twig' %}
  159. {% endif %}
  160. </div>
  162. {% if cruise_list is not empty %}
  163. <div class="cruise-infinite-scroll" data-cruise-infinite-scroll aria-live="polite">
  164. <div class="cruise-infinite-scroll__sentinel" data-cruise-infinite-sentinel></div>
  165. <div class="cruise-infinite-scroll__loading" data-cruise-infinite-loading hidden>
  166. <p class="cruise-infinite-scroll__status">Chargement des croisières…</p>
  167. {% for skeletonIndex in 1..3 %}
  168. <div class="cruise-skeleton" aria-hidden="true">
  169. <div class="cruise-skeleton__media"></div>
  170. <div class="cruise-skeleton__main">
  171. <div class="cruise-skeleton__line cruise-skeleton__line--xs"></div>
  172. <div class="cruise-skeleton__line cruise-skeleton__line--title"></div>
  173. <div class="cruise-skeleton__line"></div>
  174. <div class="cruise-skeleton__line cruise-skeleton__line--md"></div>
  175. <div class="cruise-skeleton__line cruise-skeleton__line--sm"></div>
  176. </div>
  177. <div class="cruise-skeleton__aside">
  178. <div class="cruise-skeleton__price"></div>
  179. <div class="cruise-skeleton__cta"></div>
  180. </div>
  181. </div>
  182. {% endfor %}
  183. </div>
  184. <p class="cruise-infinite-scroll__end" data-cruise-infinite-end hidden>Toutes les croisières sont affichées.</p>
  185. <p class="cruise-infinite-scroll__error" data-cruise-infinite-error hidden>Impossible de charger la page suivante.</p>
  186. </div>
  187. <div class="cruise-search-paging is-visually-hidden" data-cruise-search-paging aria-hidden="true">
  188. {% include '@CroisilandCommon/pagination/_pagination.html.twig' with {
  189. 'pagination': cruiseSearchResult.pagination
  190. } %}
  191. </div>
  192. {% endif %}
  193. </div>
  194. </div>
  195. </div>
  196. </div>
  197. </div>
  198. <div class="col-lg-1 col-md-1 col-sm-12 list-page-gutter" aria-hidden="true"></div>
  199. </div>
  201. <div class="list-footer-stack" data-list-footer-stack hidden>
  202. <div class="list-page-dock" data-list-page-dock>
  203. <button type="button" class="list-page-dock__footer" data-list-dock-footer aria-expanded="false" data-label-show="{{ 'list.dock.show_footer'|trans|e('html_attr') }}" data-label-hide="{{ 'list.dock.hide_footer'|trans|e('html_attr') }}">
  204. {{ 'list.dock.show_footer'|trans }}
  205. </button>
  206. </div>
  207. <div class="list-footer-panel" data-list-footer-panel inert>
  208. <footer class="footer list-footer-panel__footer">
  209. {% include 'pages/_includes/base/_footer.html.twig' with { showFloatingActions: false } %}
  210. </footer>
  211. </div>
  212. </div>
  214. <div
  215. id="cruise-search-loader-modal"
  216. class="cruise-search-loader-modal"
  217. hidden
  218. aria-hidden="true"
  219. role="alertdialog"
  220. aria-modal="true"
  221. aria-labelledby="cruise-search-loader-title"
  222. >
  223. <div class="cruise-search-loader-modal__panel" tabindex="-1">
  224. <div class="cruise-search-loader-modal__spinner" aria-hidden="true"></div>
  225. <p id="cruise-search-loader-title" class="cruise-search-loader-modal__text">
  226. {{ 'list.search.updating'|trans }}
  227. </p>
  228. </div>
  229. </div>
  231. {% endblock %}
  233. {% block javascripts %}
  234. {{ parent() }}
  235. {{ encore_entry_script_tags('list_page') }}
  236. {# Leaflet chargé à la demande — voir initModalLeaflet (map-bundle)
  237. <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
  238. #}
  239. {% endblock %}