templates/_snippets/best_sellers.html.twig line 1

Open in your IDE?
  1. {# ------------------------------------------------------------------------ #}
  2. {# ----------------------------- PARAMÉTRAGES ----------------------------- #}
  3. {# ------------------------------------------------------------------------ #}
  4. {% set effectiveSectionSettings = showSectionSettings|default(true) ? sectionSettings|default({}) : {} %}
  5. {% set content = effectiveSectionSettings|merge(bestSellers) %}
  6. {% set bestSellers = content %}
  7. {% set bestSellersId = 'best_sellers-' ~ random() %}
  8. {% set tag = getTagById(bestSellers.CommonTagSelector|default(0))%}
  9. {% include '_snippets/sections/cards_section_settings.html.twig' with {
  10. 'content': content,
  11. 'id': bestSellersId,
  12. } %}
  14. {% if bestSellers.companiesBlocks is not empty %}
  15. <section
  16. id="{{ bestSellersId }}" class="best-sellers"> {# En-tête avec titre et navigation #}
  17. <div class="best-sellers-head">
  18. <h2>
  19. <div class="icon">
  20. {{ getLucidIcon(attribute(bestSellers, 'pictogramTitleSection')|default('')) }}
  21. </div>
  22. {{ attribute(bestSellers, 'titleTextSection')|default('')|raw }}
  23. </h2>
  24. <div class="chevrons"></div>
  25. </div>
  27. {# Carousel des super cards (1 card = 1 compagnie) #}
  28. <div class="slider">
  29. <div class="cards">
  30. {% for companyData in bestSellers.companiesBlocks %}
  31. {% if companyData.CommonCompanySelector is defined %}
  32. {% set company = getCompanyById(companyData.CommonCompanySelector|default(0)) %}
  33. {% set cruises = searchCruises([company, tag], 3, true) %}
  34. {% set gradientStartRgb = companyData.companyColorStart|default('') ? (companyData.companyColorStart|hex_to_rgb|join(', ')) : '0, 12, 37' %}
  35. {% set gradientEndRgb = companyData.companyColorEnd|default('') ? (companyData.companyColorEnd|hex_to_rgb|join(', ')) : '0, 0, 0' %}
  36. {% set gradientStartOpacity = companyData.companyColorStartOpacity|default(1) %}
  37. {% set gradientEndOpacity = companyData.companyColorEndOpacity|default(0) %}
  38. {% set previewCruise = cruises|first %}
  39. {% set headerImageUrl = (previewCruise and previewCruise.ship is defined and crea_media_get_media(['main'], previewCruise.ship)) ? crea_media_get_media(['main'], previewCruise.ship).cdnUrl : '/img/photos-temporaires/placeholder-image-offer.jpg' %}
  41. <div
  42. class="card" data-company-name="{{ company.name|default('Compagnie') }}">
  43. {# Header de la card avec image de fond et logo de la compagnie #}
  44. <div class="card-header" style="background-image: url('{{ crea_media_get_media(['banner'], company).cdnUrl|default('/img/photos-temporaires/placeholder-image-offer.jpg') }}'); --gradient-start: {{ gradientStartRgb }}; --gradient-start-opacity: {{ gradientStartOpacity }}; --gradient-end: {{ gradientEndRgb }}; --gradient-end-opacity: {{ gradientEndOpacity }};">
  45. <div class="company-logo">
  46. <img src="{{ crea_media_get_media(['logo'], company).cdnUrl|default('/img/placeholder-company.svg') }}" alt="{{ 'common.company'|trans }} {{ company.name|default('Compagnie') }}">
  47. </div>
  48. </div>
  50. {# Contenu de la card avec les sous-cards (croisières) #}
  51. <div
  52. class="card-content">
  53. {# Preloader affiché pendant le chargement (même nombre que les vraies cards) #}
  54. <div id="{{ bestSellersId }}-preloader-{{ loop.index }}" class="sub-cards sub-cards-preloader">
  55. {% for cruise in cruises %}
  56. {% include "pages/_includes/preloaders/includes/_preload-card.html.twig" %}
  57. {% endfor %}
  58. </div>
  60. {# Sub-cards réelles (cachées au début) #}
  61. <div class="sub-cards" style="display: none;">
  62. {% for cruise in cruises %}
  63. {% include '_snippets/components/cards/mini_card.html.twig' with {
  64. cruise: cruise,
  65. isPriorityLoad: true,
  66. isCompanyLogo: false,
  67. isFavorite: false,
  68. } only %}
  69. {% endfor %}
  70. </div>
  71. </div>
  73. {# Footer de la card #}
  74. <div class="card-footer button-container">
  75. <a href="{{ getCruiseSearchUrl([company]) }}" class="company-link">
  76. {% set buttonText = bestSellers.textButtonContent|default('snippets.offers.see_all'|trans) %}
  77. {% set buttonText = buttonText|replace({'%company_slug%': company.slug|default(''), '%company_name%': company.name|default('Company'), '%company_id%': company.id|default('')}) %}
  78. {{ buttonText }}
  79. </a>
  80. </div>
  81. </div>
  82. {% endif %}
  83. {% endfor %}
  84. </div>
  85. </div>
  86. </section>
  88. {% endif %}
  90. {# Le JavaScript des offres est maintenant géré par assets/website/js/snippets/best-sellers.js #}
  92. <!-- Variables CSS dynamiques -->
  93. <!-- prettier-ignore -->
  94. <style>
  95. #{{ bestSellersId }}
  96. {
  97. /* Padding section */
  98. --padding-left-section: {{bestSellers.paddingLeftRightSection|default(1.125) ~ bestSellers.paddingUnitSection|default('rem')}};
  100. /* Card dimensions */
  101. --card-min-width: {{bestSellers.widthCards|default(34) ~ bestSellers.widthUnitCards|default('rem')}};
  102. --card-border-radius: {{bestSellers.borderRadiusCards|default(1.125) ~ bestSellers.borderRadiusUnitCards|default('rem')}};
  103. --card-image-height: {{bestSellers.imageHeightCards|default(9) ~ bestSellers.imageHeightCardsUnit|default('rem')}};
  104. --card-padding: {{bestSellers.paddingTopBottomCards|default(6) ~ bestSellers.paddingUnitCards|default('px')}}
  105. {{bestSellers.paddingRightLeftCards|default(6) ~ bestSellers.paddingUnitCards|default('px')}};
  107. /* Typography - Title */
  108. --title-font-size: {{bestSellers.titleSizeCards|default(1.125) ~ bestSellers.titleSizeUnitCards|default('rem')}};
  109. --title-font-weight: {{bestSellers.titleWeightCards|default(500)}};
  110. --title-color: {{bestSellers.titleColorCards|default('#1D1D1D')}};
  112. /* Typography - Text */
  113. --text-color: {{bestSellers.textColorCards|default('#6C6C6C')}};
  114. --text-font-size: {{bestSellers.textSizeCards|default(0.875) ~ bestSellers.textSizeUnitCards|default('rem')}};
  115. --text-font-weight: {{bestSellers.textWeightCards|default(400)}};
  116. --icon-width: {{bestSellers.textSizeCards|default(0.875) * 0.85 ~ bestSellers.textSizeUnitCards|default('rem')}};
  118. /* Typography - Price */
  119. --price-color: {{bestSellers.priceColorCards|default('#FF5C00')}};
  120. --price-font-size: {{bestSellers.priceSizeCards|default(1.25) ~ bestSellers.priceSizeUnitCards|default('rem')}};
  121. --price-font-weight: {{bestSellers.priceWeightCards|default(700)}};
  123. /* Button */
  124. --button-padding: {{bestSellers.paddingButtonTopBottomContent|default(14) ~ bestSellers.paddingButtonUnitContent|default('px')}}
  125. {{bestSellers.paddingButtonRightLeftContent|default(14) ~ bestSellers.paddingButtonUnitContent|default('px')}};
  126. --button-color: {{bestSellers.colorButtonContent|default('#004461')}};
  127. --button-bg-color: {{bestSellers.backgroundColorButtonContent|default('#FFFFFF')}};
  128. --button-border-radius: {{bestSellers.borderRadiusButtonContent|default(0.75) ~ bestSellers.borderRadiusButtonContentUnit|default('rem')}};
  129. --button-border: {{bestSellers.borderSizeButtonContent|default(1) ~ bestSellers.borderSizeButtonContentUnit|default('px')}} solid{{bestSellers.borderColorButtonContent|default('#F2F2F2')}};
  130. }
  131. </style>
  133. {# Le JavaScript du carousel est chargé automatiquement via assets/website/js/snippets/best-sellers.js #}