templates/includes/teaser/content-teaser.html.twig line 1

Open in your IDE?
  1. {% set styleModifier = styleModifier | default('') %}
  2. {% set actions = actions |default(null) %}
  3. {% set notAvailable = notAvailable | default(false) %}
  4. {% set isCart = isCart | default(false) %}
  5. {% set event = event ?? null %}
  6. {% set decorName = decorName ?? null %}
  7. <div class="content-teaser{{ styleModifier ? ' ' ~ styleModifier : '' }} {{ notAvailable ? 'alert alert-danger'}} {{ actions ? '' : 'stretch-link' }}">
  8.     {% if image|default(null) or imgText|default(false) %}
  9.         <div class="content-teaser__image">
  10.             <div class="ratio ratio-1x1">
  11.                 {% if image|default(null) is not empty %}
  12.                     {{ image.thumbnail('content-teaser-lg').html({
  13.                         imgAttributes:{
  14.                             class:'js-lazy-img ratio-item'
  15.                         },
  16.                         lowQualityPlaceholder:true
  17.                     }) | raw }}
  18.                 {% else %}
  19.                     <div class="content-teaser__image-text">{{ imgText|default('content-teaser.no-image'|trans) }}</div>
  20.                 {% endif %}
  21.             </div>
  22.         </div>
  23.     {% endif %}
  24.     <div class="content-teaser__body">
  25.         {% if subtitle|default(false) %}
  26.             <div class="content-teaser__supline">{{ subtitle }}</div>
  27.         {% endif %}
  28.         {% if title|default('') is not empty %}
  29.             <h2 class="content-teaser__headline">
  30.                 {% if href is defined %}
  31.                     <a href="{{ href }}" class="{{ actions ? '' : 'stretch-link__link' }}"
  32.                         {% if event == 'select_sample_variant' %}
  33.                             data-event-tracking-event="{{ event }}"
  34.                             data-event-tracking-product_name="{{ decorName }}"
  35.                             data-event-tracking-sample_variant="{{ title }}"
  36.                         {% endif %}
  37.                     >{{ title }}</a>
  38.                 {% else %}
  39.                     {{ title }}
  40.                 {% endif %}
  41.             </h2>
  42.         {% endif %}
  43.         {% if list|default(false) %}
  44.             <div class="content-teaser__list">{{ list|raw }}</div>
  45.         {% endif %}
  46.         {% if actions|default([])|length > 0 %}
  47.             <div class="content-teaser__actions">
  48.                 <ul>
  49.                     {% for action in actions|filter(action => action.caption != '') %}
  50.                         {% if action.href is defined %}
  51.                             <li>
  52.                                 <a href="{{ action.href }}" target="{{ 'tel:' in action.href or 'mailto:' in action.href ? '' : '_blank' }}" {{ action.download|default(false) ? 'download'}} aria-label="{{ action.caption }} {{ action.download|default(false) ? 'sr.download'|trans}}">
  53.                                     <span class="content-teaser__actions-icon" aria-hidden="true">
  54.                                         <span class="icon icon-{{ action.icon }}" aria-hidden="true"></span>
  55.                                     </span>
  56.                                     <span class="content-teaser__actions-text">{{ action.caption }}</span>
  57.                                 </a>
  58.                             </li>
  59.                         {% else %}
  60.                             <li>
  61.                                 <span>
  62.                                     {% if action.icon is defined %}
  63.                                         <span class="content-teaser__actions-icon">
  64.                                             <span class="icon icon-{{ action.icon }}"></span>
  65.                                         </span>
  66.                                     {% endif %}
  67.                                     <span class="content-teaser__actions-text">{{ action.caption | raw }}</span>
  68.                                 </span>
  69.                             </li>
  70.                         {% endif %}
  71.                     {% endfor %}
  72.                 </ul>
  73.             </div>
  74.         {% endif %}
  75.         {% if keyValues|default([])|length > 0 %}
  76.             <div class="content-teaser__keyvalues">
  77.                 <ul>
  78.                     {% for keyValueItem in keyValues|filter(item => item.key is not empty and item.value is not empty) %}
  79.                         <li class="">
  80.                             <span class="content-teaser__keyvalues-key">{{ keyValueItem.key }}</span>
  81.                             {% if keyValueItem.value is iterable %}
  82.                                 {% for value in keyValueItem.value %}
  83.                                     <span class="content-teaser__keyvalues-value">{{ value }}</span>
  84.                                 {% endfor %}
  85.                             {% else %}
  86.                                 <span class="content-teaser__keyvalues-value">{{ keyValueItem.value }}</span>
  87.                             {% endif %}
  88.                         </li>
  89.                     {% endfor %}
  90.                 </ul>
  91.             </div>
  92.         {% endif %}
  93.         {% if isCart %}
  94.             <div class="js-cart__item" data-product-id="{{ item.productId }}">
  95.                 <div class="d-md-flex align-items-center js-number-spinner" data-number-spinner-trigger="change">
  96.                     <div class=" number-spinner mt-3">
  97.                         <label for="amount" class="visually-hidden">{{ 'sr.amount'|trans }}</label>
  98.                         <div class="input-group">
  99.                             <div class="input-group-prepend">
  100.                                 <button class="btn btn-number-spinner btn--no-transition js-number-spinner__down" type="button" aria-controls="amount" aria-label="{{ 'sr.reduce-amount'|trans }}">
  101.                                     <span class="icon icon-minus" aria-hidden="true"></span>
  102.                                 </button>
  103.                             </div>
  105.                             <input type="number" id="amount" name="amount" class="form-control js-number-spinner__input" value="{{ item.count }}" min="0" max="{{ item.count + cartAddMaxAmount(item.product, app.user) }}">
  106.                             <div class="input-group-append">
  107.                                 <button class="btn btn-number-spinner btn--no-transition js-number-spinner__up" type="button" aria-controls="amount" aria-label="{{ 'sr.increase-amount'|trans }}">
  108.                                     <span class="icon icon-plus" aria-hidden="true"></span>
  109.                                 </button>
  110.                             </div>
  111.                         </div>
  112.                     </div>
  113.                     <div class="js-number-spinner__error number-spinner__error mt-3 text-danger hide ms-md-3" role="status">
  114.                         <span class="icon icon-info me-2" aria-hidden="true"></span> {{ 'detail.number-spinner.info'|trans }}
  115.                     </div>
  116.                 </div>
  118.             </div>
  121.         {% endif %}
  122.     </div>
  123.     {% if icon|default(null) %}
  124.         <div class="content-teaser__arrow" aria-hidden="true">
  125.             <div class="icon icon-{{ icon }}"></div>
  126.         </div>
  127.     {% endif %}
  128.     {% if button|default(false) %}
  129.         <div class="content-teaser__btn">
  130.             <a href="{{ button.href }}" class="{{ button.className }}"><span class="btn__text">{{ button.text }}</span><span class="btn__icon" aria-hidden="true"><span class="icon icon-{{ button.icon }}" aria-hidden="true"></span></span></a>
  131.         </div>
  132.     {% endif %}
  133.     {% if notAvailable %}
  134.         <div class="content-teaser__error">
  135.             {{ 'content-teaser.not-available' | trans }}
  136.         </div>
  137.     {% endif %}
  138. </div>