templates/_snippets/visited_recently.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(visitedRecently) %}
  6. {% set visitedRecently = content %}
  7. {% set visitedRecentlyId = 'visited_recently-' ~ random() %}
  9. {% set cardsLimit = visitedRecently.limit|default(5) %}
  10. {% if cardsLimit < 1 %}
  11. {% set cardsLimit = 5 %}
  12. {% endif %}
  14. {% set idsCookie = app.request.cookies.get('visitedCruises')|default('') %}
  15. {% set ids = idsCookie ? idsCookie|split(',') : [] %}
  17. {% include '_snippets/sections/cards_section_settings.html.twig' with {
  18. 'content': content,
  19. 'id': visitedRecentlyId,
  20. } %}
  22. {% set buttonSettings = {
  23. 'padding': visitedRecently.paddingButtonTopBottomContent|default(14) ~ visitedRecently.paddingButtonUnitContent|default('px') ~ ' ' ~ visitedRecently.paddingButtonRightLeftContent|default(14) ~ visitedRecently.paddingButtonUnitContent|default('px'),
  24. 'color': visitedRecently.colorButtonContent|default('#004461'),
  25. 'background-color': visitedRecently.backgroundColorButtonContent|default('#FFFFFF'),
  26. 'border-radius': visitedRecently.borderRadiusButtonContent|default(0.75) ~ visitedRecently.borderRadiusButtonContentUnit|default('rem'),
  27. 'font-size': '16px',
  28. 'font-weight': '500',
  29. 'border': visitedRecently.borderSizeButtonContent|default(1) ~ visitedRecently.borderSizeButtonContentUnit|default('px') ~ ' solid ' ~ visitedRecently.borderColorButtonContent|default('#F2F2F2'),
  30. } %}
  32. {% set conditionSettings = {
  33. 'color': visitedRecently.textColorCards|default('#6C6C6C'),
  34. 'font-weight': visitedRecently.textWeightCards|default(400),
  35. 'font-size': visitedRecently.textSizeCards|default(0.875) ~ visitedRecently.textSizeUnitCards|default('rem'),
  36. } %}
  38. <section id="{{ visitedRecentlyId }}" class="visited-recently">
  39. <div class="visited-recently-head">
  40. <h2>
  41. <div class="icon">
  42. {{ getLucidIcon(attribute(visitedRecently, 'pictogramTitleSection')|default('')) }}
  43. </div>
  44. {{ attribute(visitedRecently, 'titleTextSection')|default('')|raw }}
  45. </h2>
  47. <div class="chevrons"></div>
  48. </div>
  50. <div id="{{ visitedRecentlyId }}-preloader" class="visited-recently-preloader" style="display: none;">
  51. {% include "pages/_includes/preloaders/_preload-visited_recently.html.twig" %}
  52. </div>
  54. <div class="slider" data-visited-recently-container>
  55. <div class="cards" data-visited-recently-cards data-visited-cruises>
  56. {% for rawId in ids|slice(0, cardsLimit) %}
  57. {% set id = rawId|trim %}
  58. {% set cruise = id != '' ? getCruiseById(id) : null %}
  59. {% if cruise %}
  60. <div class="card" data-cruise-id="{{ id }}">
  61. {% include '_snippets/components/cards/mini_card.html.twig' with {
  62. cruise: cruise,
  63. isPriorityLoad: true,
  64. } only %}
  65. </div>
  66. {% endif %}
  67. {% endfor %}
  68. </div>
  69. </div>
  70. </section>
  72. <style>
  73. .visited-recently-preloader {
  74. overflow: hidden;
  75. padding-left: var(--padding-left-section, 1.125rem);
  76. }
  78. #{{ visitedRecentlyId }} {
  79. --padding-left-section: {{ visitedRecently.paddingLeftRightSection|default(1.125) ~ visitedRecently.paddingUnitSection|default('rem') }};
  81. --card-border-radius: {{ visitedRecently.borderRadiusCards|default(1.125) ~ visitedRecently.borderRadiusUnitCards|default('rem') }};
  82. --card-image-height: {{ visitedRecently.imageHeightCards|default(9) ~ visitedRecently.imageHeightCardsUnit|default('rem') }};
  83. --card-padding: {{ visitedRecently.paddingTopBottomCards|default(6) ~ visitedRecently.paddingUnitCards|default('px') }}
  84. {{ visitedRecently.paddingRightLeftCards|default(6) ~ visitedRecently.paddingUnitCards|default('px') }};
  86. --title-font-size: {{ visitedRecently.titleSizeCards|default(1.125) ~ visitedRecently.titleSizeUnitCards|default('rem') }};
  87. --title-font-weight: {{ visitedRecently.titleWeightCards|default(500) }};
  88. --title-color: {{ visitedRecently.titleColorCards|default('#1D1D1D') }};
  90. --text-color: {{ visitedRecently.textColorCards|default('#6C6C6C') }};
  91. --text-font-size: {{ visitedRecently.textSizeCards|default(0.875) ~ visitedRecently.textSizeUnitCards|default('rem') }};
  92. --text-font-weight: {{ visitedRecently.textWeightCards|default(400) }};
  93. --icon-width: {{ visitedRecently.textSizeCards|default(0.875) * 0.85 ~ visitedRecently.textSizeUnitCards|default('rem') }};
  95. --price-color: {{ visitedRecently.priceColorCards|default('#FF5C00') }};
  96. --price-font-size: {{ visitedRecently.priceSizeCards|default(1.25) ~ visitedRecently.priceSizeUnitCards|default('rem') }};
  97. --price-font-weight: {{ visitedRecently.priceWeightCards|default(700) }};
  99. --button-padding: {{ visitedRecently.paddingButtonTopBottomContent|default(14) ~ visitedRecently.paddingButtonUnitContent|default('px') }}
  100. {{ visitedRecently.paddingButtonRightLeftContent|default(14) ~ visitedRecently.paddingButtonUnitContent|default('px') }};
  101. --button-color: {{ visitedRecently.colorButtonContent|default('#004461') }};
  102. --button-bg-color: {{ visitedRecently.backgroundColorButtonContent|default('#FFFFFF') }};
  103. --button-border-radius: {{ visitedRecently.borderRadiusButtonContent|default(0.75) ~ visitedRecently.borderRadiusButtonContentUnit|default('rem') }};
  104. --button-border: {{ visitedRecently.borderSizeButtonContent|default(1) ~ visitedRecently.borderSizeButtonContentUnit|default('px') }}
  105. solid {{ visitedRecently.borderColorButtonContent|default('#F2F2F2') }};
  106. }
  107. </style>