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

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/base.html.twig' %}
  3. {% block base_head %}
  4.     {% sw_include '@Storefront/storefront/page/product-detail/meta.html.twig' %}
  5. {% endblock %} 
  7. {% block base_header %}
  8. <div class="header-main-wrapper">
  9.     <header class="header-main">
  10.         <div class="top-bar-container">
  11.             <div class="container">
  12.                 {% sw_include '@Storefront/storefront/layout/header/top-bar.html.twig' %}
  13.             </div>
  14.         </div>
  15.         {% block base_header_inner %}
  16.             <div class="container">
  17.                 {% sw_include '@Storefront/storefront/layout/header/header.html.twig' %}
  18.             </div>
  19.         {% endblock %}
  20.     </header>
  21. {% endblock %}
  22.   
  23. {% block base_navigation %}
  24.         <div class="nav-main">
  25.             {% block base_navigation_inner %}
  26.                 {% sw_include '@Storefront/storefront/layout/navigation/navigation.html.twig' %}
  27.             {% endblock %}
  28.         </div>
  29.     </div>
  30. {% endblock %}
  32. {#
  33. {% block base_main_inner %}
  34.     {% block page_product_detail_breadcrumb %}
  35.         <div class="breadcrumb-container container-fluid">
  36.             <div class="breadcrumb product-breadcrumb container">
  38.                 {% sw_include '@Storefront/storefront/component/product/breadcrumb.html.twig' with {
  39.                     navigationTree: page.header.navigation.tree,
  40.                     categoryTree: page.product.categoryTree|last,
  41.                     product: page.product
  42.                 } only %}
  43.             </div>
  44.         </div>
  45.     {% endblock %}
  46.     {{ parent() }}
  47. {% endblock %}
  48. #}
  50. {% block base_content %}
  51.     {% block page_product_detail %}
  53.         <div id="sticky-cart">
  54.             <div class="container">
  55.                 <div class="row">
  56.                     <div class="col-lg-2 smll-none">
  57.                         <div data-wi-id="wi-button-container"></div>
  58.                         <div class="product-title">
  59.                             {#{ page.product.translated.name }#}
  60.                         </div>
  61.                         {#
  62.                         <div class="product-price">
  63.                             {% sw_include '@Storefront/storefront/page/product-detail/buy-widget-price.html.twig' %}
  64.                         </div>#}
  65.                     </div>
  66.                     {% set category = page.header.navigation.active %}
  67.                     <div class="col-lg-2 smll-none">
  68.                     {% if page.extensions['amMactradeap1'].get('keyApi') %}
  69.                         <div class="stiky-cart-new-wrap
  70.                                                 {% if category %}
  71. {% set breadcrumbCategories = sw_breadcrumb_full(category, context.context) %}
  72. {% for breadcrumbCategory in breadcrumbCategories %}
  73. {% set key = breadcrumbCategory.id %}
  74. {% set name = breadcrumbCategory.translated.name %}
  75. {% if loop.index == 1 %}
  76. {% if name == 'Zubehör' %}
  77. d-none
  78. {% endif %}
  79. {% endif %}
  80. {% endfor %}
  81. {% endif %}
  82.                         ">
  83.                           <h3>Gutschrift für Ihr Altgerät</h3>
  84.                           <div class="price-mc"><p>zw.</p><h2 class="price_range"> 30 € - 735* </h2> <p>
  86. {{ page.extensions['amMactradeap1'].get('keyApiText') }}
  87.                           </p></div>
  88.                           <a class="small-link" target="_blank" href="https://mactrade.kauft-an.de/mactrade_c/hilfe/">Mehr Infos</a>
  89.                         </div>
  90.                         {% endif %}
  91.                     </div>
  92.                     <div class="col-lg-12 col-xl-8 d-flex justify-content-lg-between  justify-content-xl-end align-items-center">
  93.                         <div class="edu-information">
  95.                             <div class="edu-price-container">
  96.                              {% if context.salesChannel.id !='45be9f42765d42e8ae1137d1812040f4' && context.salesChannel.id !='4faca3b6a7f149cea7ade06ee340ce19' %}
  97.                             
  98.                                 {% if page.product.customFields.product_custom_fields_edu_discount %}
  99.                                     {% set eduPrice = page.product.calculatedPrice.unitPrice / 100 * (100 - page.product.customFields.product_custom_fields_edu_discount) %}
  100.                                     EDU: {{ eduPrice|number_format(2, ',', '.') }} € *
  101.                                 {% endif %}
  102.                                 {% endif %}
  103.                                 
  104.                                 {% if context.salesChannel.id =='45be9f42765d42e8ae1137d1812040f4' || context.salesChannel.id =='4faca3b6a7f149cea7ade06ee340ce19' %}
  105.                                 {% set price = page.product.calculatedPrices.first %}
  106.                                 
  107.                                                 {% if page.product.customFields.product_custom_fields_edu_discount %}
  108.                     {% set eduPrice = price.unitPrice / 100 * (100 - page.product.customFields.product_custom_fields_edu_discount) %}
  109.                     EDU: {{ eduPrice|number_format(2, ',', '.') }} € *
  110.                 {% endif %}
  111.                 {% endif %}
  112.                             </div>
  113.                             <div class="delivery-container">
  114.                                 {% sw_include '@Storefront/storefront/component/delivery-information.html.twig' %}
  115.                             </div>
  116.                         </div>
  117.                         <div class="price-information">
  118.                             <div class="price-container">{% sw_include '@Storefront/storefront/page/product-detail/buy-widget-price.html.twig' %}</div>
  119.                             <div class="tax-container">
  120.                                 {% if context.taxState == "gross" %}
  121.                                     {% set taxText = "general.grossTaxInformation"|trans|sw_sanitize %}
  122.                                 {% else %}
  123.                                     {% set taxText = "general.netTaxInformation"|trans|sw_sanitize %}
  124.                                 {% endif %}
  126.                                 <p class="product-detail-tax">
  127.                                     {% block page_product_detail_tax_link %}
  128.                                         <a class="product-detail-tax-link"
  129.                                            href="/kundenservice/versandkosten/"
  130.                                            title="{{ taxText }}" target="_blank">
  131.                                             {{ taxText }}
  132.                                         </a>
  133.                                     {% endblock %}
  134.                                 </p>
  135.                             </div>
  136.                         </div>
  137.                         <div id="sticky-cart-form">
  138.                             {% sw_include '@Storefront/storefront/page/product-detail/buy-widget-form.html.twig' %}
  139.                         </div>
  140.                     </div>
  141.                 </div>
  142.             </div>
  143.         </div>
  145.         
  146.         {# {% if page.product.seoCategory.parentId == '08c95ea3cfc346cdadd32ee1d5f8a408' %}
  147.             <div class="detail-banner" data-category="{{ page.product.seoCategory.translated.name }}" data-parent-category="{{ page.product.seoCategory.parentId }}">
  148.                 <div class="hidden-phone">
  149.                     <a href="/blackweek-mac" target="_blank">
  150.                         <img src="https://www.mactrade.de/media/23/9b/ba/1637868262/BW_bannerproduktseite.webp" alt="">
  151.                     </a>
  152.                 </div>
  153.                 <div class="hidden-tablet hidden-desktop">
  154.                     <a href="/blackweek-mac" target="_blank">
  155.                         <img src="https://www.mactrade.de/media/92/42/82/1637868262/BW_bannerproduktseite_mobil.webp" alt="">
  156.                     </a>
  157.                 </div>
  158.             </div>
  159.         {% endif %} #}
  160.        
  162.         <div class="product-detail"
  163.              itemscope
  164.              itemtype="https://schema.org/Product">
  166.             {% block page_product_detail_inner %}
  167.                 {% block page_product_detail_content %}
  168.                     <div class="product-detail-content">
  169.                         {% block page_product_detail_headline %}
  170.                             <div class="row align-items-start product-detail-headline">
  171.                                 {% sw_include '@Storefront/storefront/page/product-detail/headline.html.twig' %}
  173.                                 {% if page.product.customFields.product_custom_fields_pdp_promobanner_macbook_air == true %}
  174.                                     <div class="product-detail-promotion-banderole">
  175.                                         {{ "detail.promotion-banner.macbook-air"|trans|raw }}
  176.                                     </div>
  177.                                 {% elseif page.product.customFields.product_custom_fields_pdp_promobanner_macbook_pro13 == true %}
  178.                                     <div class="product-detail-promotion-banderole">
  179.                                         {{ "detail.promotion-banner.macbook-pro13"|trans|raw }}
  180.                                     </div>
  181.                                 {% elseif page.product.customFields.product_custom_fields_pdp_promobanner_macbook_pro14 == true %}
  182.                                     <div class="product-detail-promotion-banderole">
  183.                                         {{ "detail.promotion-banner.macbook-pro14"|trans|raw }}
  184.                                     </div>
  185.                                 {% elseif page.product.customFields.product_custom_fields_pdp_promobanner_macbook_pro_16 == true %}
  186.                                     <div class="product-detail-promotion-banderole">
  187.                                         {{ "detail.promotion-banner.macbook-pro16"|trans|raw }}
  188.                                     </div>
  189.                                 {% elseif page.product.customFields.product_custom_fields_pdp_promobanner_imac24 == true %}
  190.                                     <div class="product-detail-promotion-banderole">
  191.                                         {{ "detail.promotion-banner.imac24"|trans|raw }}
  192.                                     </div>
  193.                                 {% elseif page.product.customFields.product_custom_fields_pdp_promobanner_imac27 == true %}
  194.                                     <div class="product-detail-promotion-banderole">
  195.                                         {{ "detail.promotion-banner.imac27"|trans|raw }}
  196.                                     </div>
  197.                                 {% elseif page.product.customFields.product_custom_fields_pdp_promobanner_ipad == true %}
  198.                                     <div class="product-detail-promotion-banderole">
  199.                                         {{ "detail.promotion-banner.ipad"|trans|raw }}
  200.                                     </div>
  201.                                 {% elseif page.product.customFields.product_custom_fields_pdp_promobanner_ipad_pro == true %}
  202.                                     <div class="product-detail-promotion-banderole">
  203.                                         {{ "detail.promotion-banner.ipad-pro"|trans|raw }}
  204.                                     </div>
  205.                                 {% elseif page.product.customFields.product_custom_fields_pdp_promobanner_mac_mini == true %}
  206.                                     <div class="product-detail-promotion-banderole">
  207.                                         {{ "detail.promotion-banner.mac-mini"|trans|raw }}
  208.                                     </div>
  209.                                 {% elseif page.product.customFields.product_custom_fields_pdp_promobanner_mac_studio == true %}
  210.                                     <div class="product-detail-promotion-banderole">
  211.                                         {{ "detail.promotion-banner.mac-studio"|trans|raw }}
  212.                                     </div>
  213.                                 {% endif %}
  214.                             </div>
  215.                         {% endblock %}
  217.                         {% set mediaItems = page.product.media.media %}
  219.                         {% block page_product_detail_main %}
  220.                             <div class="row product-detail-main">
  221.                                 {% block page_product_detail_media %}
  222.                                     <div class="col-lg-6 product-detail-media">
  223.                                         {#{% if page.product.customFields.product_custom_fields_subscription == true and page.product.restockTime <= 10 %}#}
  224.                                         {% if page.product.customFields.product_custom_fields_subscription == true and (page.product.customFields.product_custom_fields_subscription_productType != 'ACCESSORY') and page.product.customFields.product_custom_fields_subscription_monthlyPriceGross > 0 %}
  225.                                             <div class="abo-badge">
  226.                                                 <img src="{{ asset('assets/images/badge_abo.svg', "@AmMacTrade") }}" alt="Abo" height="50" width="50">
  227.                                             </div>
  228.                                         {% endif %}
  229.                                         {% if page.product.customFields.product_custom_fields_batch_protect == true %}
  230.                                             <div class="protect-badge">
  231.                                                 <a class="link-new-window" href="/garantiepaket">
  232.                                                     <img src="https://www.mactrade.de/media/a1/g0/f0/1644231456/stoerer-garantie.png" alt="">
  233.                                                 </a>
  234.                                             </div>
  235.                                         {% endif %}
  236.                                         {% if page.product.media %}
  237.                                             {% sw_include '@Storefront/storefront/element/cms-element-image-gallery.html.twig' with {
  238.                                                 'mediaItems': mediaItems,
  239.                                                 'zoom': true,
  240.                                                 'zoomModal': true,
  241.                                                 'displayMode': 'contain',
  242.                                                 'gutter': 5,
  243.                                                 'minHeight': '430px',
  244.                                                 'navigationArrows': 'inside',
  245.                                                 'navigationDots': 'inside',
  246.                                                 'galleryPosition': 'left',
  247.                                                 'isProduct': true,
  248.                                                 'fallbackImageTitle': page.product.translated.name,
  249.                                                 'startIndexThumbnails': page.product.cover.position,
  250.                                                 'startIndexSlider': page.product.cover.position
  251.                                             } %}
  252.                                         {% endif %}
  253.                                     </div>
  254.                                 {% endblock %}
  256.                                 {% block page_product_detail_buy %}
  257.                                     <div class="col-lg-5 offset-lg-1 product-detail-buy">
  258.                                         {% sw_include '@Storefront/storefront/page/product-detail/buy-widget.html.twig' %}
  259.                                     </div>
  260.                                 {% endblock %}
  261.                             </div>
  262.                         {% endblock %}
  263.                     </div>
  264.                 {% endblock %}
  265.     
  267.                 {% block page_product_detail_tabs %}
  269. {# start tabs #}
  270.             
  272.             <div class="m1 menu">
  273.             <div id="menu-center">
  274.                 <ul>
  275.                     <li class="active"><a href="#kombinierbare">Kombinierbare Aktionen</a></li>
  276.                     <li><a href="#produktbeschreibung">Produktbeschreibung</a></li>
  277.                     <li><a href="#technische">Technische Daten</a></li>
  278.                 </ul>
  279.             </div>
  280.         </div>
  281.             
  282.             {# end tabs #}
  284.             {# start tab js #}
  285.               <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  286.               <script>
  287.              
  290. let onScroll = function(event){
  291.     var scrollPos = $(document).scrollTop();
  292.     $('#menu-center a').each(function () {
  293.         var currLink = $(this);
  294.         var refElement = $(currLink.attr("href"));
  295.         scrollPos += 150;
  296.         if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
  297.             $('#menu-center ul a').parent().removeClass("active");
  298.             currLink.parent().addClass("active");
  299.         }
  300.         else{
  301.             currLink.parent().removeClass("active");
  302.         }
  303.     });
  304. }
  306.  $(document).ready(function () {
  307.     $(document).on("scroll.custom", onScroll);
  308.     
  309.     //smoothscroll
  310.     $('a[href^="#"]').on('click', function (e) {
  311.         e.preventDefault();
  312.         $(document).off("scroll.custom");
  313.         
  314.         $('a').each(function () {
  315.             $(this).parent().removeClass('active');
  316.         })
  317.         $(this).parent().addClass('active');
  318.       
  319.         var target = this.hash;
  321.        e.preventDefault();
  322.             var pos = $(this).attr('href');
  323.             doScrolling(pos, 1000);
  325.         
  326.     });
  327. });
  329. function doScrolling(element, duration) {
  330.             var startingY = window.pageYOffset
  331.             var elementY = getElementY(element) + 70
  332.             var targetY = document.body.scrollHeight - elementY < window.innerHeight ? document.body.scrollHeight - window.innerHeight : elementY
  333.             var diff = (targetY - (130 + 85)) - startingY
  334.             var easing = function(t) {
  335.                 return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
  336.             }
  337.             var start
  339.             if (!diff)
  340.                 return
  342.             window.requestAnimationFrame(function step(timestamp) {
  343.                 if (!start)
  344.                     start = timestamp
  345.                 var time = timestamp - start
  346.                 var percent = Math.min(time / duration, 1)
  347.                 percent = easing(percent)
  348.                 window.scrollTo(0, startingY + diff * percent)
  349.                 if (time < duration) {
  350.                     window.requestAnimationFrame(step);
  351.                 } else {
  352.                     $(element).parent().addClass("active").siblings().removeClass("active");
  353.                      $(document).on("scroll.custom", onScroll);
  354.                 }
  355.             })
  356.         }
  357.          function getElementY(query) {
  358.             return window.pageYOffset + document.querySelector(query).getBoundingClientRect().top
  359.         }
  363.               </script>
  364.               {# end tab js #}
  365.     <div class="product-detail-tabs tb-pd d-none">
  366.         {% sw_include '@Storefront/storefront/page/product-detail/tabs.html.twig' %}
  367.     </div>
  369.                     <div class="product-detail-tabs">
  370.                         {% sw_include '@Storefront/storefront/page/product-detail/tabs.html.twig' %}
  371.                     </div>
  373.                     {#<div class="product-detail-tabs properties">
  374.                         {% sw_include '@Storefront/storefront/page/product-detail/tabs-properties.html.twig' %}
  375.                     </div>#}
  376.                 {% endblock %}
  378.                 {% block page_product_detail_cross_selling %}
  379.                       {% if page.product.extensions.netiProductCms and page.product.extensions.netiProductCms.getReplaceProductDetailDescriptionContent() %}
  380.             <div class="product-detail-description-text 6666666666" itemprop="description">
  381.                 {% for content in page.product.extensions.netiProductCms.getReplaceProductDetailDescriptionContent() %}
  382.                     <div id="{%if 'Kombinierbare' in content %}kombinierbare{% endif %}{%if 'Technische' in content %}technische{% endif %}" class="is--neti-next-productdetailcms is--replace-product_detail_description {{ config('NetiNextProductDetailCms.config.replaceProductDetailDescriptionIndention') }}" {% if config('NetiNextProductDetailCms.config.replaceProductDetailDescriptionInlineStyle') %} style="{{ config('NetiNextProductDetailCms.config.replaceProductDetailDescriptionInlineStyle') }}" {% endif %}>
  383.                         {{ content|raw }}
  384.                     </div>
  385.                 {% endfor %}
  386.             </div>
  387.     {% endif %}
  388.     
  389.      {% if page.product.extensions.netiProductCms and page.product.extensions.netiProductCms.getAboveProductDetailDescriptionContent() %}
  390.         
  391.             {% for content in page.product.extensions.netiProductCms.getAboveProductDetailDescriptionContent() %}
  392.                 <div id="{%if 'Kombinierbare' in content %}kombinierbare{% endif %}{%if 'Technische' in content %}technische{% endif %}" class="is--neti-next-productdetailcms is--above-product_detail_description {{ config('NetiNextProductDetailCms.config.aboveProductDetailDescriptionIndention') }}" {% if config('NetiNextProductDetailCms.config.aboveProductDetailDescriptionInlineStyle') %} style="{{ config('NetiNextProductDetailCms.config.aboveProductDetailDescriptionInlineStyle') }}" {% endif %}>
  393.                     {{ content|raw }}
  394.                 </div>
  395.             {% endfor %}
  396.         
  397.     {% endif %}
  398.     
  399.     {% if page.product.extensions.netiProductCms and page.product.extensions.netiProductCms.getAboveProductDescriptionContent() %}
  400.             {% for content in page.product.extensions.netiProductCms.getAboveProductDescriptionContent() %}
  401.                 <div id="{%if 'Kombinierbare' in content %}kombinierbare{% endif %}{%if 'Technische' in content %}technische{% endif %}" class="is--neti-next-productdetailcms is--above-product_description {{ config('NetiNextProductDetailCms.config.aboveDescriptionIndention') }}" {% if config('NetiNextProductDetailCms.config.aboveDescriptionInlineStyle') %} style="{{ config('NetiNextProductDetailCms.config.aboveDescriptionInlineStyle') }}" {% endif %}>
  402.                     {{ content|raw }}
  403.                 </div>
  404.             {% endfor %}
  405.         {% endif %}
  406.         
  407.         
  408.         
  409.     {% if page.product.customFields.custom_pdp_content_file_path is empty  %}
  410. <div id="produktbeschreibung" >
  411. <div class="more-text-btn show-more-height">
  412. <h3 class="d-flex justify-content-center">{{ "detail.descriptionTitle"|trans|sw_sanitize }} </h3>
  413.     {{ page.product.translated.description|raw }} 
  416. </div>
  417. </div>
  418.     {% endif %}
  419.     {% if page.product.customFields.custom_pdp_content_file_path is not empty  %}
  420. {#<div class="h3 product-detail-description-title">
  421.                     {{ "detail.descriptionTitle"|trans|sw_sanitize }} "{{ page.product.translated.name }}"
  422.                 </div> #}
  423.                 
  424.                 {% endif %}
  425.     {% if page.product.customFields.custom_pdp_content_file_path is not empty  %}
  426.     
  427.     <div id="produktbeschreibung" class="is--neti-next-productdetailcms is--below-product_detail_description noindent">
  428.     
  429.      <div class="more-text-btn show-more-height">
  430.     <h2 class="d-flex justify-content-center"> {{ "detail.descriptionTitle"|trans|sw_sanitize }} </h2>
  431.     
  432.     <iframe frameborder="0" id="child-iframe" src="{{ page.product.customFields.custom_pdp_content_file_path }}" name="iframe_a" width="100%" style="height: 8260px; width: 1360px;"></iframe> 
  433.      {# {{ productpdp|raw }}  #}
  434.     </div>
  435.     </div>
  436.     
  437.     
  438.     
  439.     {% endif %}
  440.     <div class="text-center more-btn"> <a class="button mc-show-more" style="--focus-color: rgba(0, 125, 250, 0.6);">Mehr anzeigen</a> </div>
  441.    <!--BEGIN > SCRIPTS:BASE -->
  442.     <script type="text/javascript">"use strict";const reorderDOM={selectorEls:null,headerEl:null,capturedEls:null,capturedElsQuery:null,clonedEls:[],cOrder:null,cMax:null,useStatic:null,selectorElsQuery:null,staticEl:null,staticElQuery:null,addListeners(){window.addEventListener("channel:reorder-dom",e=>{if(this.useStatic=e.detail.useStatic,this.cOrder=e.detail.order,this.cMax=e.detail.max,this.updateElements(),void 0!==e.detail.selectorIndex){document.querySelectorAll(this.selectorElsQuery).item(e.detail.selectorIndex).focus()}})},updateElements(){!this.useStatic&&this.updateSelectors(),!this.useStatic&&this.updateHeadersAX(),!this.useStatic&&this.updateRows(),this.useStatic&&this.updateStatic()},arrayFromNodeList(e){const t=[];return e.forEach(e=>{t.push(e)}),t},updateStatic(){this.clonedEls.forEach((e,t)=>{const i=this.capturedEls[t],r=e.cloneNode(!0),n=r.querySelector("[role=rowheader]"),s=r.querySelector("[id=hidden-columnheader]");let o=[];this.cOrder.forEach((e,t)=>{const i=`[index="${e}"]`,n=r.querySelector(i).parentElement;o.push(n)}),o.reverse().forEach((e,t)=>{e.setAttribute("added",!0),r.prepend(e)});for(let e=0;e<r.children.length;e++){const t=r.children[e];"rowheader"!==t.getAttribute("role")&&"hidden-columnheader"!==t.getAttribute("id")&&(t.style.order="unset",this.toggleVisibility(t,e<this.cMax))}s&&r.prepend(s),r.prepend(n),r.setAttribute("added",!0),i.innerHTML=r.innerHTML})},updateHeadersAX(){let e='<div role="columnheader">&nbsp;</div>';document.querySelectorAll(this.selectorElsQuery).forEach((t,i)=>{const r=t.querySelector("[selected=true]").innerText.trim();"flex"===t.parentElement.parentElement.style.display&&(e+=`<div role="columnheader">${r}</div>`)}),this.headerEl.innerHTML=e},updateSelectors(){document.querySelectorAll(this.selectorElsQuery).forEach((e,t)=>{e.replaceWith(this.selectorEls[t])}),this.cOrder.forEach((e,t)=>{const i=this.selectorEls[t];let r=0;for(let t=0;t<i.options.length;t++){const n=i.options[t],s=Number(n.value)===e;s&&(r=t),n.removeAttribute("selected"),n.setAttribute("selected",s),n.removeAttribute("aria-selected"),n.setAttribute("aria-selected",s)}i.selectedIndex=r});for(var e=0;e<this.selectorEls.length;e++){const t=this.selectorEls[e],i=e<this.cMax;this.toggleVisibility(t.parentElement.parentElement,i)}},updateRows(){this.clonedEls.forEach((e,t)=>{const i=this.capturedEls[t],r=e.cloneNode(!0),n=r.querySelector("[role=rowheader]"),s=[];this.cOrder.forEach(e=>{const t=`[index="${e}"]`,i=r.querySelector(t).parentElement;s.push(i)}),s.reverse().forEach(e=>{r.prepend(e)});for(let e=0;e<r.children.length;e++){const t=r.children[e];"rowheader"!==t.getAttribute("role")&&(t.style.order="unset",this.toggleVisibility(t,e<this.cMax))}r.prepend(n),i.innerHTML=r.innerHTML})},toggleVisibility(e,t){e.style.visibility=t?"visible":"hidden",e.style.display=t?"flex":"none",e.style.order="unset"},init(e,t,i,r,n){this.useStatic=n,this.capturedEls=document.querySelectorAll(e),this.capturedElsQuery=e,this.headerEl=document.querySelector(i),this.selectorEls=document.querySelectorAll(t),this.selectorElsQuery=t,this.staticElQuery=r,this.staticEl=this.useStatic&&document.querySelector(this.staticElQuery).cloneNode(!0),this.useStatic=n,this.clonedEls=this.arrayFromNodeList(this.capturedEls),this.addListeners()}},viewportManager={nState:null,cState:null,init:function(){this.addListeners()},addListeners:function(){const e={small:window.matchMedia("(max-width: 734px)"),medium:window.matchMedia("(min-width: 735px) and (max-width: 1068px)"),large:window.matchMedia("(min-width: 1069px)")};Object.keys(e).forEach(t=>{const i=e[t];"function"!=typeof i.addEventListener?i.addListener(()=>{i.matches&&this.viewportObserve(t)}):i.addEventListener("change",()=>{i.matches&&this.viewportObserve(t)}),i.matches&&this.viewportObserve(t)})},viewportObserve:function(e){this.nState=e,this.cState!==this.nState&&(this.cState=this.nState,this.dispatch(this.cState))},dispatch:function(e){const t=new CustomEvent("channel:viewport-change",{detail:e});window.dispatchEvent(t)}},orientationManager={orienation:null,init:function(){window.matchMedia("(orientation: portrait)").addEventListener("change",e=>{e.matches?this.orienation="portrait":this.orienation="landscape",this.dispatch(this.orienation)})},dispatch:function(e){const t=new CustomEvent("channel:orientation-change",{detail:e});window.dispatchEvent(t)}},selectorManager={init:function(e,t){const i=document.querySelectorAll(e);i.forEach((e,t)=>{e.addEventListener("change",()=>{const r=e.selectedIndex,n=e.value,s=Number(e.options[r].getAttribute("value"));this.dispatch({elIndex:t,selectedIndex:s,value:n,selectorEls:i}),e.focus()})})},dispatch:function(e){const t=new CustomEvent("channel:pre-user-select",{detail:e});window.dispatchEvent(t)}},buyButtonManager={buyButtonQuery:null,init:function(e){this.buyButtonQuery=e,this.addListeners(),this.attachButtonListeners()},addListeners:function(){window.addEventListener("channel:reorder-dom",()=>{console.log,this.attachButtonListeners()})},attachButtonListeners:function(){document.querySelectorAll(this.buyButtonQuery).forEach(e=>{e.addEventListener("click",t=>{const i=0===t.screenX&&0===t.screenY?"Keyboard Interaction":"Mouse Click";this.dispatch({productName:e.id,eventSource:i})})})},dispatch:function(e){const t=new CustomEvent("channel:buy-button-click",{detail:e});window.dispatchEvent(t)}},dataManager={order:null,viewportKey:null,viewportOrder:null,viewportMax:null,init:function(e,t){this.order=e,this.useStatic=t,this.addListeners()},viewportChange(e){this.viewportKey=e,this.viewportOrder=this.order[this.viewportKey],this.viewportMax=this.order.max[this.viewportKey],this.dispatch({order:this.viewportOrder,max:this.viewportMax,useStatic:this.useStatic})},blurSelects(e){document.querySelectorAll(e).forEach(e=>{e.blur()})},flattenOrders(){this.viewportOrder=this.order[this.viewportKey],this.viewportMax=this.order.max[this.viewportKey],["small","medium","large"].forEach(e=>{this.order[e]=this.viewportOrder})},getLineupInfo(e,t){const i={};return e.forEach((e,r)=>{i[r]={columnIndex:r,deviceName:e.options[e.selectedIndex].text,hasChanged:r===t}}),i},userSelect(e){const{elIndex:t,selectedIndex:i}=e,r=this.viewportOrder[t],n=this.viewportOrder.find(e=>e===i),s=this.viewportOrder.indexOf(n);void 0!==n?(this.viewportOrder[s]=r,this.viewportOrder[t]=n):this.viewportOrder[t]=i,this.flattenOrders(),this.dispatch({order:this.viewportOrder,max:this.viewportMax,useStatic:this.useStatic,selectorIndex:t}),e.deviceLineup=this.getLineupInfo(e.selectorEls,t),delete e.selectorEls;const o=Object.keys(e.deviceLineup).slice(0,this.viewportMax).reduce((t,i)=>(t[i]=e.deviceLineup[i],t),{});this.dispatchPostUserSelect({deviceLineup:o})},addListeners:function(){window.addEventListener("channel:pre-user-select",e=>{this.userSelect(e.detail)}),window.addEventListener("channel:user-refresh",e=>{this.dispatch({order:this.viewportOrder,max:this.viewportMax,useStatic:this.useStatic})}),window.addEventListener("channel:viewport-change",e=>{this.viewportChange(e.detail),this.blurSelects(this.selectorElsQuery)}),window.addEventListener("change:orientation-change",()=>{this.blurSelects(this.selectorElsQuery)}),window.addEventListener("channel:buy-button-click",e=>{console.log(e.detail)})},dispatch:function(e){const t=new CustomEvent("channel:reorder-dom",{detail:e});window.dispatchEvent(t)},dispatchPostUserSelect:function(e){const t=new CustomEvent("channel:user-select",{detail:e});window.dispatchEvent(t)}},channelCompare={inited:!1,init:function(e=null){if(this.inited)return;let t;if(this.isDev=window.location.host.indexOf("127.0.0.1")>-1,e)t=e;else if(!e){const e=document.querySelector("[data-channel-html-compare]");if(!e)return void console.warn("channelCompare: element[data-channel-html-compare not found]");try{const i=e.getAttribute("data-channel-html-compare");t=JSON.parse(i)}catch(e){return void console.warn("channelCompare: error parsing JSON",e)}}const i=t.order,r=t.headerEl,n=t.selectorEls,s=t.swapEls,o=t.staticEl,a=t.useStatic;reorderDOM.init(s,n,r,o,a),!a&&selectorManager.init(n),buyButtonManager.init(".compare-button"),dataManager.init(i,a),viewportManager.init(),orientationManager.init(),this.inited=!0}};window.addEventListener("pageshow",e=>{const{persisted:t}=e;if(t)window.addEventListener("scroll",()=>{const e=new CustomEvent("channel:user-refresh");window.dispatchEvent(e)});else{channelCompare.init(),document.querySelector(".channel-compare").classList.remove("channel-compare--hidden")}});</script>
  443.     <!--END > SCRIPTS:BASE -->
  444.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  445.          <script>
  446.         $(document).ready(function() {
  447.             if($(".more-text-btn").hasClass("show-more-height")) {
  448.                 $(".more-text-btn").removeClass("show-more-height")
  449.                 $(".mc-show-more").html("Weniger anzeigen");
  450.             }
  451.                 $(".mc-show-more").click(function () {
  452.                     if($(".more-text-btn").hasClass("show-more-height")) {
  453.                         $(this).text("Weniger anzeigen");
  454.                     } else {
  455.                         $(this).text("Mehr anzeigen");
  456.                     }
  457.                     $(".more-text-btn").toggleClass("show-more-height");
  458.                 });
  459.             });
  460.     </script>
  461.     
  462.       <script>
  463.     let iframe = document.querySelector("#child-iframe");
  465.     iframe.addEventListener('load', function() {
  466.         if(iframe.contentDocument.body.scrollHeight) {
  467.           let newheight = iframe.contentDocument.body.scrollHeight + 50 ;
  469.             iframe.style.height = newheight + 'px';
  470.             iframe.style.width = iframe.contentDocument.body.scrollWidth + 'px';
  471.         }
  472.     });    
  473. </script>
  475. {% if page.product.extensions.netiProductCms and page.product.extensions.netiProductCms.getBelowProductDescriptionContent() %}
  476.             {% for content in page.product.extensions.netiProductCms.getBelowProductDescriptionContent() %}
  477.                 <div id="technische" class="is--neti-next-productdetailcms is--below-product_description {{ config('NetiNextProductDetailCms.config.belowDescriptionIndention') }}" {% if config('NetiNextProductDetailCms.config.belowDescriptionInlineStyle') %}style="{{ config('NetiNextProductDetailCms.config.belowDescriptionInlineStyle') }}"{% endif %}>
  478.                     {{ content|raw }}
  479.                 </div>
  480.             {% endfor %}
  481.         {% endif %}
  482.          
  484.                     {% if page.crossSellings|length > 0 %}
  485.                         <div class="product-detail-tabs product-detail-cross-selling">
  486.                             {% sw_include '@Storefront/storefront/page/product-detail/cross-selling/tabs.html.twig' with {
  487.                                 crossSellings: page.crossSellings
  488.                             } only %}
  489.                         </div>
  490.                     {% endif %}
  491.                 {% endblock %}
  492.             {% endblock %}
  493.         </div>
  494.     {% endblock %}
  495. {% endblock %}