templates/_snippets/best_cruises.html.twig line 1

Open in your IDE?
  1. {# ------------------------------------------------------------------------ #}
  2. {# ----------------------------- PARAMÉTRAGES ----------------------------- #}
  3. {# ------------------------------------------------------------------------ #}
  5. {% set effectiveSectionSettings = showSectionSettings|default(true) ? sectionSettings|default({}) : {} %}
  6. {% set content = effectiveSectionSettings|merge(bestCruises) %}
  7. {% set bestCruises = content %}
  8. {% set bestCruisesId = 'best_cruises-' ~ random() %}
  10. {# Filtrage des croisières par date de départ (on n'affiche que celles qui ont commencé) #}
  11. {% set currentDate = 'now'|date('Y-m-d') %}
  13. {% include '_snippets/sections/cards_section_settings.html.twig' with {
  14. 'content': content,
  15. 'id': bestCruisesId,
  16. } %}
  18. {# Paramètres spécifiques à ce fragment #}
  20. {% set buttonSettings = {
  21. 'padding': bestCruises.paddingButtonTopBottomContent|default(14) ~ bestCruises.paddingButtonUnitContent|default('px') ~ ' ' ~ bestCruises.paddingButtonRightLeftContent|default(14) ~ bestCruises.paddingButtonUnitContent|default('px'),
  22. 'color': bestCruises.colorButtonContent|default('#004461'),
  23. 'background-color': bestCruises.backgroundColorButtonContent|default('#FFFFFF'),
  24. 'border-radius': bestCruises.borderRadiusButtonContent|default(0.75) ~ bestCruises.borderRadiusButtonContentUnit|default('rem'),
  25. 'font-size': '16px',
  26. 'font-weight': '500',
  27. 'border': bestCruises.borderSizeButtonContent|default(1) ~ bestCruises.borderSizeButtonContentUnit|default('px') ~ ' solid ' ~ bestCruises.borderColorButtonContent|default('#F2F2F2'),
  28. } %}
  30. {% set conditionSettings = {
  31. 'color': bestCruises.textColorCards|default('#6C6C6C'),
  32. 'font-weight': bestCruises.textWeightCards|default(400),
  33. 'font-size': bestCruises.textSizeCards|default(0.875) ~ bestCruises.textSizeUnitCards|default('rem'),
  34. } %}
  36. {% set tags = bestCruises.tags|default('') %}
  37. {% set maxNumberCards = bestCruises.maxNumberCards|default(4) %}
  39. {% if true %}
  41. <section id="{{ bestCruisesId }}" class="best-cruises">
  42. {# En-tête avec titre et navigation #}
  43. <div class="best-cruises-head">
  44. <h2>
  45. <div class="icon">
  46. {{ getLucidIcon(attribute(bestCruises, 'pictogramTitleSection')|default('')) }}
  47. </div>
  48. {{ attribute(bestCruises, 'titleTextSection')|default('')|raw }}
  49. </h2>
  50. <div class="chevrons"></div>
  51. </div>
  53. {# Une seule card avec toutes les croisières #}
  54. <div class="slider">
  55. <div class="cards">
  56. <div class="card">
  57. {# Header avec les onglets de catégories #}
  58. <div class="card-header">
  59. <div class="card-navbar">
  60. {% for tab in bestCruises.tabs %}
  61. {% set top_offers_cruises = tab.isTopPromo|default(false) ? true : false %}
  62. {% set last_minutes_cruises = tab.isLastMinutes|default(false) ? true : false %}
  63. {% set tabFilters = [] %}
  65. {% for tag in tab.tags|default([]) %}
  66. {% if tag.tagId is defined %}
  67. {% set tabFilters = tabFilters|merge([tag.tagId]) %}
  68. {% endif %}
  69. {% endfor %}
  71. {% if top_offers_cruises == true %}
  72. {% set tabFilters = tabFilters|merge(['is_top_promos']) %}
  73. {% endif %}
  74. {% if last_minutes_cruises == true %}
  75. {% set tabFilters = tabFilters|merge(['is_last_minutes']) %}
  76. {% endif %}
  78. <button type="button" class="category-tab {{ loop.first ? 'active' : '' }}" data-tabs="{{ tabFilters|json_encode|e('html_attr') }}">
  79. {{ tab.tabName|default('default tab name') }}
  80. </button>
  81. {% endfor %}
  82. </div>
  83. </div>
  85. {# Contenu avec les croisières #}
  86. <div class="card-content" style="gap: var(--card-spacing, 12px);">
  87. {# Preloader affiché pendant le chargement (même nombre que les vraies cards avec data-tag-id) #}
  88. <div id="{{ bestCruisesId }}-preloader" class="sub-cards sub-cards-preloader">
  89. <div class="sub-card preload-card-wrapper">
  90. {% include "pages/_includes/preloaders/includes/_preload-card.html.twig" %}
  91. </div>
  92. </div>
  94. <div class="sub-cards sub-cards-grid" style="display: none;">
  95. {% for tab in bestCruises.tabs %}
  96. {% for tag in tab.tags|default([]) %}
  97. {% if tag.tagId is defined %}
  98. {% set tagItem = getTagById(tag.tagId) %}
  99. {% if tagItem %}
  100. {% for tagCruise in tagItem.tagCruises|shuffle|slice(0, maxNumberCards) %}
  101. {% set cruise = tagCruise.cruise %}
  102. {% if cruise %}
  103. {% include '_snippets/components/cards/mini_card.html.twig' with {
  104. cruise: cruise,
  105. isPriorityLoad: true,
  106. categoryTagId: tagItem.id
  107. } only %}
  108. {% endif %}
  109. {% endfor %}
  110. {% endif %}
  111. {% endif %}
  112. {% endfor %}
  113. {% endfor %}
  114. </div>
  115. </div>
  116. </div>
  117. </div>
  118. </div>
  119. </section>
  120. {% endif %}
  122. {# Le JavaScript des offres est maintenant géré par assets/website/js/snippets/best-cruises.js #}
  124. <!-- Variables CSS dynamiques -->
  125. <!-- prettier-ignore -->
  126. <style>
  127. #{{ bestCruisesId }} {
  128. /* Padding section */
  129. --padding-left-section: {{ bestCruises.paddingLeftRightSection|default(1.125) ~ bestCruises.paddingUnitSection|default('rem') }};
  130. --padding-right-left-cards-content-mobile: {{ bestCruises.paddingRightLeftCardsContentMobile|default(0) ~ bestCruises.paddingUnitCardsContentMobile|default('px') }};
  131. --padding-top-bottom-cards-content-mobile: {{ bestCruises.paddingTopBottomCardsContentMobile|default(0) ~ bestCruises.paddingUnitCardsContentMobile|default('px') }};
  133. /* Espacements */
  134. --card-spacing: {{ bestCruises.gapCards|default(12) ~ bestCruises.gapUnitCards|default('px') }};
  136. /* Card dimensions */
  137. /* --card-min-width: {{ bestCruises.widthCards|default(34) ~ bestCruises.widthUnitCards|default('rem') }}; */
  138. --card-border-radius: {{ bestCruises.borderRadiusCards|default(1.125) ~ bestCruises.borderRadiusUnitCards|default('rem') }};
  139. --card-image-height: {{ bestCruises.imageHeightCards|default(9) ~ bestCruises.imageHeightCardsUnit|default('rem') }};
  140. --card-padding: {{ bestCruises.paddingTopBottomCards|default(6) ~ bestCruises.paddingUnitCards|default('px') }} {{ bestCruises.paddingRightLeftCards|default(6) ~ bestCruises.paddingUnitCards|default('px') }};
  142. /* Typography - Title */
  143. --title-font-size: {{ bestCruises.titleSizeCards|default(1.125) ~ bestCruises.titleSizeUnitCards|default('rem') }};
  144. --title-font-weight: {{ bestCruises.titleWeightCards|default(500) }};
  145. --title-color: {{ bestCruises.titleColorCards|default('#1D1D1D') }};
  147. /* Typography - Text */
  148. --text-color: {{ bestCruises.textColorCards|default('#6C6C6C') }};
  149. --text-font-size: {{ bestCruises.textSizeCards|default(0.875) ~ bestCruises.textSizeUnitCards|default('rem') }};
  150. --text-font-weight: {{ bestCruises.textWeightCards|default(400) }};
  151. --icon-width: {{ bestCruises.textSizeCards|default(0.875) * 0.85 ~ bestCruises.textSizeUnitCards|default('rem') }};
  153. /* Typography - Price */
  154. --price-color: {{ bestCruises.priceColorCards|default('#FF5C00') }};
  155. --price-font-size: {{ bestCruises.priceSizeCards|default(1.25) ~ bestCruises.priceSizeUnitCards|default('rem') }};
  156. --price-font-weight: {{ bestCruises.priceWeightCards|default(700) }};
  158. /* Button */
  159. --button-padding: {{ bestCruises.paddingButtonTopBottomContent|default(14) ~ bestCruises.paddingButtonUnitContent|default('px') }} {{ bestCruises.paddingButtonRightLeftContent|default(14) ~ bestCruises.paddingButtonUnitContent|default('px') }};
  160. --button-color: {{ bestCruises.colorButtonContent|default('#004461') }};
  161. --button-bg-color: {{ bestCruises.backgroundColorButtonContent|default('#FFFFFF') }};
  162. --button-border-radius: {{ bestCruises.borderRadiusButtonContent|default(0.75) ~ bestCruises.borderRadiusButtonContentUnit|default('rem') }};
  163. --button-border: {{ bestCruises.borderSizeButtonContent|default(1) ~ bestCruises.borderSizeButtonContentUnit|default('px') }} solid {{ bestCruises.borderColorButtonContent|default('#F2F2F2') }};
  164. }
  165. </style>
  167. {# Le JavaScript du carousel et la gestion du preloader sont dans assets/website/js/snippets/best-cruises.js #}