custom/plugins/BEYCODENT/src/Resources/views/storefront/page/product-detail/index.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/page/product-detail/index.html.twig' %}
  3. {% block base_head %}
  4.     {% sw_include '@Storefront/storefront/page/product-detail/meta.html.twig' %}
  5. {% endblock %}
  7. {% block base_content %}
  8.     {% block page_product_detail %}
  9.         <div class="product-detail pb-section-half" itemscope itemtype="https://schema.org/Product">
  10.             {% block page_product_detail_inner %}
  11.             {% block page_product_detail_content %}
  12.             <div class="product-detail-content">
  13.                 {% block page_product_detail_headline %}
  14.                 <div class="row align-items-center product-detail-headline">
  15.                     {% sw_include '@Storefront/storefront/page/product-detail/headline.html.twig' %}
  16.                 </div>
  17.                 {% endblock %}
  19.                 {% set mediaItems = page.product.media.media %}
  21.                 {% block page_product_detail_main %}
  22.                 <div class="row product-detail-main">
  23.                     {% block page_product_detail_media %}
  24.                     {{ parent() }}
  25.                     {% endblock %}
  27.                     {% block page_product_detail_buy %}
  28.                     <div class="col-lg-5 product-detail-buy">
  29.                         {% sw_include '@Storefront/storefront/page/product-detail/buy-widget.html.twig' %}
  30.                     </div>
  31.                     {% endblock %}
  32.                 </div>
  33.                 {% endblock %}
  34.             </div>
  35.             {% endblock %}
  37.             {% block page_product_detail_tabs %}
  38.             <div class="product-detail-tabs">
  39.                 {% sw_include '@Storefront/storefront/page/product-detail/tabs.html.twig' %}
  40.             </div>
  41.             {% endblock %}
  43.             {% block page_product_detail_cross_selling %}
  44.                 {{ parent() }}
  45.             {% endblock %}
  46.         {% endblock %}
  47.         </div>
  48. {% endblock %}
  50. <div class="modal-content-cta modal align-items-center justify-content-center" id="modal-cta">
  51.     <div class="modal-body">
  52.         <div class="container-fluid p-0">
  53.             <div class="row justify-content-center align-items-center">
  54.                 <div class="col-lg-7 pl-0">
  55.                     {% if page.product.customFields.custom_modal_cta_image %}
  56.                  
  57.                         {% set sportsMediaId = page.product.customFields.custom_modal_cta_image %}
  59.                         {% set mediaCollection = searchMedia([sportsMediaId], context.context) %}
  61.                         {% set modalMedia = mediaCollection.get(sportsMediaId) %}
  63.                         <img src="{{ modalMedia.url }}" alt="Modal CTA" class="img-fluid">
  65.                     {% elseif page.header.navigation.active.customFields.custom_modal_cta_image %}
  66.                         
  67.                         {% set sportsMediaId = page.header.navigation.active.customFields.custom_modal_cta_image %}
  69.                         {% set mediaCollection = searchMedia([sportsMediaId], context.context) %}
  71.                         {% set modalMedia = mediaCollection.get(sportsMediaId) %}
  73.                        <img src="{{ modalMedia.url }}" alt="Modal CTA" class="img-fluid">
  74.                     {% else %}
  75.                         <img src="/img/modal_cta.jpeg" alt="Modal CTA" class="img-fluid">
  76.                     {% endif %}
  77.                 </div>
  78.                 <div class="col-lg-5">
  79.                 {% if page.product.customFields.custom_modal_cta_text %}
  80.                     <div>{{ page.product.customFields.custom_modal_cta_text|trans|raw }}</div>
  81.                 {% elseif page.header.navigation.active.customFields.custom_modal_cta_text %}
  82.                         <div>{{ page.header.navigation.active.customFields.custom_modal_cta_text|trans|raw }}</div>
  83.                 {% else %}
  84.                     <div>
  85.                         <h3>{{ "Sie benötigen Hilfe? Gerne beraten wir Sie auch telefonisch unter"|trans|raw }}</h3>
  86.                     </div>
  87.                     <h1>
  88.                         <a href="tel:+492744922922">02744 / 922922</a>
  89.                     </h1>
  91.                 {% endif %}
  92.                 </div>
  93.             </div>
  94.         </div>
  95.         <div class="close-modal-cta">
  96.             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
  97.         </div>
  98.     </div>
  99. </div>
  103. {% if page.product.customFields.custom_modal_cta_active or page.header.navigation.active.customFields.custom_modal_cta_active %}
  104. <script>
  105.     const modal = document.getElementById('modal-cta')
  106.     const timeToAppear = 30000
  107.     setTimeout(() => {
  108.         modal.classList.add('fade')
  109.         modal.classList.add('d-flex')
  110.         modal.classList.add('show')
  111.     }, timeToAppear)
  112.     // if i click anywhere on the modal, it will close, except on the modal body
  113.     modal.addEventListener('click', (e) => {
  114.         if (e.target.id === 'modal-cta') {
  115.             modal.classList.remove('fade')
  116.             modal.classList.remove('d-flex')
  117.             modal.classList.remove('show')
  118.         }
  119.     })
  120.     // also if we click on the close button
  121.     document.querySelector('.close-modal-cta').addEventListener('click', () => {
  122.         modal.classList.remove('fade')
  123.         modal.classList.remove('d-flex')
  124.         modal.classList.remove('show')
  125.     })
  126. </script>
  127. {% endif %}
  128. {% endblock %}