templates/teaser/ticket-teaser.html.twig line 1

Open in your IDE?
  1. {% set price = product.getTeaserPrice() %}
  2. {% set isBookable = product.isBookable %}
  4. {% set trackingKeyLearnMore = 'click-product-teaser-learn-more-' ~ product.id | default %}
  5. {% set trackingKeyCart = 'click-product-teaser-cart-' ~ product.id | default %}
  6. {% set trackingKeySelectItem = 'click-select-item-' ~ product.id | default %}
  8. {% set trackingDataLearnMore = {
  9.     "trigger": "click",
  10.     'datalayer': {
  11.         'event': 'click_product_teaser',
  12.         'config_origin': 'learn_more'
  13.     }
  14. } %}
  15. {% set trackingDataCart = {
  16.     "trigger": "click",
  17.     'datalayer': {
  18.         'event': 'click_product_teaser',
  19.         'config_origin': 'ticket_configurator'
  20.     }
  21. } %}
  22. {% set trackingDataSelectItem = {
  23.     'trigger': 'click',
  24.     'datalayer': {
  25.         'event': 'select_item',
  26.         'ecommerce': {
  27.             'items': [
  28.                 trackingItem|default([])
  29.             ]
  30.         }
  31.     }
  32. } %}
  34. {% do jsConfig('_trackingData').add({
  35.     (trackingKeyLearnMore): trackingDataLearnMore,
  36.     (trackingKeyCart): trackingDataCart,
  37.     (trackingKeySelectItem): trackingDataSelectItem
  38. }) %}
  40. {#
  41. the script tag is a fallback solution for all highlight teasers that do not get rendered immeadiately (e.g. are in an ajax response).
  42. if that's the case, the trackingDatalayer can't be successfully added to the jsConfig
  43.     => that's why we add it to the _trackingData object directly through JS at render time of the repspective teaser.
  44. #}
  46. <script>
  47.     if (typeof _trackingData !== 'undefined' && typeof _trackingData['{{ trackingKeySelectItem }}'] === 'undefined') {
  48.         _trackingData['{{ trackingKeySelectItem }}'] = {
  49.             'trigger': 'click',
  50.             'datalayer': {
  51.                 'event': 'select_item',
  52.                 'ecommerce': {
  53.                     'items': [
  54.                         {{ trackingItem|default([]) |json_encode|raw }}
  55.                     ]
  56.                 }
  57.             }
  58.         }
  59.     }
  60. </script>
  62. {# @var product App\Model\Shop\Ticket\ShopTicketCatalog #}
  63. <section class="ticket-teaser stretch-link {{ className|default('') }}">
  64.     <div class="position-relative">
  65.         {% if product is instanceof('\\Pimcore\\Model\\DataObject\\ShopTicketCatalog') and product.isAnnualCatalog %}
  66.             <span class="ticket-teaser__img-badge">
  67.                 {{ 'shop.teaser.validity'|trans }}
  68.                 <strong>
  69.                     {{ 'shop.teaser.validity-annual-catalog'|trans }}
  70.                 </strong>
  71.             </span>
  72.         {% elseif product.teaserValidity %}
  73.             {% set validity = product.teaserValidity %}
  74.             <span class="ticket-teaser__img-badge">
  75.                 {{ 'shop.teaser.validity'|trans }}
  77.                 <strong>
  78.                     {% if validity.from %}
  79.                         {% if validity.to and carbon().now().isSameYear(validity.to) %}
  80.                             {% set dateFormat = 'date-short' %}
  81.                         {% endif %}
  82.                         <time datetime="{{ validity.from }}">
  83.                             {{ elements_dateFormat(validity.from, dateFormat|default('date-long')) }}
  84.                         </time>
  85.                     {% endif %}
  86.                     {% if validity.to %}
  87.                         -
  88.                         <time datetime="{{ validity.to }}">
  89.                             {{ elements_dateFormat(validity.to) }}
  90.                         </time>
  91.                     {% endif %}
  92.                 </strong>
  93.             </span>
  94.         {% endif %}
  96.         <div class="ratio ratio-ticket-teaser img-scroll-zoom-wrapper">
  97.             {% if product.teaserImage %}
  98.                 {{ product.teaserImage.thumbnail('ticket-teaser').html({
  99.                     'imgAttributes': {
  100.                         'class': 'ratio-item ticket-teaser__img js-img-scroll-zoom img-scroll-zoom js-lazy-img'
  101.                     },
  102.                     'lowQualityPlaceholder': true
  103.                 })|raw }}
  104.             {% endif %}
  105.         </div>
  106.     </div>
  108.     <div class="ticket-teaser__body">
  109.         {% if product.teaserTopTitle %}
  110.             <div class="ticket-teaser__top-title">
  111.                 {{ product.teaserTopTitle }}
  112.             </div>
  113.         {% endif %}
  115.         <h3 class="ticket-teaser__title">
  116.             <a href="{{ getDetailLink(product) }}" class="stretch-link__link" data-event-tracking-key="{{ trackingKeySelectItem }}">{{ product.name }}</a>
  117.         </h3>
  119.         {% if price and isBookable %}
  120.             <div class="ticket-teaser__price">
  121.                 {% if product is not instanceof('\\Pimcore\\Model\\DataObject\\ShopMerchandiseProduct') %}
  122.                     {{ 'shop.teaser.price.from'|trans }}
  123.                 {% endif %}
  124.                 {{ formatPrice(price) }}
  125.             </div>
  126.         {% endif %}
  127.         {% if not isBookable or price is null  %}
  128.             <a href="{{ getDetailLink(product) }}" class="text-tertiary ticket-teaser__not-bookable-text w-100">
  129.                 {% if product is instanceof('\\Pimcore\\Model\\DataObject\\ShopEvent') %}
  130.                     {{ 'shop.teaser.to not-bookable-event'|trans }}
  131.                 {% elseif product is instanceof('\\Pimcore\\Model\\DataObject\\ShopTicketCatalog') %}
  132.                     {{ 'shop.teaser.to not-bookable-ticket'|trans }}
  133.                 {% else %}
  134.                     {{ 'shop.teaser.to not-bookable-merch'|trans }}
  135.                 {% endif %}
  136.             </a>
  137.         {% elseif singleButton|default(false) %}
  138.             <a href="{{ getDetailLink(product) }}" class="btn btn-tertiary">
  139.                 {{ product is instanceof('\\Pimcore\\Model\\DataObject\\ShopMerchandiseProduct') ? 'shop.teaser.to merchandise'|trans : 'shop.teaser.to product'|trans }}
  140.             </a>
  141.         {% else %}
  142.             <div class="ticket-teaser__btn-wrapper">
  143.                 <a href="{{ getDetailLink(product) }}" class="btn btn-secondary" data-event-tracking-key="{{ trackingKeyLearnMore }}">
  144.                     {{ product is instanceof('\\Pimcore\\Model\\DataObject\\ShopMerchandiseProduct') ? 'shop.teaser.to merchandise'|trans : 'shop.teaser.to product'|trans }}
  145.                 </a>
  146.                 {% if product is not instanceof('\\Pimcore\\Model\\DataObject\\ShopMerchandiseProduct') %}
  147.                     {{ include('includes/vue/vue-product-config.html.twig', {
  148.                         product: product,
  149.                         buttonClass: 'btn btn-tertiary btn-icon p-0 d-flex h-100 w-100',
  150.                         trackingKeyCart: trackingKeyCart | default,
  151.                         triggerTracking: true,
  152.                     }) }}
  153.                 {% else %}
  154.                     <a href="{{ getDetailLink(product) }}" class="btn btn-tertiary btn-icon p-0 d-flex h-100 w-100" aria-label="{{ 'shop.teaser.to product'|trans }}" data-event-tracking-key="{{ trackingKeyCart }}">
  155.                         <span class="visually-hidden">{{ 'shop.teaser.to product'|trans }}</span>
  156.                         <span class="icon icon-cart btn-icon__icon"></span>
  157.                     </a>
  158.                 {% endif %}
  159.             </div>
  160.         {% endif %}
  161.     </div>
  162. </section>