templates/_snippets/hero_section.html.twig line 1

Open in your IDE?
  1. {# ------------------------------------------------------------------------ #}
  2. {# ----------------------------- PARAMÉTRAGES ----------------------------- #}
  3. {# ------------------------------------------------------------------------ #}
  5. {% set carouselId = 'hero-section-' ~ random() %}
  7. {# Booléens #}
  8. {% set isArrows = heroSection.isArrows|default(false) %}
  9. {% set isSwitchSlideTime = heroSection.isSwitchSlideTime|default(false) %}
  10. {% set isDynamicButton = heroSection.isDynamicButton|default(false) %}
  11. {% set isDynamicButtonArrow = heroSection.isDynamicButtonArrow|default(true) %}
  12. {% set isDynamicButtonBorder = heroSection.isDynamicButtonBorder|default(false) %}
  14. {# --- Paramètres du carousel --- #}
  17. {% set carouselContainerStyles = {
  18. 'border-radius': heroSection.bordersRadius|default(0) ~ heroSection.bordersRadiusUnit|default('px'),
  19. }%}
  21. {% set carouselSlideStyles = {
  22. 'height' : heroSection.height|default(400) ~ heroSection.heightUnit|default('px'),
  23. '--content-margin': -(heroSection.bordersRadius|default(0) * 2) ~ heroSection.bordersRadiusUnit|default('px')
  24. } %}
  26. {% set carouselContentStyles = {
  27. 'background-size' : heroSection.thumbnailBackgroundSize|default('cover'),
  28. 'background-position' : heroSection.thumbnailBackgroundPosition|default('center'),
  29. 'margin-right': -(heroSection.bordersRadius|default(0) * 2) ~ heroSection.bordersRadiusUnit|default('px')
  30. } %}
  32. {% set carouselTitleStyles = {
  33. 'font-weight' : '700',
  34. 'line-height' : 'normal'
  35. } %}
  37. {% set carouselLineStyles = {
  38. 'gap': heroSection.gapElements|default(0) ~ heroSection.gapElementsUnit|default('px'),
  39. } %}
  41. {# Flèches #}
  43. {% set carouselArrowsStyles = {
  44. 'height' : heroSection.height|default(400) ~ heroSection.heightUnit|default('px'),
  45. } %}
  47. {% set carouselArrowStyles = {
  48. 'color' : heroSection.arrowsColor|default('#000000'),
  49. } %}
  51. {# Bouton dynamique #}
  53. {% set carouselDynamicButtonStyles = {
  54. 'display' : 'inline-flex',
  55. 'align-items': 'center',
  56. 'padding' : heroSection.dynamicButtonPaddingTopBottom|default(4) ~ heroSection.dynamicButtonPaddingTopBottomUnit|default('px') ~ ' ' ~ heroSection.dynamicButtonPaddingRightLeft|default(4) ~ heroSection.dynamicButtonPaddingRightLeftUnit|default('px'),
  57. 'background' : heroSection.dynamicButtonBackground|default('#FFFFFF'),
  58. 'color' : heroSection.dynamicButtonTextColor|default('#005474'),
  59. 'border-radius' : heroSection.dynamicButtonBorderRadius|default(8) ~ heroSection.dynamicButtonBorderRadiusUnit|default('px'),
  60. 'border' : heroSection.isDynamicButtonBorder == true ? heroSection.dynamicButtonBorderSize|default(1) ~ heroSection.dynamicButtonBorderSizeUnit|default('px') ~ ' solid ' ~ heroSection.dynamicButtonBorderColor|default('#005474') : 'none',
  61. }%}
  63. {% set carouselDynamicButtonHoverStyles = {
  64. 'background' : heroSection.dynamicButtonTextColor|default('#005474'),
  65. 'color' : heroSection.dynamicButtonBackground|default('#FFFFFF'),
  66. }%}
  68. {% set carouselDynamicButtonPriceStyles = {
  69. 'color' : heroSection.dynamicButtonPriceColor|default('#000'),
  70. } %}
  72. {# Dots #}
  74. {% set carouselDotsActiveBeforeStyles = {
  75. 'background' : 'linear-gradient(90deg, ' ~ heroSection.dotColor1|default('#004461') ~ ', ' ~ heroSection.dotColor2|default('#00AAD7') ~ ')',
  76. }%}
  78. {# Fond des étiquettes via ::after #}
  79. {% set labelBgColor = heroSection.thumbnailLabelBackground|default('#000000') %}
  80. {% set labelBgOpacity = heroSection.thumbnailLabelBackgroundOpacity|default(70) %}
  81. {% set labelElementOpacity = heroSection.thumbnailLabelOpacity|default(100) %}
  82. {% set labelBorderRadius = heroSection.thumbnailTextBorderRadius|default(20) %}
  85. {# Filtre pour les vignettes non actives #}
  86. {% set inactiveFilter = heroSection.thumbnailInactiveFilter|default('grayscale') %}
  87. {% set filterIntensity = heroSection.thumbnailInactiveFilterIntensity|default(50) %}
  88. {% set overlayColor = heroSection.thumbnailInactiveOverlayColor|default('#000000') %}
  91. {% set mainColorButton = heroSection.mainColorButton|default('#004461') %}
  92. {% set secondaryColorButton = heroSection.secondaryColorButton|default('#fff') %}
  93. {% set bordersRadiusButton = heroSection.bordersRadiusButton|default(8) %}
  94. {% set bordersRadiusButtonUnit = heroSection.bordersRadiusButtonUnit|default('px') %}
  95. {% set paddingSizeLeftRightButton = heroSection.paddingSizeLeftRightButton|default(4) %}
  96. {% set paddingSizeTopBottomButton = heroSection.paddingSizeTopBottomButton|default(4) %}
  97. {% set paddingButtonUnit = heroSection.paddingButtonUnit|default('px') %}
  99. {% set switchSlideTime = (isSwitchSlideTime and heroSection.switchSlideTime is not null and heroSection.switchSlideTime != 0 ? heroSection.switchSlideTime * 1000 : 5000) %}
  101. {# Paramètres des vignettes #}
  102. {% set showThumbnails = heroSection.showThumbnails|default(false) %}
  103. {% set thumbnailWidth = heroSection.thumbnailWidth|default(120) %}
  104. {% set thumbnailHeight = heroSection.thumbnailHeight|default(80) %}
  105. {% set thumbnailGap = heroSection.thumbnailGap|default(10) %}
  106. {% set thumbnailBorderRadius = heroSection.thumbnailBorderRadius|default(8) %}
  107. {% set thumbnailActiveBorderColor = heroSection.thumbnailActiveBorderColor|default('#8B5CF6') %}
  108. {% set thumbnailActiveBorderWidth = heroSection.thumbnailActiveBorderWidth|default(3) %}
  110. {# Paramètres du bouton dynamique #}
  111. {% set dynamicButton = {
  112. 'dynamicButtonText': heroSection.dynamicButtonText|default('hero_section.dynamic_button_discover'|trans),
  113. 'dynamicButtonTextColor': heroSection.dynamicButtonTextColor|default('#fff'),
  114. 'dynamicButtonBackground': heroSection.dynamicButtonBackground|default('#004461'),
  115. 'dynamicButtonPriceColor': heroSection.dynamicButtonPriceColor|default('#000'),
  116. 'dynamicButtonArrowColor': heroSection.dynamicButtonArrowColor|default('#fff'),
  117. 'dynamicButtonBorderRadius': heroSection.dynamicButtonBorderRadius|default(8),
  118. 'dynamicButtonBorderRadiusUnit': heroSection.dynamicButtonBorderRadiusUnit|default('px'),
  119. 'dynamicButtonPaddingRightLeft': heroSection.dynamicButtonPaddingRightLeft|default(4),
  120. 'dynamicButtonPaddingRightLeftUnit': heroSection.dynamicButtonPaddingRightLeftUnit|default('px'),
  121. 'dynamicButtonPaddingTopBottom': heroSection.dynamicButtonPaddingTopBottom|default(4),
  122. 'dynamicButtonPaddingTopBottomUnit': heroSection.dynamicButtonPaddingTopBottomUnit|default('px'),
  123. 'dynamicButtonBorderSize': heroSection.dynamicButtonBorderSize|default(1),
  124. 'dynamicButtonBorderSizeUnit': heroSection.dynamicButtonBorderSizeUnit|default('px'),
  125. 'dynamicButtonBorderColor': heroSection.dynamicButtonBorderColor|default('#fff')
  126. } %}
  128. {% set carouselContentTagsDivContentTagStyles = {
  129. 'color' : heroSection.tagsColor|default('#000'),
  130. 'font-weight' : heroSection.tagsFontWeight|default(600),
  131. 'text-align' : heroSection.tagsTextAlign|default('left'),
  132. 'padding' : heroSection.tagsPaddingTopBottom|default(3) ~ heroSection.tagsPaddingTopBottomUnit|default('px') ~ ' ' ~ heroSection.tagsPaddingRightLeft|default(6) ~ heroSection.tagsPaddingRightLeftUnit|default('px'),
  133. 'border-radius' : heroSection.tagsBorderRadius|default(12) ~ heroSection.tagsBorderRadiusUnit|default('px'),
  134. 'font-size' : heroSection.tagsFontSize|default(10) ~ heroSection.tagsFontSizeUnit|default('px'),
  135. 'background' : heroSection.tagsBackgroundColor|default('rgba(217, 217, 217, 0.20)'),
  136. } %}
  138. {# Paramètres du fond du contenu #}
  140. {% set backgroundBlur = heroSection.backgroundBlur|default(0) %}
  141. {% set isBackgroundFilter = heroSection.isBackgroundFilter|default(false) %}
  142. {% set backgroundFilterColor = isBackgroundFilter == true ? heroSection.backgroundFilterColor|default('#000000') : '#000000' %}
  143. {% set backgroundFilterOpacity = isBackgroundFilter == true ? heroSection.backgroundFilterOpacity|default(0.4) : 0 %}
  145. {% set carouselContentBeforeStyles = {
  146. 'background' : backgroundFilterColor | hex_to_rgba(backgroundFilterOpacity),
  147. } %}
  150. {# Paramètres des prix et durées #}
  151. {% set badgesStyles = {
  152. 'border-radius' : heroSection.badgesBorderRadius|default(6) ~ heroSection.badgesBorderRadiusUnit|default('px'),
  153. 'padding' : heroSection.badgesPaddingTopBottom|default(3) ~ heroSection.badgesPaddingTopBottomUnit|default('px') ~ ' ' ~ heroSection.badgesPaddingRightLeft|default(6) ~ heroSection.badgesPaddingRightLeftUnit|default('px'),
  154. 'font-weight' : heroSection.badgesFontWeight|default(600),
  155. 'font-size' : heroSection.badgesFontSize|default(1) ~ heroSection.badgesFontSizeUnit|default('rem'),
  156. 'background-color' : heroSection.badgesBackgroundColor|default('#FF5C00'),
  157. 'color' : heroSection.badgesColor|default('#FFFFFF'),
  158. 'margin' : 'auto ' ~ heroSection.badgesMarginRightLeft|default(3) ~ heroSection.badgesMarginRightLeftUnit|default('px'),
  159. }%}
  161. {# Paramètres des logos #}
  162. {% set logosStyles = {
  163. 'max-width' : heroSection.logoWidth|default(60) ~ heroSection.logoWidthUnit|default('px'),
  164. 'max-height' : heroSection.logoHeight|default(60) ~ heroSection.logoHeightUnit|default('px'),
  165. } %}
  167. {# Durée de l'animation entre deux slides #}
  170. {% set animation = {
  171. 'contentDuration' : heroSection.animationContentDuration|default(0),
  172. 'contentDelay' : heroSection.animationContentDelay|default(0) ,
  173. 'mediaDuration' : heroSection.animationMediaDuration|default(0),
  174. 'mediaDelay' : heroSection.animationMediaDelay|default(0),
  175. }%}
  177. {# Collecter les styles mobile pour les carousel-text #}
  178. {% set mobileStyles = [] %}
  179. {% set globalTextIndex = 0 %}
  181. {# Paramètres de la légende #}
  182. {% set legendStyles = {
  183. 'color' : heroSection.legendColor|default('#000'),
  184. 'font-size' : heroSection.legendFontSize|default(1) ~ heroSection.legendFontSizeUnit|default('rem'),
  185. 'font-weight' : heroSection.legendFontWeight|default(600),
  186. 'text-align' : heroSection.legendAlign|default('left'),
  187. 'padding' : heroSection.legendPaddingTop|default(3) ~ heroSection.legendPaddingTopBottomUnit|default('px') ~ ' 0 ' ~ heroSection.legendPaddingBottom|default(3) ~ heroSection.legendPaddingBottomUnit|default('px') ~ ' 0',
  188. } %}
  191. {# Première slide hero : URL pour <link rel="preload"> (LCP) #}
  192. {% set firstHeroSlideEntity = (slidesByType['hero-section']|default([]))|first %}
  193. {% set heroLcpPreloadHref = null %}
  194. {% if firstHeroSlideEntity %}
  195. {% set se0 = firstHeroSlideEntity.elements ?? [] %}
  196. {% set med0 = null %}
  197. {% if firstHeroSlideEntity.mediaUrl is not empty %}
  198. {% set med0 = {'url': firstHeroSlideEntity.mediaUrl, 'thumbnails': {'800x': firstHeroSlideEntity.mediaUrl, '1200x': firstHeroSlideEntity.mediaUrl}, 'isVideo': firstHeroSlideEntity.isVideo} %}
  199. {% elseif se0.media is defined and se0.media.id is defined %}
  200. {% set med0 = sulu_resolve_media(se0.media.id, app.request.locale) %}
  201. {% endif %}
  202. {% if med0 is not null %}
  203. {% set mUrl0 = med0.url %}
  204. {% set isVid0 = med0.isVideo is defined ? med0.isVideo : (mUrl0 matches '/\.mp4(\\?.*)?$/' or mUrl0 matches '/\.webm(\\?.*)?$/' or mUrl0 matches '/\.ogg(\\?.*)?$/') %}
  205. {% if not isVid0 %}
  206. {% set heroLcpPreloadHref = sulu_media_url(med0, '1200x') %}
  207. {% else %}
  208. {% set poster0 = sulu_media_url(med0, '1200x') %}
  209. {% if poster0 and not (poster0 matches '/\.(mp4|webm|ogg)(\\?.*)?$/i') %}
  210. {% set heroLcpPreloadHref = poster0 %}
  211. {% endif %}
  212. {% endif %}
  213. {% endif %}
  214. {% endif %}
  216. {% if true %}
  217. {% if heroSection.isLegend == true and heroSection.legend is not empty and mode is not defined or mode != 'mobile' %}
  218. <div class="carousel-legend carousel-legend-{{ carouselId }}" carousel-id="{{ carouselId }}">
  219. <h1 class="carousel-legend-content carousel-legend-{{ carouselId }}">
  220. {{ heroSection.legend }}
  221. </h1>
  222. </div>
  223. {% endif %}
  224. <div class="carousel-wrapper"
  225. data-type="heroSection"
  226. id="{{ carouselId }}"
  227. data-carousel-id="{{ carouselId }}"
  228. data-carousel-options='{{ {
  229. "showDots": heroSection.showDots|default(false),
  230. "showThumbnails": showThumbnails,
  231. "isAutoSlide": isSwitchSlideTime,
  232. "animation": animation
  233. }|json_encode|raw }}'
  234. style="--switch-slide-time: {{ switchSlideTime }}ms;">
  235. {% if heroLcpPreloadHref %}
  236. <link rel="preload" as="image" href="{{ heroLcpPreloadHref }}" fetchpriority="high">
  237. {% endif %}
  238. <div class="carousel-container">
  239. <div class="carousel" data-observed>
  240. {% for slideEntity in slidesByType['hero-section'] ?? [] %}
  241. {# ============================================================ #}
  242. {# RECONSTRUCTION DE LA STRUCTURE SLIDE DEPUIS L'ENTITÉ SLIDE #}
  243. {# ============================================================ #}
  245. {# Extraire les données de l'entité Slide #}
  246. {% set slideElements = slideEntity.elements ?? [] %}
  247. {% set slideStyles = slideEntity.styles ?? {} %}
  249. {# Gestion du média : mediaUrl de l'entité ou depuis elements #}
  250. {% set media = null %}
  251. {% if slideEntity.mediaUrl is not empty %}
  252. {% set media = {'url': slideEntity.mediaUrl, 'thumbnails': {'800x': slideEntity.mediaUrl}, 'isVideo': slideEntity.isVideo} %}
  253. {% elseif slideElements.media is defined and slideElements.media.id is defined %}
  254. {% set media = sulu_resolve_media(slideElements.media.id, app.request.locale) %}
  255. {% endif %}
  257. {% if media is not null %}
  258. {% set mediaUrl = sulu_media_original_url(media) %}
  259. {% set mediaPoster = sulu_media_url(media, '1200x') %}
  260. {% set mediaThumb800 = sulu_media_url(media, '800x') %}
  261. {% set mediaThumb1200 = sulu_media_url(media, '1200x') %}
  262. {% set mediaThumb1920 = sulu_media_url(media, '1600x') %}
  263. {# Utiliser isVideo depuis la base de données si disponible, sinon deviner depuis l'extension #}
  264. {% set isVideo = media.isVideo is defined ? media.isVideo : (mediaUrl matches '/\.mp4(\\?.*)?$/' or mediaUrl matches '/\.webm(\\?.*)?$/' or mediaUrl matches '/\.ogg(\\?.*)?$/') %}
  265. {% else %}
  266. {% set mediaUrl = '' %}
  267. {% set mediaPoster = '' %}
  268. {% set mediaThumb800 = null %}
  269. {% set mediaThumb1200 = null %}
  270. {% set mediaThumb1920 = null %}
  271. {% set isVideo = false %}
  272. {% endif %}
  274. {# Reconstruire la structure slide complète #}
  275. {% set slide = {
  276. 'media': media,
  277. 'title': slideEntity.subtitle ?? '',
  278. 'isColorGradient': slideStyles.isColorGradient ?? false,
  279. 'isCustomBackgroundFilter': slideStyles.isCustomBackgroundFilter ?? false,
  280. 'customBackgroundFilterColor': slideStyles.customBackgroundFilterColor ?? '#000000',
  281. 'customBackgroundFilterOpacity': slideStyles.customBackgroundFilterOpacity ?? 40,
  282. 'gradientOrientation': slideStyles.gradientOrientation ?? 'leftRight',
  283. 'color1': slideStyles.color1 ?? '#fff',
  284. 'color1Opacity': slideStyles.color1Opacity ?? 100,
  285. 'color2': slideStyles.color2 ?? '#000',
  286. 'color2Opacity': slideStyles.color2Opacity ?? 100,
  287. 'isCommonCompanySelector': slideEntity.companyId is not empty,
  288. 'CommonCompanySelector': slideEntity.companyId ?? '',
  289. 'companyCustomLogo': slideElements.companyCustomLogo ?? null,
  290. 'isDestinationSelector': false,
  291. 'destinationSelector': '',
  292. 'destinationCustomName': '',
  293. 'contents': slideElements is iterable ? slideElements : [],
  294. 'isNoCustom': false,
  295. 'isCustomDuration': false,
  296. 'customDuration': '',
  297. 'isCustomPrice': false,
  298. 'customPrice': '',
  299. 'advicedDuration': slideEntity.subtitle ?? '',
  300. 'advicedPeriod': '',
  301. 'bonusTexts': []
  302. } %}
  304. {# Définir le nom de la destination au début du slide #}
  305. {% set destinationName = '' %}
  306. {% if slide.isDestinationSelector and slide.destinationCustomName is not empty %}
  307. {% set destinationName = slide.destinationCustomName %}
  308. {% elseif slide.isDestinationSelector and slide.destinationSelector is not empty %}
  309. {% set destinationName = 'Destination' %}
  310. {% endif %}
  312. {% set isFullSize = slideStyles.fullSize|default(false) %}
  313. {% set slideHref = '' %}
  314. {% set slideOpensNewTab = false %}
  315. {% for element in slide.contents %}
  316. {% if slideHref == '' and element.type is defined and element.type == 'button' %}
  317. {% set candidateUrl = (element.url ?? '')|trim %}
  318. {% if candidateUrl is not empty and candidateUrl != '#' %}
  319. {% set slideHref = candidateUrl %}
  320. {% set slideOpensNewTab = element.hasNewTab|default(false) %}
  321. {% endif %}
  322. {% endif %}
  323. {% endfor %}
  325. <div class="carousel-slide{% if slideHref %} is-linked{% endif %}{% if isFullSize %} is-full-size{% endif %}"
  326. id="slide-{{ carouselId }}-{{ loop.index0 }}"
  327. {% if slideHref %}
  328. data-slide-href="{{ slideHref|e('html_attr') }}"
  329. {% if slideOpensNewTab %}data-slide-target="_blank"{% endif %}
  330. {% endif %}>
  331. {# Media - toujours affiché, même avec gradient #}
  332. {% if isVideo %}
  333. <video class="carousel-media"
  334. autoplay muted loop playsinline
  335. preload="metadata"
  336. poster="{{ mediaPoster }}"
  337. {% if loop.first %}fetchpriority="high"{% endif %}>
  338. <source src="{{ mediaUrl }}" type="video/mp4">
  339. <p>{{ 'carousel.destination.video_not_supported'|trans }}</p>
  340. </video>
  341. {% else %}
  342. {% set isHeroLcpImage = loop.first and mediaPoster is not empty %}
  343. <img class="carousel-media{{ isHeroLcpImage ? ' carousel-media--lcp' : '' }}"
  344. src="{{ mediaPoster }}"
  345. {% if mediaThumb800 and mediaThumb1200 and mediaThumb800 != mediaThumb1200 %}
  346. srcset="{{ mediaThumb800 }} 800w{% if mediaThumb1200 %}, {{ mediaThumb1200 }} 1200w{% endif %}{% if mediaThumb1920 %}, {{ mediaThumb1920 }} 1920w{% endif %}"
  347. sizes="100vw"
  348. {% elseif mediaThumb800 %}
  349. srcset="{{ mediaThumb800 }} 800w"
  350. sizes="100vw"
  351. {% endif %}
  352. alt="{{ slide.title|default('')|striptags|e('html_attr') }}"
  353. decoding="async"
  354. {% if isHeroLcpImage %}
  355. fetchpriority="high"
  356. {% else %}
  357. loading="lazy" fetchpriority="low"
  358. {% endif %}>
  359. {% endif %}
  361. {% if isFullSize and slideHref %}
  362. <a class="carousel-slide-link"
  363. href="{{ slideHref }}"
  364. {% if slideOpensNewTab %}target="_blank" rel="noopener"{% endif %}
  365. aria-label="{{ slide.title|default('')|striptags|e('html_attr') }}"></a>
  366. {% endif %}
  368. {% if not isFullSize %}
  369. <div class="carousel-content {% if slide.isColorGradient %}color-gradient{% endif %}">
  370. {# Image de fond avec filtre blur ou gradient selon la configuration #}
  371. {% if slide.isColorGradient %}
  372. {% set gradientDirections = {
  373. 'leftRight': 'to right',
  374. 'rightLeft': 'to left',
  375. 'topBottom': 'to bottom',
  376. 'bottomTop': 'to top',
  377. 'topLeftBottomRight': 'to bottom right',
  378. 'bottomLeftTopRight': 'to top right',
  379. 'topRightBottomLeft': 'to bottom left',
  380. 'bottomRightTopLeft': 'to top left'
  381. } %}
  382. {% set gradientDirection = gradientDirections[slide.gradientOrientation] %}
  383. <div class="background-blur" style="
  384. background: linear-gradient({{ gradientDirection }}, {{ slide.color1|hex_to_rgba(slide.color1Opacity) }}, {{ slide.color2|hex_to_rgba(slide.color2Opacity) }});
  385. "></div>
  386. {% else %}
  387. {% if isVideo %}
  388. <div class="background-blur" style="
  389. filter: blur({{ backgroundBlur > 0 ? backgroundBlur : 40 }}px);
  390. ">
  391. <canvas class="video-background-canvas"
  392. data-video-url="{{ mediaUrl }}">
  393. </canvas>
  394. </div>
  395. {% else %}
  396. <div class="background-blur" style="
  397. background-image: url('{{ mediaPoster }}');
  398. filter: blur({{ backgroundBlur > 0 ? backgroundBlur : 40 }}px);
  399. "></div>
  400. {% endif %}
  401. {% endif %}
  403. {# Contenu sans filtre blur #}
  404. <div class="line" style="position: relative; z-index: 1;">
  406. {# Affichage du logo de la compagnie si sélectionnée #}
  407. {% if slide.isCommonCompanySelector and slide.CommonCompanySelector is not empty %}
  408. <div class="content-company-logo">
  409. {% if slide.companyCustomLogo is not empty and slide.companyCustomLogo.url is defined %}
  410. <img src="{{ slide.companyCustomLogo.url }}" alt="Logo compagnie">
  411. {% else %}
  412. {% set companyLogo = get_company_logo_by_id(slide.CommonCompanySelector) %}
  413. {% if companyLogo is not empty %}
  414. <img src="{{ companyLogo }}" alt="Logo compagnie">
  415. {% endif %}
  416. {% endif %}
  417. </div>
  418. {% endif %}
  420. {# Parcourir les éléments dans l'ordre selon slide.elements #}
  422. <div class="carousel-title">{{ slide.title|replace_slide_offer_variables(slideEntity.offerId)|raw }}</div>
  423. {% for element in slide.contents %}
  424. {# Type : text - Afficher un texte simple #}
  425. {% if element.type == 'text' %}
  426. <div class="carousel-text">{{ element.content|replace_slide_offer_variables(slideEntity.offerId)|raw }}</div>
  428. {# Type : button - Afficher un bouton avec style comme classe CSS #}
  429. {% elseif element.type == 'button' %}
  430. {% set buttonText = (element.text ?? '')|replace_slide_offer_variables(slideEntity.offerId) %}
  431. {% set buttonUrl = element.url ?? '#' %}
  432. {% set buttonStyle = element.style ?? 'style1' %}
  433. {% set buttonSize = element.size|default('medium') %}
  434. {% set hasArrow = element.hasArrow|default(false) %}
  435. {% set hasNewTab = element.hasNewTab|default(false) %}
  436. <div class="carousel-button-wrapper">
  437. <a href="{{ buttonUrl }}"
  438. class="btn {{ buttonStyle }} {{ buttonSize }} reverse_color"
  439. {% if hasNewTab %}target="_blank" rel="noopener"{% endif %}>
  440. {{ buttonText }}
  441. {% if hasArrow %}{{ getLucidIcon('arrow-right') }}{% endif %}
  442. </a>
  443. </div>
  445. {# Type : image - Afficher une image #}
  446. {% elseif element.type == 'image' %}
  447. <div class="carousel-image">
  448. <img src="{{ sulu_media_url(element.content, '1200x') }}"
  449. alt="{{ element.alt ?? '' }}"
  450. loading="lazy"
  451. style="{% if element.width is defined %}width: {{ element.width }}px;{% endif %}{% if element.height is defined %} height: {{ element.height }}px;{% endif %}">
  452. </div>
  453. {% endif %}
  454. {% endfor %}
  457. </div>
  458. </div>
  459. {% endif %}
  460. </div>
  461. {% endfor %}
  462. </div>
  463. </div>
  465. {# Dots #}
  466. {% if heroSection.showDots|default(false) %}
  467. <div class="carousel-dots">
  468. {% for slideEntity in slidesByType['hero-section'] ?? [] %}
  469. <span class="dot {% if loop.first %}active{% endif %}"
  470. data-index="{{ loop.index0 }}"
  471. data-carousel-id="{{ carouselId }}"></span>
  472. {% endfor %}
  473. </div>
  474. {% endif %}
  476. {# Flèches #}
  477. {% if isArrows %}
  478. <div class="carousel-arrows">
  479. <button class="carousel-arrow left" aria-label="{{ 'common.previous'|trans }}" data-carousel-id="{{ carouselId }}">{{ getLucidIcon('chevron-left') }}</button>
  480. <button class="carousel-arrow right" aria-label="{{ 'common.next'|trans }}" data-carousel-id="{{ carouselId }}">{{ getLucidIcon('chevron-right') }}</button>
  481. </div>
  482. {% endif %}
  484. </div>
  488. {% endif %}
  490. {# Le JavaScript du carousel est maintenant géré par assets/website/js/snippets/hero-section.js #}
  493. <!-- Styles dynamiques -->
  494. <style>
  495. {% if heroSection.isLegend == true and heroSection.legend is not empty and mode is not defined or mode != 'mobile' %}
  496. h1.carousel-legend-{{ carouselId }}, .carousel-legend-{{ carouselId }}{
  497. {{ legendStyles|map((value, key) => key ~ ':' ~ value)|join('; ') }};
  498. }
  499. {% endif %}
  501. #{{ carouselId }} .carousel-container {
  502. {{ carouselContainerStyles|map((value, key) => key ~ ':' ~ value)|join('; ') }};
  503. }
  505. #{{ carouselId }} .carousel-slide {
  506. {{ carouselSlideStyles|map((value, key) => key ~ ':' ~ value)|join('; ') }};
  507. }
  509. #{{ carouselId }} .carousel-title {
  510. {{ carouselTitleStyles|map((value, key) => key ~ ':' ~ value)|join('; ') }};
  511. }
  513. #{{ carouselId }} .dynamic-button {
  514. {{ carouselDynamicButtonStyles|map((value, key) => key ~ ':' ~ value)|join('; ') }};
  515. }
  517. #{{ carouselId }} .dynamic-button svg {
  518. color: {{ heroSection.dynamicButtonArrowColor|default('inherit') }};
  519. }
  521. #{{ carouselId }} .dynamic-button .price {
  522. {{ carouselDynamicButtonPriceStyles|map((value, key) => key ~ ':' ~ value)|join('; ') }};
  523. }
  525. #{{ carouselId }} .carousel-content {
  526. {{ carouselContentStyles|map((value, key) => key ~ ':' ~ value)|join('; ') }};
  527. }
  529. #{{ carouselId }} .carousel-content:not([class*="color-gradient"])::before {
  530. {{ carouselContentBeforeStyles|map((value, key) => key ~ ':' ~ value)|join('; ') }};
  531. }
  533. {# Styles personnalisés pour les slides avec filtre de fond personnalisé #}
  534. {% for slideEntity in slidesByType['hero-section'] ?? [] %}
  535. {% set slideStyles = slideEntity.styles ?? {} %}
  536. {% if slideStyles.isCustomBackgroundFilter ?? false %}
  537. #{{ carouselId }} #slide-{{ carouselId }}-{{ loop.index0 }} .carousel-content::before {
  538. background: {{ (slideStyles.customBackgroundFilterColor ?? '#000000') | hex_to_rgba(slideStyles.customBackgroundFilterOpacity ?? 40) }};
  539. }
  540. {% endif %}
  541. {% endfor %}
  543. #{{ carouselId }} .carousel .line {
  544. {{ carouselLineStyles|map((value, key) => key ~ ':' ~ value)|join('; ') }};
  545. }
  547. #{{ carouselId }} .dot.active::before {
  548. {{ carouselDotsActiveBeforeStyles|map((value, key) => key ~ ':' ~ value)|join('; ') }};
  549. }
  551. #{{ carouselId }} .carousel-arrows {
  552. {{ carouselArrowsStyles|map((value, key) => key ~ ':' ~ value)|join('; ') }};
  553. }
  555. #{{ carouselId }} .carousel-arrow {
  556. {{ carouselArrowStyles|map((value, key) => key ~ ':' ~ value)|join('; ') }};
  557. }
  559. #{{ carouselId }} .carousel-media, #{{ carouselId }} .carousel-content {
  560. border-radius: {{ heroSection.bordersRadius|default(0) ~ heroSection.bordersRadiusUnit|default('px') }};
  561. }
  563. #{{ carouselId }} .duration-badge, #{{ carouselId }} .price-badge {
  564. {{ badgesStyles|map((value, key) => key ~ ':' ~ value)|join('; ') }};
  565. }
  567. #{{ carouselId }} .content-company-logo {
  568. {{ logosStyles|map((value, key) => key ~ ':' ~ value)|join('; ') }};
  569. }
  571. @media (max-width: 768px) {
  572. #{{ carouselId }} .carousel-slide,
  573. #{{ carouselId }} .carousel-content,
  574. #{{ carouselId }} .carousel .line {
  575. height: auto;
  576. }
  578. #{{ carouselId }} .carousel-media, #{{ carouselId }} .carousel-content {
  579. border-radius: 0;
  580. }
  582. #{{ carouselId }} .carousel-button-wrapper .btn {
  583. width: 100%;
  584. }
  586. }
  589. /* Animations */
  591. @keyframes fillGradient {
  592. 0% {
  593. width: 0%;
  594. }
  595. 100% {
  596. width: 100%;
  597. }
  598. }
  600. /* Responsive mobile - Réduction des font-size */
  601. @media (max-width: 768px) {
  602. {% for mobileStyle in mobileStyles %}
  603. {{ mobileStyle }}
  604. {% endfor %}
  605. }
  607. </style>