custom/plugins/CustomContentPdp/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 page_product_detail_tabs %}
  4.  
  6. {# start tabs #}
  7.             {# <div class="new-tabs">
  8.               <ul>
  9.                 <li><a href="#nmytab1">Produktbeschreibung</a></li>
  10.                 <li><a href="#nmytab2">Technische Daten</a></li>
  11.               </ul>
  12.             </div> #}
  14.             <div class="m1 menu">
  15.             <div id="menu-center">
  16.                 <ul>
  17.               
  18.     {% if page.product.extensions.netiProductCms and page.product.extensions.netiProductCms.getAboveProductDetailDescriptionContent() %}
  19. {% for content in page.product.extensions.netiProductCms.getAboveProductDetailDescriptionContent() %}
  20. {%if 'Technische' in content %}
  21. <li><a href="#technische">Technische Daten</a></li>
  22. {% endif %} 
  23. {% endfor %}
  25. {% endif %}
  26. {% if page.product.extensions.netiProductCms and page.product.extensions.netiProductCms.getAboveProductDetailDescriptionContent() %}
  27. {% for content in page.product.extensions.netiProductCms.getAboveProductDetailDescriptionContent() %}
  28. {%if 'Kombinierbare' in content %}
  29. <li><a href="#kombinierbare">Kombinierbare Aktionen</a></li>
  30. {% endif %} 
  32. {% endfor %}
  34. {% endif %}
  35. {% if page.product.extensions.netiProductCms and page.product.extensions.netiProductCms.getAboveProductDescriptionContent() %}
  36. {% for content in page.product.extensions.netiProductCms.getAboveProductDescriptionContent() %}
  38. {%if 'Kombinierbare' in content %}
  39. <li><a href="#kombinierbare">Kombinierbare Aktionen</a></li>
  40. {% endif %} 
  42. {% endfor %}
  44. {% endif %}
  47. {% if page.product.extensions.netiProductCms and page.product.extensions.netiProductCms.getBelowProductDescriptionContent() %}
  48. {% for content in page.product.extensions.netiProductCms.getBelowProductDescriptionContent() %}
  50. {%if 'Kombinierbare' in content %}
  51. <li><a href="#kombinierbare">Kombinierbare Aktionen</a></li>
  52. {% endif %} 
  53. {% endfor %}
  55. {% endif %}
  57.                    
  58.                     <li><a href="#produktbeschreibung">Produktbeschreibung</a></li>
  59.                     
  60.                     
  61. {% if page.product.extensions.netiProductCms and page.product.extensions.netiProductCms.getBelowProductDetailDescriptionContent() %}
  62. {% for content in page.product.extensions.netiProductCms.getBelowProductDetailDescriptionContent() %}
  63. {%if 'Technische' in content %}
  64. <li><a href="#technische">Technische Daten</a></li>
  65. {% endif %} 
  67. {% endfor %}
  69. {% endif %}
  70. {% if page.product.extensions.netiProductCms and page.product.extensions.netiProductCms.getAboveProductDescriptionContent() %}
  71. {% for content in page.product.extensions.netiProductCms.getAboveProductDescriptionContent() %}
  73. {%if 'Technische' in content %}
  74. <li><a href="#technische">Technische Daten</a></li>
  75. {% endif %} 
  77. {% endfor %}
  79. {% endif %}
  82. {% if page.product.extensions.netiProductCms and page.product.extensions.netiProductCms.getBelowProductDescriptionContent() %}
  83. {% for content in page.product.extensions.netiProductCms.getBelowProductDescriptionContent() %}
  85. {%if 'Technische' in content %}
  86. <li><a href="#technische">Technische Daten</a></li>
  87. {% endif %} 
  88. {% endfor %}
  90. {% endif %}
  92.                 </ul>
  93.             </div>
  94.         </div>
  95.             
  96.             {# end tabs #}
  98.             {# start tab js #}
  99.               <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  100.               <script>
  101.              
  102.                 let onScroll = function(event){
  103.    
  104.                 $('#menu-center a').each(function () {
  105.                     var scrollPos = $(document).scrollTop();
  106.                     var currLink = $(this);
  107.                     var refElement = $(currLink.attr("href"));
  108.                     scrollPos += 150;
  109.                     //console.log(refElement.position().top, refElement.height(), scrollPos);
  110.                     if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
  111.                         $('#menu-center ul a').parent().removeClass("active");
  112.                         console.log('position true', refElement);
  113.                         currLink.parent().addClass("active");
  114.                     }
  115.                     else{
  116.                         currLink.parent().removeClass("active");
  117.                     }
  118.                 });
  119.             }
  121.             $(document).ready(function () {
  122.                 $(document).on("scroll.custom", onScroll);
  123.                 
  124.                 //smoothscroll
  125.                 $('a[href^="#"]').on('click', function (e) {
  126.                     e.preventDefault();
  127.                     $(document).off("scroll.custom");
  128.                     
  129.                     $('a').each(function () {
  130.                         $(this).parent().removeClass('active');
  131.                     })
  132.                     $(this).parent().addClass('active');
  133.                 
  134.                     var target = this.hash;
  136.                 e.preventDefault();
  137.                         var pos = $(this).attr('href');
  138.                         doScrolling(pos, 1000);
  140.                     
  141.                 });
  142.             });
  144.         function doScrolling(element, duration) {
  145.             var startingY = window.pageYOffset
  146.             var elementY = getElementY(element) + 70
  147.             var targetY = document.body.scrollHeight - elementY < window.innerHeight ? document.body.scrollHeight - window.innerHeight : elementY
  148.             var diff = (targetY - (130 + 85)) - startingY
  149.             var easing = function(t) {
  150.                 return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
  151.             }
  152.             var start
  154.             if (!diff)
  155.                 return
  157.             window.requestAnimationFrame(function step(timestamp) {
  158.                 if (!start)
  159.                     start = timestamp
  160.                 var time = timestamp - start
  161.                 var percent = Math.min(time / duration, 1)
  162.                 percent = easing(percent)
  163.                 window.scrollTo(0, startingY + diff * percent)
  164.                 if (time < duration) {
  165.                     window.requestAnimationFrame(step);
  166.                 } else {
  167.                     $(element).parent().addClass("active").siblings().removeClass("active");
  168.                      $(document).on("scroll.custom", onScroll);
  169.                 }
  170.             })
  171.         }
  172.          function getElementY(query) {
  173.             return window.pageYOffset + document.querySelector(query).getBoundingClientRect().top
  174.         }
  176.         </script>
  177.     {# end tab js #}
  178.               
  179.               
  180.     {#<div class="product-detail-tabs tb-pd">
  181.         {% sw_include '@Storefront/storefront/page/product-detail/tabs.html.twig' %}
  182.     </div> #}
  183. {% endblock %}