templates/component/offer_slider.html.twig line 1

Open in your IDE?
  1. {#
  2.     component: offer slider
  4.     heading: [{
  5.         title {string}: Titre 
  6.         titleAnnex {string}: Titre annexe
  7.     }]
  8.     text {string}: Text d'introduction du slider
  9.     items: [{
  10.         name {string}: Nom de l'offre
  11.         text {string}: Texte de l'offre
  12.         type {string}: Type de l'offre
  13.         time {string}: Temps de l'offre
  14.         image {image}: Image de l'offre
  15.             size: {
  16.                 width: "780",
  17.                 height: "430"
  18.             }
  19.         price {string}: Prix final de l'offre
  20.         realPrice {string}: Prix de départ de l'offre
  21.         links: [{
  22.             text {string}: Texte du lien
  23.             to {string}: Lien
  24.         }]
  25.     }]
  26. #}
  28. {% set props = {
  29.   heading: null,
  30.   items: [],
  31.   text:null
  32. }|merge(props|default({}))  %}
  34. <section data-component="offer-slider" class="OfferSlider-component">
  36.     {# Heading #}
  37.     {% include "component/heading.html.twig" with {
  38.         props: props.heading
  39.     } only %}
  41.     <div class="l-container">
  43.         {# Text #}
  44.         {% if props.text %}
  46.             <div class="l-row u-center">
  48.                 <p class="l-column OfferSlider-text">{{ props.text }}</p>
  50.             </div>
  52.         {% endif %}
  54.         <div class="l-row OfferSlider-list" ref="container">
  56.             {% for item in props.items %}
  58.                 <div class="l-column OfferSlider-listItem" ref="items" {% if (item.link.to is not defined or not item.link.to) and  item.indexCalendar is  defined %} data-index="0" data-indexcalendar="{{ item.indexCalendar }}" data-id="{{ item.idCare }}" data-mindays="{{ item.minDays }}" data-maxdays="{{ item.maxDays }}" {% endif %} {% if item.aquao is defined %}data-aquao="{{item.aquao}}"{% endif %}>
  60.                     <div class="OfferSlider-Item">
  62.                         {# Image #}
  63.                         <div class="OfferSlider-listItemImageRatioHelper" ref="images">
  65.                             <div>
  66.                                 {% include "component/image.html.twig" with {
  67.                                     props: item.image
  68.                                 } %}
  69.                                 {# {% include "component/picture.html.twig" with {
  70.                                     props: item.image|merge({
  71.                                         srcWebp: (item.image.src) ? asset(item.image.src | imagine_filter('convert_img_to_webp')) : ''
  72.                                     })
  73.                                 } %} #}
  74.                             </div>
  76.                         </div>
  78.                         {# Content card #}
  79.                         <div class="OfferSlider-listItemCard {% if item.realPrice is defined and item.realPrice  %} discount  {% endif  %} ">
  81.                             {# Heading #}
  82.                             <div
  83.                                 class="OfferSlider-listItemContent">
  85.                                 {# Type #}
  86.                                 {% if item.type is defined %}
  88.                                     <p class="OfferSlider-listItemType">{{ item.type }}</p>
  90.                                 {% endif %}
  92.                                 {# Name #}
  93.                                 <p class="OfferSlider-listItemName">{{ item.name|raw }}</p>
  95.                                 {# Time #}
  96.                                 {% if item.time is defined %}
  98.                                     <div class="OfferSlider-listItemTimeWrapper">
  100.                                         {# Schedule icon #}
  101.                                         {% include "component/svg.html.twig" with {
  102.                                             props: {
  103.                                                 name: 'schedule'
  104.                                             }
  105.                                         } %}
  107.                                         {# Time #}
  108.                                         <p class="OfferSlider-listItemTime">{{ item.time }}</p>
  110.                                     </div>
  112.                                 {% endif %}
  114.                                 {# Text #}
  115.                                 {% if item.text is defined %}
  117.                                     <p class="OfferSlider-listItemText">{{ item.text|raw }}</p>
  119.                                 {% endif %}
  122.                             </div>
  124.                             {# Booking #}
  125.                             <div class="OfferSlider-listItemBooking">
  127.                                 {# Price #}
  128.                                 <div class="OfferSlider-listItemPriceContainer">
  130.                                     <p class="OfferSlider-listItemPriceFrom">{{ item.priceFrom }}</p>
  132.                                     <p class="OfferSlider-listItemPrice">{{ item.price }}</p>
  134.                                     {% if item.realPrice is defined and item.realPrice  %}
  136.                                         <p class="OfferSlider-listItemRealPriceFrom">{{ item.realPriceMention }}</p>
  138.                                         <p class="OfferSlider-listItemRealPrice">{{ item.realPrice }}</p>
  140.                                     {% endif %}
  142.                                 </div>
  144.                                 {# Link #}
  145.                                 {% include "component/button.html.twig" with {
  146.                                     props: item.link
  147.                                 } %}
  149.                             </div>
  151.                         </div>
  153.                     </div>
  155.                 </div>
  157.             {% endfor %}
  159.         </div>
  161.         {% if props.items|length > 1 %}
  163.             {# Nav #}
  164.             <div
  165.                 class="1-row OfferSlider-nav">
  167.                 {# Arrows #}
  168.                 <div
  169.                     class="OfferSlider-navButtons">
  171.                     {# Previous button #}
  172.                     <button ref="previousButton" class="OfferSlider-navButton OfferSlider-navPreviousButton NavPreviousButton">
  174.                         {% include "component/svg.html.twig" with {
  175.                         props: {
  176.                             name: 'arrow-left'
  177.                         }    
  178.                     } %}
  181.                         {% include "component/svg.html.twig" with {
  182.                         props: {
  183.                             name: 'arrow-left'
  184.                         }    
  185.                     } %}
  187.                     </button>
  189.                     {# Next button #}
  190.                     <button ref="nextButton" class="OfferSlider-navButton OfferSlider-navNextButton NavNextButton">
  192.                         {% include "component/svg.html.twig" with {
  193.                         props: {
  194.                             name: 'arrow-right'
  195.                         }
  196.                     } %}
  199.                         {% include "component/svg.html.twig" with {
  200.                         props: {
  201.                             name: 'arrow-right'
  202.                         }
  203.                     } %}
  205.                     </button>
  207.                 </div>
  209.             </div>
  211.         {% endif %}
  213.     </div>
  215. </section>