templates/component/care_card.html.twig line 1

Open in your IDE?
  1. {#
  2.     component: care card
  4.     image {image}: Image de l'offre
  5.         size: {
  6.             width: "340",
  7.             height: "200"
  8.         }
  9.     title {string}: Nom de l'offre
  10.     date {string}: Date
  11.     duration {string}: Nom de l'offre
  12.     text {string}: Texte de l'offre
  13.     categoryTitle {string}: Texte de l'offre
  14.     price {string}: Prix final de l'offre
  15.     price {string}: Prix final de l'offre avec réduction de prix
  16.     links: [{
  17.         icon {string}: Nom de l'icône du lien
  18.         text {string}: Texte du lien
  19.         to {string}: Lien
  20.     }]
  21.     aquao {string}: Url
  22. #}
  24. {% set props = {
  25.   image: null,
  26.   title: null,
  27.   date:null,
  28.   duration: null,
  29.   text: null,
  30.   categoryTitle: null,
  31.   price: null,
  32.   priceReduced: null,
  33.   links:[],
  34.   aquao:null
  35. }|merge(props|default({}))  %}
  37. <div data-component="care-card" class="CareCard-container" {% if props.links[0].to == "#" %} data-indexcalendar="{{ props.indexCalendar }}" data-id="{{ props.idCare }}" data-mindays="{{ props.minDays }}" data-maxdays="{{ props.maxDays }}" {% endif %} {% if props.aquao is defined and props.aquao %} data-aquao="{{props.aquao}}" {% endif %}>
  40.     <div
  41.         ref="card" class="CareCard-component">
  42.         {# Heading #}
  43.         <div
  44.             class="CareCard-heading">
  46.             {# Image #}
  47.             <div class="CareCard-backgroundImage" ref="heading">
  49.                 {% include "component/image.html.twig" with {
  50.                     props: props.image
  51.                 } %}
  52.                 {# {% include "component/picture.html.twig" with {
  53.                                     props: props.image|merge({
  54.                                         srcWebp: (props.image.src) ? asset(props.image.src | imagine_filter('convert_img_to_webp')) : ''
  55.                                     })
  56.                                 } %} #}
  58.             </div>
  60.             {# Title #}
  61.             <p class="CareCard-title" ref="title">{{ props.title|raw }}</p>
  62.         </div>
  64.         {# Main #}
  65.         <div
  66.             class="CareCard-main">
  68.             {# Duration #}
  69.             <div
  70.                 class="CareCard-duration" ref="duration">
  72.                 {# Duration icon #}
  73.                 <div class="CareCard-durationIcon">
  75.                     {% include "component/svg.html.twig" with {
  76.                         props: {
  77.                             name: 'schedule'
  78.                         }
  79.                     } %}
  81.                 </div>
  83.                 {# Duration text #}
  84.                 <span class="CareCard-durationText">{{ props.duration }}</span>
  86.             </div>
  88.             <div
  89.                 class="CareCard-content" ref="main">
  90.                 {# Text #}
  91.                 {% if props.date %}
  92.                     <p class="CareCard-date">{{ props.date|raw }}</p>
  93.                 {% endif %}
  94.                 <p class="CareCard-text" ref="titleAnnex">{{ props.categoryTitle | raw }}</p>
  96.                 {# Price #}
  97.                 {% if props.price %}
  98.                     {% if props.priceReduced %}
  99.                         <div class="CareCard-price">
  100.                             <span class="previous">{{ props.price | raw }}</span>
  101.                             <span>{{props.priceReduced|raw}}</span>
  102.                         </div>
  103.                     {% else %}
  104.                         <div class="CareCard-price">{{ props.price | raw }}</div>
  105.                     {% endif %}
  106.                 {% endif %}
  108.                 {# Buttons #}
  109.                 <div class="CareCard-buttons {% if props.links|length < 2 %} single-button {% endif %} ">
  111.                     {% for link in props.links %}
  112.                         {% include "component/button.html.twig" with {
  113.                             props: {
  114.                                 text: link.text,
  115.                                 to: link.to,
  116.                                 bookingLink: link.bookingLink is defined ? link.bookingLink : null ,
  117.                                 rel: "nofollow"
  118.                             }|merge_object({
  119.                                 icon: link.icon,
  120.                                 externe : link.externe is defined ? link.externe :null,
  121.                             })
  122.                         } %}
  124.                     {% endfor %}
  125.                 </div>
  126.             </div>
  129.         </div>
  130.     </div>
  132.     <div
  133.         ref="backCard" class="BackCareCard-component">
  134.         {# Heading #}
  135.         <div
  136.             class="CareCard-heading">
  138.             {# Duration #}
  139.             <div
  140.                 class="CareCard-duration" ref="backDuration">
  142.                 {# Duration icon #}
  143.                 <div class="CareCard-durationIcon">
  145.                     {% include "component/svg.html.twig" with {
  146.                         props: {
  147.                             name: 'schedule'
  148.                         }
  149.                     } %}
  151.                 </div>
  153.                 {# Duration text #}
  154.                 <span class="CareCard-durationText">{{ props.duration }}</span>
  156.             </div>
  158.             {# Title #}
  159.             <p class="CareCard-title">{{ props.title|raw }}</p>
  161.         </div>
  163.         {# Main #}
  164.         <div class="CareCard-main">
  166.             {% include "component/wysiwyg.html.twig" with {
  167.                 props: {
  168.                     content: props.text
  169.                 }
  170.             } %}
  172.             {# Price #}
  173.             {% if props.price %}
  174.                 {% if props.priceReduced %}
  175.                     <div class="CareCard-price">
  176.                         <span class="previous">{{ props.price | raw }}</span>
  177.                         <span>{{props.priceReduced|raw}}</span>
  178.                     </div>
  179.                 {% else %}
  180.                     <div class="CareCard-price">{{ props.price | raw }}</div>
  181.                 {% endif %}
  182.             {% endif %}
  184.             {# Buttons #}
  185.             <div class="CareCard-buttons">
  187.                 {% for link in props.links %}
  189.                     {% include "component/button.html.twig" with {
  190.                             props: {
  191.                                 text: link.text,
  192.                                 to: link.to,
  193.                                 rel: "nofollow",
  194.                                 bookingLink: link.bookingLink is defined ? link.bookingLink : null
  195.                             }|merge_object({
  196.                                 icon: link.icon,
  197.                                 externe : link.externe is defined ? link.externe :null,
  198.                             })
  199.                         } %}
  201.                 {% endfor %}
  203.             </div>
  205.         </div>
  206.     </div>
  208. </div>