templates/component/offer.html.twig line 1

Open in your IDE?
  1. {#
  2.     component: offer
  4.     heading: [{
  5.         title {string}: Titre 
  6.         titleAnnex {string}: Titre annexe (au dessus du titre)
  7.     }]
  8.     layout {string}: 1 pour l'image à droite, 2 pour l'image à gauche
  9.     text {string}: Texte
  10.     discountText {string}: Texte de promotion
  11.     image {image}: Image 
  12.         size: {
  13.             width: "660",
  14.             height: "1200"
  15.         }
  16.     imageText {string}: Texte par-dessus l'image
  17.     price {string}: Prix
  18.     link: [{
  19.         text {string}: Texte du lien
  20.         to {string}: Lien
  21.     }]
  22. #}
  24. {% set props = {
  25.     heading: null,
  26.     layout: '1',
  27.     text: null,
  28.     discountText: null,
  29.     image: null,
  30.     imageText: null,
  31.     price: null,
  32.     link: null
  33. }|merge(props|default({}))  %}
  35. <section data-component="offer" class="Offer-component layout-{{ props.layout }}">
  37.     <div class="l-container">
  39.         <div
  40.             class="l-row Offer-row u-v-stretch">
  42.             {# Main #}
  43.             <div
  44.                 class="l-column Offer-main">
  46.                 {# Heading #}
  47.                 {% include "component/heading.html.twig" with {
  48.                     props: props.heading
  49.                 } %}
  51.                 {# Wysiwyg #}
  52.                 <div class="Offer-wysiwyg">
  53.                     {% include "component/wysiwyg.html.twig" with {
  54.                         props: {
  55.                             content: props.text
  56.                         }
  57.                     } %}
  58.                 </div>
  60.                 {% if props.items is defined %}
  61.                     <div class="Offer-list">
  62.                         {% for item in props.items %}
  64.                             <li class="Offer-listItem">
  65.                                 {% include "component/svg.html.twig" with {
  66.                                 props: {
  67.                                     name: item.icon
  68.                                 }
  69.                             } %}
  70.                                 {{ item.text }}
  71.                             </li>
  72.                         {% endfor %}
  73.                     </div>
  74.                 {% endif %}
  77.                 {# Price informations #}
  78.                 {% if props.price or props.link  %}
  79.                 <div
  80.                     class="Offer-priceInformations">
  82.                     {# Discount text #}
  83.                     {% if props.discountText %}
  84.                         <p class="Offer-discountText">{{ props.discountText }}</p>
  85.                     {% endif %}
  87.                     {# Price #}
  88.                     <div class="Offer-price">{{ props.price | raw }}</div>
  90.                     {% if props.link %}
  91.                         {# Link #}
  92.                         <div class="Offer-link">
  93.                             {% include "component/button.html.twig" with {
  94.                                 props: props.link
  95.                             } %}
  96.                         </div>
  97.                     {% endif %}
  98.                 </div>
  99.                 {% endif %}
  101.             </div>
  103.             {# Media #}
  104.             <div class="l-column Offer-media  {% if props.imageText is defined and props.imageText %} has-Subtitle {% endif %} ">
  106.                 <div class="Offer-mediaRatioHelper">
  108.                     <div>
  110.                         {% include "component/image.html.twig" with {
  111.                                 props: props.image
  112.                             } %}
  113.                         {# {% include "component/picture.html.twig" with {
  114.                             props: props.image|merge({
  115.                                 srcWebp: (props.image.src) ? asset(props.image.src | imagine_filter('convert_img_to_webp')) : ''
  116.                             })
  117.                         } %} #}
  119.                     </div>
  121.                 </div>
  123.                 {% if props.imageText %}
  125.                     <p class="Offer-mediaText">
  126.                         {{ props.imageText|raw }}
  127.                     </p>
  129.                 {% endif %}
  130.             </div>
  132.         </div>
  134.     </div>
  136. </div></section>