custom/plugins/XioniXconfig/src/Resources/views/storefront/page/product-detail/buy-widget.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/page/product-detail/buy-widget.html.twig' %}
  3. {% block page_product_detail_buy_form %}
  4. {% endblock %}
  6. {% block page_product_detail_price %}
  7. {% set has_config = page.extensions.is_xconfig.has_configuration %}
  8. {% sw_include '@XioniXconfig/storefront/page/product-detail/x_breadcrumb.html.twig' with { context: context, category: page.product.seoCategory } only %}
  9.     <div class="x-product-detail-tabs">
  10.         <div class="x-product-detail-tab tab-price">
  11.             <button class="tab-button tab-active" type="button" value="price">Preis</button>
  12.         </div>
  13.         <div class="x-product-detail-tab tab-info">
  14.             <button class="tab-button" type="button" value="info">Kontakt</button>
  15.         </div>
  16.         <div class="x-product-detail-tab tab-manufacturer">
  17.             <button class="tab-button" type="button" value="manufacturer">Mengen %</button>
  18.         </div>
  19.     </div>
  20.     <div class="product-detail-tab-content" id="tab-price">
  21.         <div class="product-detail-price-container">
  22.             {% if page.product.productNumber %}
  23.                 <div class="product-detail-ordernumber-container">
  24.                     {% block page_product_detail_ordernumber_label %}
  25.                         <span class="product-detail-ordernumber-label">
  26.                             {{ "detail.productNumberLabel"|trans|sw_sanitize }}
  27.                         </span>
  28.                     {% endblock %}
  30.                     {% block page_product_detail_ordernumber %}
  31.                         <meta itemprop="productID"
  32.                               content="{{ page.product.id }}"/>
  33.                         <span class="product-detail-ordernumber"
  34.                               itemprop="sku">
  35.                             {{ page.product.productNumber }}
  36.                         </span>
  37.                     {% endblock %}
  38.                 </div>
  39.             {% endif %}    
  40.             <h1 class="x-product-atricle-name">{{ page.product.translated.name }}</h1>
  41.             <div class="netto-container">
  42.                 <div class="price-detail-netto-headline">Netto</div>
  43.                 {% sw_include '@Storefront/storefront/page/product-detail/buy-widget-price.html.twig' %}
  44.             </div>
  45.             <div class="brutto-container">
  46.                 <div class="price-detail-brutto-headline">Brutto</div>
  47.                 {% set brutto_price = page.product.calculatedPrice.unitPrice*1.19 %}
  48.                 <div class="product-detail-price-brutto">
  49.                     <span class="brutto-price-number">{{ brutto_price|currency }}</span> inkl. MwSt. inkl. Versandkosten
  50.                 </div>
  51.             </div>
  52.             <div class="product-detail-tax-container">
  53.                 {% if context.taxState == "gross" %}
  54.                     {% set taxText = "general.grossTaxInformation"|trans|sw_sanitize %}
  55.                 {% else %}
  56.                     {% set taxText = "general.netTaxInformation"|trans|sw_sanitize %}
  57.                 {% endif %}
  59.                 <p class="product-detail-tax">
  60.                     {% block page_product_detail_tax_link %}
  61.                         <a class="product-detail-tax-link"
  62.                            href="{{ path('frontend.cms.page',{ id: config('core.basicInformation.shippingPaymentInfoPage') }) }}"
  63.                            title="{{ taxText }}"
  64.                            data-toggle="modal"
  65.                            data-url="{{ path('frontend.cms.page',{ id: config('core.basicInformation.shippingPaymentInfoPage') }) }}">
  66.                             {{ taxText }}
  67.                         </a>
  68.                     {% endblock %}
  69.                 </p>
  70.             </div>
  71.             <div class="product-detail-delivery-information">
  72.                 {% sw_include '@Storefront/storefront/component/delivery-information.html.twig' %} <p>Lieferzeit</p>
  73.             </div>
  74.             {% if page.product.productNumber == "parking3000" %}
  75.                 <p class="product-detail-start-add-hint"><span style="font-weight: bold">Hinweis:</span><br> Für die elektrischen Schranken empfehlen wir eine persönliche Beratung durch unsere Experten! 
  76.                 Sie sind Ihnen ebenso behilflich bei der Auswahl von Zubehör. Kontaktieren Sie uns direkt unter +49 (0) 2373 17809-0 oder per <a target="_blank" href="https://poller24.de/Shop-Service/Kontakt/">Kontaktformular</a>. 
  77.                 Gern können Sie auch erste Fragen im Konfigurator beantworten und uns Ihre Anfrage senden.</p>
  78.                 <span id="xconfig_start_description" style="font-weight: bold"></span>                
  79.             {% endif %}                 
  80.         </div>
  81.         {% if has_config %}
  82.         <div id="xconfig">
  83.             <div id="xconfig_body">
  84.             </div>
  85.             <div id="xconfig_footer">
  86.             </div>
  87.         </div>
  88.         {% endif %}
  89.         <div class="xconfig_end_block">
  90.             {% if has_config %}
  91.             <div class="x-chosen-article-box">
  92.                 <div class="table-detail-headline">Ausgewählte Produktvariante</div>
  93.                 <div class="x-chosen-article">
  94.                 Ausführung:
  95.                 <span class="xconfig_description"></span>
  96.                 </div>
  97.             </div>
  98. <!--             <div class="xprice_block">
  99.                 <div class="x-chosen-article-box">
  100.                     <div class="table-detail-headline">Übersicht</div>
  101.                     <div class="x-chosen-article">
  102.                     Ausführung:
  103.                     <span class="xconfig_description"></span>
  104.                     </div>
  105.                 </div> 
  106.             </div> -->
  107.             {% endif %}
  108.             <div class="col-14 x-buy-field" {% if not has_config %} style="position:inherit!important" {% endif %}>
  109.                 <div class="col-4 x-select" style="margin-right:0px!important">
  110.                     <select class="custom-select">
  111.                     {% for quantity in range(page.product.minPurchase, page.product.calculatedMaxPurchase, page.product.purchaseSteps) %}
  112.                         <option value="{{ quantity }}">
  113.                             {{ quantity }}
  114.                             {% if quantity == 1 %}
  115.                                 {% if page.product.translated.packUnit %} {{ page.product.translated.packUnit }}{% endif %}
  116.                             {% else %}
  117.                                 {% if page.product.translated.packUnitPlural %}
  118.                                     {{ page.product.translated.packUnitPlural }}
  119.                                 {% elseif page.product.translated.packUnit %}
  120.                                     {{ page.product.translated.packUnit }}
  121.                                 {% endif %}
  122.                             {% endif %}
  123.                         </option>
  124.                     {% endfor %}
  125.                     </select>  
  126.                 </div>
  127.             <div class="col-8 x-buttons">
  128.                     <button id="cart_primary" form="productDetailPageBuyProductForm" class="btn btn-primary btn-block btn-buy"
  129.                             title="{{ "detail.addProduct"|trans|striptags }}"
  130.                             aria-label="{{ "detail.addProduct"|trans|striptags }}">
  131.                         {{ "detail.addProduct"|trans|sw_sanitize }}
  132.                     </button>
  133.                     <a href="mailto:m.wette@pse-technik.de?subject=Anfrage für {{ page.product.translated.name }}&body=Ihr Firmenname: %0D%0A %0D%0A Ihr Vor- und Nachname: %0D%0A %0D%0A Ihre Telefonnummer: %0D%0A %0D%0A Ihre Nachricht: %0D%0A" id="detail-config-request" class="btn btn-primary btn-block btn-buy">
  134.                         Produkt anfragen {% sw_icon "envelope" %}</a>
  135.                     </a>
  136.             </div>   
  137.                 <div class="x-calc-table">
  138.                       <div class="x-calc-table-firstrow">
  139.                         <div class="x-calc-table-row1">Artikel</div>
  140.                         <div class="x-calc-table-row2">Menge</div>
  141.                         <div class="x-calc-table-row3">Preis</div>
  142.                         <div class="x-calc-table-row4"></div>
  143.                       </div>
  144.                       <div class="x-calc-table-secondrow lchline">
  145.                         <div class="x-calc-table-row1">{{ page.product.translated.name }}</div>
  146.                         <div id="x-main-article-qty" class="x-calc-table-row2">1</div>
  147.                         <div id="x-main-article-price" class="x-calc-table-row3">{{ page.product.calculatedPrice.unitPrice|currency }}*</div>
  148.                       </div>
  149.                 </div> 
  150.                 <div class="xprice-netto-row">
  151.                     <div class="price-detail-netto-headline-table">Gesamtpreis Netto</div>
  152.                     <div class="x-full-price">{{ page.product.calculatedPrice.unitPrice|currency }}*</div>
  153.                 </div>
  154.                 <div class="xprice-brutto-row">
  155.                     <div class="price-detail-brutto-headline-table">Gesamtpreis Brutto</div>
  156.                     <div class="x-full-price-brutto">{{ brutto_price|currency }}</div>
  157.                 </div>
  158.                 <div class="product-detail-tax-container-table">
  159.                     {% if context.taxState == "gross" %}
  160.                         {% set taxText = "general.grossTaxInformation"|trans|sw_sanitize %}
  161.                     {% else %}
  162.                         {% set taxText = "general.netTaxInformation"|trans|sw_sanitize %}
  163.                     {% endif %}
  165.                     <p class="product-detail-tax">
  166.                         <a class="product-detail-tax-link"
  167.                            href="{{ path('frontend.cms.page',{ id: config('core.basicInformation.shippingPaymentInfoPage') }) }}"
  168.                            title="{{ taxText }}"
  169.                            data-toggle="modal"
  170.                            data-url="{{ path('frontend.cms.page',{ id: config('core.basicInformation.shippingPaymentInfoPage') }) }}">
  171.                             {{ taxText }}
  172.                         </a>
  173.                     </p>
  174.                 </div>
  175.             </div>
  176.         {% if page.product.active %}
  177.             <div class="product-detail-form-container">
  178.                 {% sw_include '@Storefront/storefront/page/product-detail/buy-widget-form.html.twig' %}
  179.             </div>
  180.             <div class="product-detail-accessory-form-container">
  181.                 {% sw_include '@Storefront/storefront/page/product-detail/buy-widget-form-accessory.html.twig' %}
  182.             </div>    
  183.         {% endif %}
  184.         </div> 
  185.     </div>    
  186.     <div class="product-detail-tab-content" id="tab-info">
  187.         <p class="tab-info-headline">Ihre Ansprechpartner</p>
  188.         {% if page.product.productNumber == "parking" || page.product.productNumber == "industrial" ||
  189.         page.product.productNumber == "koloss" || page.product.productNumber == "solar" || page.product.productNumber == "parking3000" %}
  190.         <div class="tab-info-personcard">
  191.             <div class="tab-info-personcard-image">
  192.                 <img class="personcard-image" alt="Dubravka Bukna - Service, Wartung und Reparatur Bereich Absperrtechnik" src="/media/c9/6a/6e/1677056857/dubravka_bukna.jpg" alt="Frau Bukna" title="Frau Bukna">
  193.             </div>
  194.             <div class="tab-info-personcard-description">
  195.                 <p class="tab-info-personcard-description-name">Dubravka Bukna</p>
  196.                 <p class="tab-info-personcard-description-title">Ansprechpartner Absperrtechnik</p>
  197.                 <p class="tab-info-personcard-description-phone"><a title="+49 (0) 2373 17809-15" href="tel:+4923731780915">+49 (0) 2373 17809-15<br></a></p>
  198.                 <p class="tab-info-personcard-description-mail"><a title="E-Mail-Adresse Dubravka Bukna" href="mailto:d.bukna@pse-technik.de" target="_blank">d.bukna@pse-technik.de</a></p>
  199.             </div>
  200.         </div>
  201.         <div class="tab-info-personcard">
  202.             <div class="tab-info-personcard-image">
  203.                 <img class="personcard-image" alt="Sebastian Toth - Bereich Absperrtechnik/Zutrittskontrolle" src="/media/90/ef/af/1677056857/sebastian_toth.jpg" alt="Herr Toth" title="Herr Toth">
  204.             </div>
  205.             <div class="tab-info-personcard-description">
  206.                 <p class="tab-info-personcard-description-name">Sebastian Toth</p>
  207.                 <p class="tab-info-personcard-description-title">Ansprechpartner Absperrtechnik/Zutrittskontrolle</p>
  208.                 <p class="tab-info-personcard-description-phone"><a title="+49 (0) 2373 17809-10" href="tel:+4923731780910">+49 (0) 2373 17809-10<br></a></p>
  209.                 <p class="tab-info-personcard-description-mail"><a title="E-Mail-Adresse Sebastian Toth" href="mailto:s.toth@pse-technik.de" target="_blank">s.toth@pse-technik.de</a></p>
  210.             </div>
  211.         </div>        
  212.         {% else %}
  213.         <div class="tab-info-personcard">
  214.             <div class="tab-info-personcard-image">
  215.                 <img class="personcard-image" alt="Marion Wette - Produktmanagerin" src="/media/5f/67/80/1647334115/frau_wette.jpg" alt="Frau Wette" title="Frau Wette">
  216.             </div>
  217.             <div class="tab-info-personcard-description">
  218.                 <p class="tab-info-personcard-description-name">Marion Wette</p>
  219.                 <p class="tab-info-personcard-description-title">Produktmanagerin</p>
  220.                 <p class="tab-info-personcard-description-phone"><a title="+49 (0) 2373 17809-11" href="tel:+4923731780911">+49 (0) 2373 17809-11<br></a></p>
  221.                 <p class="tab-info-personcard-description-mail"><a title="E-Mail-Adresse Marion Wette" href="mailto:m.wette@pse-technik.de" target="_blank">m.wette@pse-technik.de</a></p>
  222.             </div>
  223.         </div>
  224.         <div class="tab-info-personcard">
  225.             <div class="tab-info-personcard-image">
  226.                 <img class="personcard-image" alt="Christian Preuß - Produktmanager" src="/media/f9/f0/29/1647334352/herr_preuss.jpg" alt="Herr Preuß" title="Herr Preuß">
  227.             </div>
  228.             <div class="tab-info-personcard-description">
  229.                 <p class="tab-info-personcard-description-name">Christian Preuß</p>
  230.                 <p class="tab-info-personcard-description-title">Produktmanager</p>
  231.                 <p class="tab-info-personcard-description-phone"><a title="+49 (0) 2373 17809-0" href="tel:+492373178090">+49 (0) 2373 17809-0
  232.                 </a></p>
  233.                 <p class="tab-info-personcard-description-mail"><a title="E-Mail-Adresse Christian Preuß" href="mailto:c.preuss@pse-technik.de" target="_blank">c.preuss@pse-technik.de</a><a title="+49 (0) 2373 17809-0" href="tel:+492373178090"></a></p>
  234.             </div>
  235.         </div>
  236.         {% endif %}
  237.         <div class="tab-info-personcard">
  238.             <div class="tab-info-personcard-image">
  239.                 <img class="personcard-image" alt="Florian Thier (Leiter Vetriebsinnendienst)" src="/media/cb/50/82/1647334507/herr_thier.jpg" alt="Herr Thier" title="Herr Thier">
  240.             </div>
  241.             <div class="tab-info-personcard-description">
  242.                 <p class="tab-info-personcard-description-name">Florian Thier</p>
  243.                 <p class="tab-info-personcard-description-title">Leiter Vetriebsinnendienst</p><p class="tab-info-personcard-description-phone"><a title="+49 (0) 2373 17809-0" href="tel:+492373178090">+49 (0) 2373 17809-0</a></p>
  244.                 <p class="tab-info-personcard-description-mail"><a title="E-Mail-Adresse Florian Thier" href="mailto:f.thier@pse-technik.de">f.thier@pse-technik.de</a><a title="+49 (0) 2373 17809-0" href="tel:+492373178090"></a></p>
  245.             </div>
  246.         </div>
  247.     </div>
  248.     
  249.     <div class="product-detail-tab-content" id="tab-manufacturer">
  250.         <p class="tab-info-headline">Fragen Sie unverbindlich die aktuellen Staffelpreise und Mengenrabatte für diesen Artikel an.</p>
  251.         <p></p>
  252.         <div class="discount-button-container">
  253.             <a href="mailto:m.wette@pse-technik.de?subject=Anfrage%20Mengenrabatt%20/%20Staffelpreise%20für%20Artikel%20{{ page.product.translated.name }} &amp;body=Guten%20Tag,%0D%0A%0D%0AAnfrage%20zu%20Artikel%20{{ page.product.translated.name }}.%0D%0A%0D%0AGewünschte%20Menge:">
  254.                 <button class="btn btn-primary btn-block btn-discount">E-Mail Anfrage stellen</button> 
  255.             </a>
  256.         </div>
  257.     </div>
  258.     {% if page.product.productNumber == "SchrankeS" || page.product.productNumber == "parking" || page.product.productNumber == "industrial" ||
  259.      page.product.productNumber == "koloss" || page.product.productNumber == "solar" %}
  260.     <script>
  261.         $("#cart_primary").hide();
  262.         $(".x-calc-table").hide();
  263.         $(".xprice-netto-row").hide();
  264.         $(".xprice-brutto-row").hide();
  265.         $(".x-select").hide();
  266.         $(".product-detail-tax-container-table").hide();
  267.         $(".netto-container").html('<meta itemprop="price" content="0"><p class="product-detail-price">Preis auf Anfrage</p><p>Wir erstellen Ihnen gern ein Angebot. Einfach konfigurieren und Produktberatung anfragen! Weitere Details klären wir in einem persönlichen Gespräch.</p>');
  268.         $(".netto-container").css({"float": "inherit", "width": "100%"});
  269.         //$(".netto-container").hide();
  270.         $(".brutto-container").hide();
  271.         $(".product-detail-delivery-information").hide();
  272.         $(".product-detail-tax-container").hide();
  273.         $(".xconfig_start_block").hide();
  274.         $(".x-chosen-article-box").hide();
  275.         $(".product-detail-ordernumber-container").hide();
  276.         $(".manufacturer-website").hide();
  277.         $("#detail-config-request").attr('href', 'mailto:d.bukna@pse-technik.de?subject=Anfrage für {{ page.product.translated.name }}&body=Ihr Firmenname: %0D%0A %0D%0A Ihr Vor- und Nachname: %0D%0A %0D%0A Ihre Telefonnummer: %0D%0A %0D%0A Ihre Nachricht: %0D%0A');
  278.         $( document ).ready(function() {
  279.             $("#x-order-tab").hide();
  280.         });
  282.     </script>
  283.     {% endif %}
  284.     {% if page.product.productNumber == "parking3000" %}
  285.     <script>
  286.         $("#detail-config-request").attr('href', 'mailto:d.bukna@pse-technik.de?subject=Anfrage für {{ page.product.translated.name }}&body=Ihr Firmenname: %0D%0A %0D%0A Ihr Vor- und Nachname: %0D%0A %0D%0A Ihre Telefonnummer: %0D%0A %0D%0A Ihre Nachricht: %0D%0A');
  287.         $(".manufacturer-website").hide();
  288.         $(".xconfig_start_block").hide();
  289.         $(".x-chosen-article-box").hide();
  290.     </script>
  291.     {% endif %}    
  292.     <script>
  293.     var groupIds     = new Array();
  294.     var groupValues    = new Array();
  295.     var start_variant = getSearchParams("xconfig");
  296.     var preconf = getSearchParams("preconf");
  297.     var num            = 0;    
  298.     var original_price = $(".product-detail-price").html();
  299.     var brutto_price = $(".product-detail-price-brutto").html();
  300.     var productnumber = "{{ page.product.productNumber }}";
  301.     var currency = "{{ context.currency.isoCode }}";                                                
  302.     var main_price = 0;
  303.     {% if not has_config %}
  304.     main_price = {{ page.product.calculatedPrice.unitPrice }};
  305.     {% endif %}
  306.     $( ".tab-button" ).click(function() {
  307.         var tab = $(this).attr("value");
  308.         $( ".tab-button" ).removeClass("tab-active");
  309.         $(this).addClass("tab-active");
  310.         $( ".product-detail-tab-content" ).css("display", "none");
  311.         $( "#tab-"+tab ).css("display", "block");
  312.         if (tab != "price") {
  313.             $( ".product-detail-form-container" ).hide();
  314.         } else {
  315.             $( ".product-detail-form-container" ).show();
  316.         }
  317.     });
  318.     
  319.     $( document ).ready(function() {
  320.         $.getScript("https://xconfig003.com/mvc_structure2/assets/js/jquery-ui.js", function() { 
  321.             getConfiguration(0, productnumber, groupIds, groupValues, start_variant);             
  322.         }); 
  323.         
  324.         $(".x-accessory-container:first .x-accessory-bottom-container").show(); 
  326.         $(".x-accessory-top-header-container").click(function () {
  327.             $(this).next(".x-accessory-bottom-container").slideToggle("slow");
  328.             $(".x-accessory-bottom-container").not($(this).next()).slideUp("slow");
  329.         }); 
  330.         
  331.          
  332.         $(".x-tab-accessory-top-header-container").click(function () {
  333.                 $(this).next(".x-tab-accessory-bottom-container").slideToggle("slow");
  334.             $(".x-tab-accessory-bottom-container").not($(this).next()).slideUp("slow");
  335.         }); 
  336.     });
  337.     
  338.     function getConfiguration(id, productnumber, option_ids, value_ids, start_variant) {
  339.         $.ajax({
  340.             url:"https://xconfig003.com/mvc_structure2/get_configuration_poller_new_config_DEV.php",
  341.             type:'POST',
  342.             dataType: 'json',
  343.             data: { id: id, productnumber: productnumber, option_ids: option_ids, value_ids: value_ids , start_variant: start_variant},
  344.             success: function(data){
  345.                 var main_tpl = decodeURIComponent(escape(window.atob(data.config_main_tpl)));
  346.                 var footer_tpl = decodeURIComponent(escape(window.atob(data.config_footer_tpl)));
  347.                 $('#xconfig_body').html(main_tpl);
  348.                 $('#xconfig_footer').html(footer_tpl);
  349.                 $('#xconfigDesc').val(data.config_description);
  350.                 var buy_btn = $('.btn-buy');
  351.                 var text = data.config_description;
  352.                 //text = text.replace("$$", "");
  353.                 //var newchar = ", %0D%0A";
  354.                 //text = text.split("$$").join(newchar);
  355.                 text = text.replaceAll(",", ", %0D%0A");
  356.                 if (text != "") {
  357.                     if (productnumber == "SchrankeS" || productnumber == "parking" || productnumber == "industrial" ||
  358.                         productnumber == "koloss" || productnumber == "solar" || productnumber == "parking3000") {
  359.                         $("#detail-config-request").attr('href',"mailto:d.bukna@pse-technik.de?subject=Anfrage für {{ page.product.translated.name }}&body=Ihr Firmenname: %0D%0A %0D%0A Ihr Vor- und Nachname: %0D%0A %0D%0A Ihre Telefonnummer: %0D%0A %0D%0A Ihre Konfiguration: %0D%0A"+ text + "%0D%0A Ihre Nachricht: %0D%0A");
  360.                     } else {
  361.                         $("#detail-config-request").attr('href',"mailto:m.wette@pse-technik.de?subject=Anfrage für {{ page.product.translated.name }}&body=Ihr Firmenname: %0D%0A %0D%0A Ihr Vor- und Nachname: %0D%0A %0D%0A Ihre Telefonnummer: %0D%0A %0D%0A Ihre Konfiguration: %0D%0A"+ text + "%0D%0A Ihre Nachricht: %0D%0A");
  362.                     }
  363.                     if (productnumber == "parking3000") {
  364.                         $("#cart_primary").hide();
  365.                         $(".x-calc-table").hide();
  366.                         $(".xprice-netto-row").hide();
  367.                         $(".xprice-brutto-row").hide();
  368.                         $(".x-select").hide();
  369.                         $(".product-detail-tax-container-table").hide();
  370.                         $(".netto-container").html('<p class="product-detail-price">Preis auf Anfrage</p><p>Wir erstellen Ihnen gern ein Angebot. Einfach konfigurieren und Produktberatung anfragen! Weitere Details klären wir in einem persönlichen Gespräch.</p>');
  371.                         $(".netto-container").css({"float": "inherit", "width": "100%"});
  372.                         //$(".netto-container").hide();
  373.                         $(".brutto-container").hide();
  374.                         $(".product-detail-delivery-information").hide();
  375.                         $(".product-detail-tax-container").hide();
  376.                         $(".xconfig_start_block").hide();
  377.                         $(".x-chosen-article-box").hide();
  378.                         $(".product-detail-ordernumber-container").hide();
  379.                         $(".manufacturer-website").hide();
  380.                         $( document ).ready(function() {
  381.                             $("#x-order-tab").hide();
  382.                         });                        
  383.                     }                    
  384.                 }
  385.                 value_ids.forEach (function (value_id, index) {
  386.                     if (value_id) {
  387.                         $( ".config--has-summary" ).show();
  388.                     }               
  389.                 });
  390.                 if(value_ids.length == 0) {
  391.                     $( ".config--has-summary" ).hide();
  392.                     if (preconf !== undefined) {
  393.                         searchAndTrigger(preconf);
  394.                     }                    
  395.                 }
  396.                 if(data.config_complete) {
  397.                     buy_btn.removeAttr('disabled');
  398.                 } else {
  399.                     buy_btn.attr('disabled', 'disabled');
  400.                 }
  401.                 
  402.                 //if (data.variant_product_productnumber != null) {
  403.                 //    $("#xconfigProductNumber").html(data.variant_product_productnumber;
  404.                 //}
  405.                 //if (data.variant_product_ean != null) {
  406.                 //    $("#xconfigEan").html(data.variant_product_ean;
  407.                 //}
  408.                 var buy_form = $("#productDetailPageBuyProductForm");
  409.                 buy_form.attr("action", "/checkout/xconfig-line-item/add");
  410.                 if (productnumber != "parking3000") {
  411.                     if (data.variant_product_price1.raw != null) {
  412.                         main_price = data.variant_product_price1.raw;
  413.                         if (currency == "CHF") {
  414.                             $(".product-detail-price").html(data.variant_product_price1_chf.formatted);
  415.                             $("#x-main-article-price").html(data.variant_product_price1_chf.formatted);
  416.                             $(".product-detail-price-brutto").html("<span class='brutto-price-number'>" + data.variant_product_price1_brutto_chf.formatted + "</span><br>inkl. MwSt.");                   
  417.                         } else {
  418.                             $(".product-detail-price").html(data.variant_product_price1.formatted);
  419.                             $("#x-main-article-price").html(data.variant_product_price1.formatted);
  420.                             $(".product-detail-price-brutto").html("<span class='brutto-price-number'>" + data.variant_product_price1_brutto.formatted + "</span><br>inkl. MwSt.");
  421.                         }
  422.                         calcprice();
  423.                     }
  424.                 }
  425.                 $(".xconfig_description").html(data.config_product_description);
  426.                 // if (data.variant_product_media != "") {
  427.                     // var gallery_image = $(".gallery-slider-image").first();
  428.                     // $('#xconfigMedia').val(data.variant_product_media[0].media_path);
  429.                     // gallery_image.attr("src", data.variant_product_media[0].media_path.replace(/ /g, '%20'));
  430.                     // gallery_image.attr("srcset", data.variant_product_media[0].media_path.replace(/ /g, '%20')+" 1921w, "+data.variant_product_media[0].media_path.replace(/ /g, '%20')+" 1920w, "+data.variant_product_media[0].media_path.replace(/ /g, '%20')+" 800w, "+data.variant_product_media[0].media_path.replace(/ /g, '%20')+" 400w");
  431.                     // gallery_image.attr("data-full-image", data.variant_product_media[0].media_path.replace(/ /g, '%20'));
  432.                     // $( ".product-media-append" ).hide();
  433.                 // } else {
  434.                 //if(data.config_complete) {
  435.                 //    $( ".product-media-append" ).show();
  436.                 //} else {
  437.                 //    $( ".product-media-append" ).hide();
  438.                 //}
  439.                 
  440.                 // }
  441.                 if (productnumber == "SchrankeS" || productnumber == "parking" || productnumber == "industrial" ||
  442.                     productnumber == "koloss" || productnumber == "solar" || productnumber == "parking3000") {
  443.                 
  444.                 } else {
  445.                     var item_pdf = "";
  446.                     if (data.variant_product_media != "") {
  447.                         data.variant_product_media.forEach(function(item){
  448.                             if(item.media_path.includes('pdf')) {
  449.                                 item_pdf = item_pdf +  '<a class="pdf-media-download" target="_blank" rel="noopener noreferrer" href="'+ item.media_path +'">Download: '+ item.media_name +'.pdf</a> <br />';  
  450.                             }
  451.                         });
  452.                         $("#pdf-media").html(item_pdf);                
  453.                     }
  454.                     if (item_pdf == "") {
  455.                         $("#pdf-media").html('Leider gibt es für diesen Artikel bzw. für die von Ihnen gewählte Variante bisher keine Datenblätter. Sie können jedoch unter 0 23 73 / 1 78 09-11 oder <a href="mailto:m.wette@pse-technik.de" target="_self">m.wette@pse-technik.de</a> bei Frau Wette eine Anfrage für ein Datenblatt stellen oder weitere Informationen zu diesem Produkt einholen.');
  456.                     }
  457.                 }
  458.                 if(data.variant_product_start_config.values != "" && data.variant_product_start_config.options != "") {
  459.                     $("#xStartGroupValues").val(data.variant_product_start_config.values);
  460.                     $("#xStartGroupIds").val(data.variant_product_start_config.options); 
  461.                     $("#xconfig_start_description").html(data.variant_product_start_config_description);
  462.                     $('#xconfigStartDesc').val(data.variant_product_start_config_description);                    
  463.                     $('#startCartBtn').removeAttr('disabled');
  465.                     $("#xGroupIds").val(data.variant_product_start_config.values);
  466.                     $("#xGroupValues").val(data.variant_product_start_config.options); 
  467.                     $('#xconfigDesc').val(data.variant_product_start_config_description);                    
  468.                     buy_btn.removeAttr('disabled');                    
  469.                 } else {
  470.                     $('#startCartBtn').attr('disabled', 'disabled');
  471.                     $('.xconfig_start_block').hide();
  472.                 }
  473.                 if (main_tpl == "") {
  474.                     $('#startCartBtn').hide();
  475.                     $('.xconfig_start_block').hide();
  476.                 }
  477.                 //$(".accessory-hidden-input-id").each(function(e){
  478.                 //    this.value = data.variant_id + $(this).attr("originalid");
  479.                 //});
  480.                 $('.x-accessory-item-container').hide();
  481.                 $('.x-accessories-headline').hide();
  482.                 
  483.                 // if (data.product_accessories != "") {
  484.                     // //$('.x-accessory-item-container').hide();
  485.                     // data.product_accessories.forEach(function(item){
  486.                         // var product_number = item.product.base.product_number;
  487.                         // product_number = product_number.replace(".", "_")
  488.                         // $('#accessory_'+product_number).show();
  489.                         // $('.x-accessories-headline').show();
  490.                     // });
  491.                 // }
  492.                 
  493.                 if (data.variant_product_accessories != "") {
  494.                     //$('.x-accessory-item-container').hide();
  495.                     data.variant_product_accessories.forEach(function(item){
  496.                         var product_number = item.product.base.product_number;
  497.                         product_number = product_number.replace(".", "_")
  498.                         $('#accessory_'+product_number).show();
  499.                         $('.x-accessories-headline').show();
  500.                     });
  501.                 }                
  502.                 // if (data.variant_product_accessories == "" || data.product_accessories == "") {
  503.                     // $('.x-accessories-headline').hide();
  504.                     // $('.x-accessory-item-container').hide();
  505.                 // }
  506.                 $("#xVariantId").val(data.variant_id);
  507.                 $(".accessory-variant-id").val(data.variant_id);
  508.                 
  509.                 if (productnumber == "SchrankeS" || productnumber == "parking" || productnumber == "industrial" ||
  510.                     productnumber == "koloss" || productnumber == "solar") {
  511.                     $(".product--headline").html("Konfigurieren Sie jetzt Ihre Anfrage:");
  512.                 }
  513.                 
  514.                 if (productnumber == "parking3000") {
  515.                     $(".product--headline").html("Konfigurieren Sie jetzt Ihren Anfrage:");
  516.                     buy_btn.removeAttr('disabled');
  517.                 }
  518.                 var steps = value_ids.filter(obj => obj != "").length;
  519.                 if (steps != 0) {
  520.                     gtag('event', 'Konfigurator: '+productnumber, {'event_category': 'configuration','event_label': 'Schritt:'+steps,'value': true});
  521.                     //gtag('event', 'Konfigurator: '+productnumber, {
  522.                     //  'SCHRITT': steps
  523.                     //});                    
  524.                 }                 
  525.             }
  526.         });    
  527.     }    
  528.     
  529.     function submitXData() {
  530.         $("#xconfig_body :input[name^='group']").each(function(e){
  531.             if(this.type == "hidden" || this.type == "text")
  532.             {
  533.                 string = this.name;
  534.                 string = string.substring(string.lastIndexOf("[")+1,string.lastIndexOf("]"));
  535.                 groupIds[num] = string;
  536.                 groupValues[num] = this.value;
  537.                 num++;
  538.             }
  539.         });
  541.         $("#xGroupIds").val(groupIds);
  542.         $("#xGroupValues").val(groupValues);
  543.         
  544.         getConfiguration(0, productnumber, groupIds, groupValues);
  545.         
  546.         groupIds = [];
  547.         groupValues = [];
  548.         num = 0;
  550.         return false;
  551.     }
  552.     function getSearchParams(k){
  553.         var p={};
  554.         location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(s,k,v){p[k]=v})
  555.         return k?p[k]:p;
  556.     }                                
  557.     
  558.     function submitRestart() {
  559.         var groupIds     = new Array();
  560.         var groupValues = new Array();
  561.         config_count = 0;
  562.         getConfiguration(0, productnumber, groupIds, groupValues);
  563.         $('#startCartBtn').removeAttr('disabled');
  564.         $('.xconfig_start_block').show();
  565.         $(".product-detail-price").html(original_price);   
  566.         $("#x-main-article-price").html(original_price);   
  567.         $(".product-detail-price-brutto").html(brutto_price);   
  568.     }
  569.     
  570.     function calcprice() {
  571.         var main_qty = $( ".custom-select option:selected" ).text();
  572.         var fullprice = main_qty * main_price;
  573.         $('.x-accessory-item').each(function() {
  574.             if($( this ).hasClass("active")) {
  575.                 accessory_price = $( this ).attr("data-price");
  576.                 accessory_qty = $( this ).attr("data-qty");
  577.                 full_accessory = accessory_price * accessory_qty;
  578.                 fullprice = fullprice + full_accessory;
  579.             } 
  580.         });
  581.         if (currency == "CHF") {
  582.             fullprice_brutto = fullprice * 1.077;
  583.             fullprice_brutto = formatPrice(fullprice_brutto, "CHF")
  584.             fullprice = formatPrice(fullprice, "CHF*")
  585.         } else {
  586.             fullprice_brutto = fullprice * 1.19;
  587.             fullprice_brutto = formatPrice(fullprice_brutto, "€")
  588.             fullprice = formatPrice(fullprice, "€*")            
  589.         }
  590.         $(".x-full-price").html(fullprice);  
  591.         $(".x-full-price-brutto").html(fullprice_brutto);  
  592.     }
  593.         
  594.     function formatPrice(num, currency) { 
  595.         var p = Number(num).toFixed(2).split("."); 
  596.         return p[0].split("").reverse().reduce(function(acc, num, i, orig) 
  597.         { 
  598.             return num + (i && !(i % 3) ? "." : "") + acc; 
  599.         } , "") + "," + p[1] + " "+ currency; 
  600.     } 
  602.     // Function to search for the option and trigger onchange if found
  603.     function searchAndTrigger(preconf) {
  604.         var selectElements = document.querySelectorAll('.config_select'); // Select by class name
  605.         var searchterm;
  606.         if (preconf == "of") {
  607.             searchTerm = 'ortsfest';
  608.         }
  609.         if (preconf == "hn") {
  610.             searchTerm = 'herausnehmbar';
  611.         } 
  612.         if (preconf == "ul") {
  613.             searchTerm = 'umlegbar';
  614.         }         
  615.         var triggered = false;
  616.         selectElements.forEach(function (selectElement) {
  617.             if (triggered) {
  618.                 return;
  619.             }
  620.             // Enable the select field temporarily
  621.             selectElement.disabled = false;
  622.             for (var i = 0; i < selectElement.options.length; i++) {
  623.                 var option = selectElement.options[i];
  624.                 if (option.innerHTML.toLowerCase().includes(searchTerm)) {
  625.                     // Option found, trigger onchange
  626.                     selectElement.value = option.value;
  627.                     xSend(selectElement); // Pass the select element as a parameter
  628.                     triggered = true; // Set the flag to true
  629.                     break;
  630.                 }
  631.             }
  632.         });
  633.     }
  634.     
  635.     $("#x_info_click").click(function () {
  636.         $('#x_info_modal').addClass("show"); 
  637.     });
  639.     $(".x-modal-dialog .x-dialog-close").click(function(){
  640.         
  641.         $(this).closest(".x-modal-dialog").removeClass("show");
  642.         
  643.     });    
  644. </script>       
  645. {% endblock %}
  647. {% block page_product_detail_delivery_informations %}
  648. {% endblock %}
  650. {% block page_product_detail_tax %}
  651. {% endblock %}
  654. {% block page_product_detail_ordernumber_container %} 
  655.     {% for shop_detail in page.extensions.xconfig.product.data.shop_details %}
  656.         {% if shop_detail.type_id == "2" %}
  657.             <button class="xaccordion">{{ shop_detail.item_name }}</button>
  658.             <div class="xpanel">
  659.                 <p>{{ shop_detail.item_value|raw }}</p>
  660.             </div>                            
  661.         {% endif %}
  662.     {% endfor %}    
  663. <script>
  664. var icon_delete_html = '<span class="icon icon-trash" title="entfernen"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#f01d4a" fill-rule="evenodd" d="M5 21c0 .5523.4477 1 1 1h12c.5523 0 1-.4477 1-1V9H5v12zM17 3h2c1.6569 0 3 1.3431 3 3v2c0 .5523-.4477 1-1 1v12c0 1.6569-1.3431 3-3 3H6c-1.6569 0-3-1.3431-3-3V9c-.5523 0-1-.4477-1-1V6c0-1.6569 1.3431-3 3-3h2c0-1.6569 1.3431-3 3-3h4c1.6569 0 3 1.3431 3 3zM7 13v5c0 .5523.4477 1 1 1s1-.4477 1-1v-5c0-.5523-.4477-1-1-1s-1 .4477-1 1zm4 0v5c0 .5523.4477 1 1 1s1-.4477 1-1v-5c0-.5523-.4477-1-1-1s-1 .4477-1 1zm4 0v5c0 .5523.4477 1 1 1s1-.4477 1-1v-5c0-.5523-.4477-1-1-1s-1 .4477-1 1zM10 2c-.5523 0-1 .4477-1 1h6c0-.5523-.4477-1-1-1h-4zM4 7h16V6c0-.5523-.4477-1-1-1H5c-.5523 0-1 .4477-1 1v1z"/></svg></span>';
  665. $( ".xaccordion" ).click(function() {
  666.     this.classList.toggle("xactive");
  667.     var panel = this.nextElementSibling;
  668.     if (panel.style.maxHeight) {
  669.       panel.style.maxHeight = null;
  670.     } else {
  671.       panel.style.maxHeight = panel.scrollHeight + "px";
  672.     }
  673. });
  675. $('.cms-element-').css({                      
  676.     position: 'sticky',
  677.     top: '140px'
  678. });
  680. $( ".gallery-slider-image" ).click(function() {
  681.     $('.cms-element-').css({                      
  682.         position: 'relative'
  683.     });
  684. });
  686. $( ".modal-close" ).click(function() {
  687.     $('.cms-element-').css({                      
  688.         position: 'sticky'
  689.     });
  690. });
  692. $( ".custom-select" ).change(function() {
  693.     $('#x-main-article-qty').html(this.value);
  694.     $('#main_article_quantity_form').val(this.value);
  695.     calcprice();
  696. });
  698. // $( ".x-accessory-item-select" ).change(function() {
  699.     // var parent = $( this ).parents(".x-accessory-item");
  700.     // parent.attr("data-qty", this.value)
  701.     // $( "#x-acc-article-qty-"+ parent.attr("data-id") ).html(this.value);
  702.     // calcprice();
  703. // });
  704. // $(".x-accessory-item-input").click(function() {
  705.     // var parent = $( this ).parents(".x-accessory-item");
  706.     // acc_qty = parent.attr("data-qty");
  707.     // acc_price = parent.attr("data-price");
  708.     // acc_price = formatPrice(acc_price, "€*");
  709.     // acc_name = parent.attr("data-name");
  710.     // acc_id = parent.attr("data-id");    
  711.     // if(!parent.hasClass("active")) {
  712.         // parent.addClass("active");
  713.         // parent.find(".accessory-hidden-input").each(function() { 
  714.             // $( this ).removeAttr("disabled");
  715.         // });
  716.         
  717.         // $('.x-calc-table').append('<div class="x-acc-article lchline visible" id="x-acc-article-'+ acc_id +'"><div class="x-acc-article-name" id="x-acc-article-name'+ acc_id +'">'+ acc_name +'</div><div class="x-acc-article-qty" id="x-acc-article-qty-'+ acc_id +'">'+ acc_qty +'</div><div class="x-acc-article-price" id="x-acc-article-price'+ acc_id +'">'+ acc_price +'</div><div style="cursor: pointer;" onclick="article_delete('+ "'" + acc_id + "'" +')" class="x-article-delete"><span class="x-article-icon-delete"'+ icon_delete_html +'</span></div></div>');        
  718.     // } else {
  719.         // parent.removeClass("active");
  720.         // parent.find(".accessory-hidden-input").each(function() {
  721.             // $( this ).attr("disabled", true);
  722.         // });
  723.         // $( "#x-acc-article-"+ acc_id ).remove();
  725.     // }
  726.     // calcprice();  
  727. // }); 
  729. function article_delete(acc_id) {
  730.     $("#acc_input_"+ acc_id ).click();
  731. }    
  733.     
  734. $( "#show-more-accessory" ).click(function() {
  735.   $( '.x-accessories-rest' ).show( "slow" );
  736.   $( '#show-more-accessory' ).hide();
  737. });
  739. $( "#show-less-accessory" ).click(function() {
  740.   $( '.x-accessories-rest' ).hide( "slow" );
  741.   $( '#show-more-accessory' ).show();
  742.   $('html, body').animate({
  743.         scrollTop: parseInt($('.x-accessories-headline').offset().top)
  744.     }, 500);
  745. });
  746.     
  747. function accessoryCheck() {
  748.   let total = document.querySelectorAll('.x-accessory-item-input:checked').length;
  749.   document.getElementById("totalaccessory").innerHTML = "ausgewählte Zubehörartikel: " + total;
  750. }
  751. </script>
  752. {% endblock %}