templates/_snippets/last_offers.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(lastOffers) %}
  6. {% set lastOffersId = 'last_offers-' ~ random() %}
  7. {% set specialOffers = getLastOffers(content.howManyOffers|default(1)) %}
  9. {% include '_snippets/sections/tags_section_settings.html.twig' with {
  10. 'content': content,
  11. 'id': lastOffersId,
  12. } %}
  14. {% include '_snippets/sections/cards_section_settings.html.twig' with {
  15. 'content': content,
  16. 'id': lastOffersId,
  17. } %}
  19. {# Paramètres spécifiques à ce fragment #}
  21. {% set buttonSettings = {
  22. 'padding': content.paddingButtonTopBottomContent|default(0) ~ content.paddingButtonUnitContent|default('px') ~ ' ' ~ content.paddingButtonRightLeftContent|default(0) ~ content.paddingButtonUnitContent|default('px'),
  23. 'color': content.colorButtonContent|default('#000'),
  24. 'background-color': content.backgroundColorButtonContent|default('#000'),
  25. 'border-radius': content.borderRadiusButtonContent|default(0) ~ content.borderRadiusButtonContentUnit|default('px'),
  26. 'font-size': content.fontSizeButtonContent|default(16) ~ content.fontSizeButtonContentUnit|default('px'),
  27. 'font-weight': content.fontWeightButtonContent|default(500),
  28. 'border': content.borderSizeButtonContent|default(0) ~ content.borderSizeButtonContentUnit|default('px') ~ ' solid ' ~ content.borderColorButtonContent|default('#000'),
  29. } %}
  31. {% set conditionSettings = {
  32. 'color': content.conditionColorCards|default('#000'),
  33. 'font-weight': content.conditionWeightCards|default(500),
  34. 'font-size': content.conditionSizeCards|default(16) ~ content.conditionSizeUnitCards|default('px'),
  35. } %}
  37. {% if true %}
  39. <section
  40. id="{{ lastOffersId }}" class="last-offers"> {# En-tête avec titre et navigation #}
  41. <div class="last-offers-head">
  42. <h2>
  43. <div class="icon">
  44. {{ getLucidIcon(attribute(content, 'pictogramTitleSection')|default('')) }}
  45. </div>
  46. {{ attribute(content, 'titleTextSection')|default('')|raw }}
  47. </h2>
  48. <div class="chevrons"></div>
  49. </div>
  51. {# ##################### HUB Promos requis ##################### #}
  52. {# <div class="button-container">
  53. <a href="/promotions" class="button">{{ content.textButtonContent|default('snippets.offers.see_all'|trans) }}</a>
  54. </div> #}
  56. {# Carousel #}
  57. <div class="slider">
  58. <div class="cards">
  60. {% for offer in specialOffers %}
  61. {% set mediaOffer = crea_media_get_media(['banner'], offer) %}
  62. {% set companyLogoUrl = offer.companies is iterable and offer.companies is not empty and offer.companies[0] is not null ? (crea_media_get_media(['logo'], offer.companies[0]).cdnUrl|default('/img/placeholder-company.svg')) : null %}
  63. {% set isPriority = loop.index <= 2 %}
  64. {% set imageUrl = mediaOffer.cdnUrl|default('/img/photos-temporaires/placeholder-image-offer.jpg') %}
  65. {% set tag = offer.tag|default(null) %}
  66. {% set company = offer.company|default(null) %}
  69. <div
  70. class="card animation1 offer-card-opener {{ isPriority ? 'priority-load' : 'lazy-load' }}"
  71. data-offer-id="{{ offer.id }}"
  72. role="button"
  73. tabindex="0"
  74. aria-haspopup="dialog"
  75. aria-controls="modal-offer-{{ offer.id }}"
  76. data-lazy="{{ isPriority ? 'false' : 'true' }}"
  77. >
  78. <div class="image {{ isPriority ? '' : 'lazy-background' }}" {% if isPriority %} style="background-image: url('{{ imageUrl }}');" {% else %} data-bg="{{ imageUrl }}" {% endif %}>
  79. <div class="tags">
  80. <div class="tag" style="background-color:{{offer.offerCategory.iconColorFill|default('#000000')}}">
  81. {{ getLucidIcon(offer.offerCategory.icon|default('star')) }}
  82. </div>
  83. </div>
  84. </div>
  85. <div class="card-inner">
  86. <div>
  87. <div class="more-info-div">
  88. <img src="{{ companyLogoUrl}}" alt="">
  89. <span class="info-icon" aria-hidden="true">
  90. {{ getLucidIcon('info') }}
  91. </span>
  92. </div>
  93. <div class="title">
  94. <div class="title-text">
  95. {{ offer.displayed_name|default(offer.name|default('snippets.offers.special_offer'|trans)) }}
  96. </div>
  97. </div>
  98. <div class="description content">
  99. <div class="description-text">
  100. {{ offer.shortDescription|default('')|slice(0, 250)|raw }}
  101. {% if offer.shortDescription|default('')|length > 250 %}
  102. <span class="read-more">...</span>
  103. {% endif %}
  104. </div>
  105. <div class="condition">
  106. {{ offer.conditions|default('')|slice(0, 250)|raw }}
  107. {% if offer.conditions|default('')|length > 250 %}
  108. <span class="read-more">...</span>
  109. {% endif %}
  110. </div>
  111. </div>
  112. </div>
  113. <div class="price-container">
  114. <div class="price">
  115. {{ 'common.from'|trans }}
  116. <span class="price-value">{{ getBestPriceByOffer(offer).baseCostDouble|default(0)|number_format(0, ',', ' ') }}€ {{ 'common.per_person_short'|trans }}</span>
  117. {# <span class="price-value">{{ 'XXX'|default(0)|number_format(0, ',', ' ') }}€ {{ 'common.per_person_short'|trans }}</span> #}
  118. </div>
  119. <div class="see-more">
  120. <a
  121. href="{{ getCruiseSearchUrl([getOfferById(offer.id)]) }}"
  122. class="btn style3 bg-w offer-card-action"
  123. >{{ 'common.see'|trans }}
  124. {{ getLucidIcon('arrow-right') }}</a>
  125. </div>
  126. </div>
  127. </div>
  128. </div>
  129. {% endfor %}
  130. </div>
  131. </div>
  133. <div class="last-offers-modals" hidden>
  134. {% for offer in specialOffers %}
  135. {% include '_snippets/_last_offer_modal.html.twig' with {
  136. offer: offer,
  137. imageUrl: crea_media_get_media(['banner'], offer).cdnUrl|default('/img/photos-temporaires/placeholder-image-offer.jpg'),
  138. companyLogoUrl: offer.companies is iterable and offer.companies is not empty and offer.companies[0] is not null ? (crea_media_get_media(['logo'], offer.companies[0]).cdnUrl|default('/img/placeholder-company.svg')) : null,
  139. } only %}
  140. {% endfor %}
  141. </div>
  142. </section>
  144. {% endif %}
  146. {# Le JavaScript des offres est maintenant géré par assets/website/js/snippets/last-offers.js #}
  148. <!-- Styles dynamiques -->
  149. <!-- prettier-ignore -->
  150. <style>
  151. #{{ lastOffersId }} {
  152. --padding-left-slider: {{ content.sectionPaddingLeft|default(0) ~ content.sectionPaddingUnit|default('px') }};
  154. --height-card-image: {{ content.imageHeightCards|default(200) ~ content.imageHeightCardsUnit|default('px') }};
  156. --condition-color: {{ content.conditionColorCards|default('#000') }};
  157. --condition-font-weight: {{ content.conditionWeightCards|default(500) }};
  158. --condition-font-size: {{ content.conditionSizeCards|default(16) ~ content.conditionSizeUnitCards|default('px') }};
  160. --button-padding: {{ content.paddingButtonTopBottomContent|default(0) ~ content.paddingButtonUnitContent|default('px') }} {{ content.paddingButtonRightLeftContent|default(0) ~ content.paddingButtonUnitContent|default('px') }};
  161. --button-color: {{ content.colorButtonContent|default('#000') }};
  162. --button-background-color: {{ content.backgroundColorButtonContent|default('#000') }};
  163. --button-border-radius: {{ content.borderRadiusButtonContent|default(0) ~ content.borderRadiusButtonContentUnit|default('px') }};
  164. --button-font-size: {{ content.fontSizeButtonContent|default(16) ~ content.fontSizeButtonContentUnit|default('px') }};
  165. --button-font-weight: {{ content.fontWeightButtonContent|default(500) }};
  166. --button-border: {{ content.borderSizeButtonContent|default(0) ~ content.borderSizeButtonContentUnit|default('px') }} solid {{ content.borderColorButtonContent|default('#000') }};
  167. }
  168. </style>