templates/component/offer_choice.html.twig line 1

Open in your IDE?
  1. {#
  2.     component: offer choice
  3.       text {string}: Texte d'introduction
  4.     hasAccomodationOption {bool}: Si option d'hébergement existe
  5.     choiceTitle {string}: Titre pour faire un choix
  6.     items: [{
  7.         title {string}: Titre 
  8.         titleAnnex {string}: Titre annexe (au dessus du titre)
  9.         maxDays {int||null}: Nombre maximum de jours à réserver
  10.         minDays {int||null}: Nombre minimum de jours à réserver
  11.         excerpt {string}: Détails de l'offre
  12.         text {string}: WYSIWYG Description de l'offre
  13.         price {string}: Prix de l'offre
  14.         priceWithAccomodation {string}: Prix de l'offre avec hébergement inclus
  15.         informations {string}: Info de l'offre
  16.         link: {
  17.             text {string}: Texte du lien
  18.             to {string}: Lien
  19.         }
  20.     }]
  21. #}
  22. {% set props = {
  23.     text: null,
  24.     hasAccommodationOption: false,
  25.     choiceTitle: null,
  26.     items: []
  27. }|merge(props|default({}))  %}
  28. {# Modifier classes #}
  29. {% set modifierClasses = [] %}
  30. {% if props.text %}
  31.     {% set modifierClasses = modifierClasses|merge(['has-text']) %}
  32. {% endif %}
  33. {% if props.hasAccommodationOption %}
  34.     {% set modifierClasses = modifierClasses|merge(['has-accomodation-option']) %}
  35. {% endif %}
  36. <section data-component="offer-choice" class="OfferChoice-component{{ ' ' ~ modifierClasses | join(' ') }}">
  37.     {# Background pattern #}
  38.     <div class="OfferChoice-backgroundPattern backgroundPatternWaves">
  39.         {% include "component/waves.html.twig"  with {
  40.                 props: {
  41.                     speed:0.1,
  42.                     shape:{
  43.                         src:props.shape.src,
  44.                         backgroundcolor:props.shape.src
  45.                     }
  46.                 }
  47.         } %}
  48.     </div>
  49.     <div class="l-container">
  50.         {# Text #}
  51.         {% if props.text %}
  52.             <div class="l-row u-center">
  53.                 <div
  54.                     class="l-column OfferChoice-textColumn">
  55.                     {# Text #}
  56.                     <p class="OfferChoice-text">{{ props.text|raw }}</p>
  57.                 </div>
  58.             </div>
  59.         {% endif %}
  60.         {# Accomodation option #}
  61.         {% if props.hasAccommodationOption %}
  62.             <div class="l-row u-center">
  63.                 
  64.                 {# Accomodation option #}
  65.                 <div class="l-column OfferChoice-accomodationOption">
  66.                 {% if props.accomodationText[0] is not null %}
  67.                     {# Accomodation option choice #}
  68.                     <div class=" offerchoice-accomodationoptiontextwrapper">
  69.                         <p class="OfferChoice-accomodationOptionText" ref="labelItem">{{ props.accomodationText[0] }}</p>
  70.                     </div>
  71.                  {% endif %}
  72.                     {# Accomodation option switch #}
  73.                     <div class="OfferChoice-accomodationOptionSwitch" {% if props.accomodationText[0] is empty or props.accomodationText[1] is empty %} style="display: none;"{% endif %}>
  74.                         <input type="checkbox" checked id="accomodation-option-id" ref="checkbox"></input>
  75.                         <label for="accomodation-option-id" ref="labelButton"></label>
  76.                     </div>
  77.            
  78.                 {% if props.accomodationText[1] is not null %}
  79.                 {# Accomodation option choice #}
  80.                 <div class="OfferChoice-accomodationOptionTextWrapper">
  81.                     <p class="OfferChoice-accomodationOptionText" ref="labelItem">{{ props.accomodationText[1] }}</p>
  82.                 </div>
  83.             {% endif %}
  84.             </div>
  85.             
  86.             <p class="OfferChoice-choiceTitle">{{ props.choiceTitle }}</p>
  87.         </div>
  88.     {% endif %}
  89.     <div class="l-row u-center">
  90.         <div class="OfferChoice-itemHeadingAnnex">
  91.             {% for item in props.items %}
  92.                 <p class="OfferChoice-itemDuration {% if item == props.items[0] %}selected {% endif %}" ref="button">{{ item.title }}</p>
  93.             {% endfor %}
  94.         </div>
  95.         {# Main #}
  96.         <div class="l-column OfferChoice-main">
  97.             {% for item in props.items %}
  98.                 {# Item #}
  99.                 <div
  100.                     class="OfferChoice-item {% if item == props.items[0] %}selected {% endif %} " ref="item" {% if item.indexCalendar is defined %} data-idoption="{{ item.id }}" data-indexcalendar="{{item.indexCalendar|json_encode()}}" {% endif %}>
  101.                     {# Item heading #}
  102.                     <div
  103.                         class="OfferChoice-itemHeading">
  104.                         {# Item name #}
  105.                         <p class="OfferChoice-itemName" ref="titleAnnex">{{ item.titleAnnex }}</p>
  106.                         {# Item duration #}
  107.                         <p class="OfferChoice-itemDuration" ref="title">{{ item.title }}</p>
  108.                         <p style="display:none" ref="maxDays">{{ item.maxDays }}</p>
  109.                         <p style="display:none" ref="minDays">{{ item.minDays }}</p>
  110.                         {# Item excerpt #}
  111.                         <p class="OfferChoice-itemExcerpt" ref="details">{{ item.excerpt }}</p>
  112.                     </div>
  113.                     {# Item services #}
  114.                     <ul class="OfferChoice-itemServices">
  115.                         {% include "component/wysiwyg.html.twig" with {
  116.                             props: {
  117.                                 content: item.text
  118.                             }
  119.                         } %}
  120.                     </ul>
  121.                     {# Item booking #}
  122.                     <div
  123.                         class="OfferChoice-itemBooking">
  124.                         {# Item price #}
  125.                         <div class="OfferChoice-itemPriceWrapper">
  126.                             <p class="OfferChoice-itemPriceFrom">{{ item.priceFrom }}</p>
  127.                             <p class="OfferChoice-itemPrice" ref="price">{{ item.price }}</p>
  128.                             {% if props.hasAccommodationOption %}
  129.                                 <p class="OfferChoice-itemPriceAccommodation" ref="accommodationPrice">{{ item.priceWithAccommodation }}</p>
  130.                             {% endif %}
  131.                         </div>
  132.                         {# Item informations #}
  133.                         <div class="OfferChoice-itemInformations">{{ item.informations|raw }}</div>
  134.                         {# Item link #}
  135.                         <div class="OfferChoice-itemLink" ref="selectButton">
  136.                             {% include "component/button.html.twig" with {
  137.                                     props: item.link|merge_object({
  138.                                         theme: 'invert'
  139.                                     })
  140.                                 } %}
  141.                         </div>
  142.                     </div>
  143.                 </div>
  144.             {% endfor %}
  145.         </div>
  146.     </div>
  147. </div></section>