custom/plugins/dkcProductoptions/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_content %}
  4.     {{ parent() }}
  6.     {% if page.product.extensions.dkcProductOptions is defined and page.product.extensions.dkcProductOptions|length > 0 %}
  7.         <script>
  8.             document.addEventListener('DOMContentLoaded', function() {
  9.                 var addToCartForm = document.querySelector('form[action*="checkout/line-item/add"]');
  10.                 if (!addToCartForm) return;
  12.                 // === Live-Preisanzeige ===
  13.                 function parsePriceDE(text) {
  14.                     if (!text) return 0;
  15.                     var clean = text.replace(/[^\d,.\-]/g, '');
  16.                     if (!clean) return 0;
  17.                     if (clean.indexOf(',') !== -1) {
  18.                         var parts = clean.split(',');
  19.                         var intPart = parts[0].replace(/\./g, '');
  20.                         var decPart = parts[1] || '0';
  21.                         return parseFloat(intPart + '.' + decPart) || 0;
  22.                     }
  23.                     var lastDot = clean.lastIndexOf('.');
  24.                     if (lastDot !== -1 && clean.length - lastDot === 3) {
  25.                         var beforeDot = clean.substring(0, lastDot).replace(/\./g, '');
  26.                         return parseFloat(beforeDot + '.' + clean.substring(lastDot + 1)) || 0;
  27.                     }
  28.                     return parseFloat(clean.replace(/\./g, '')) || 0;
  29.                 }
  31.                 function formatCurrency(value) {
  32.                     return value.toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  33.                 }
  35.                 var priceElement = document.querySelector('.product-detail-price');
  36.                 var taxContainer = document.querySelector('.product-detail-tax-container');
  37.                 if (!taxContainer) taxContainer = document.querySelector('.product-detail-tax');
  39.                 var baseDisplayPrice = 0;
  40.                 if (priceElement) {
  41.                     baseDisplayPrice = parsePriceDE(priceElement.textContent);
  42.                 }
  44.                 var taxRate = 19;
  45.                 var displayIsNet = false;
  46.                 var grossLine = null;
  47.                 var baseGrossPrice = 0;
  49.                 if (taxContainer) {
  50.                     var taxText = taxContainer.textContent || '';
  51.                     var rm = taxText.match(/(\d+)%\s*MwSt/i);
  52.                     if (rm) taxRate = parseInt(rm[1]);
  53.                     if (taxText.indexOf('exkl.') !== -1) displayIsNet = true;
  55.                     var taxP = taxContainer.querySelector('.product-detail-tax') || taxContainer.querySelector('p');
  56.                     if (taxP) {
  57.                         var childNodes = taxP.childNodes;
  58.                         for (var i = 0; i < childNodes.length; i++) {
  59.                             if (childNodes[i].nodeType === 3) {
  60.                                 var nodeText = childNodes[i].textContent || '';
  61.                                 if (nodeText.indexOf('inkl.') !== -1) {
  62.                                     grossLine = childNodes[i];
  63.                                     baseGrossPrice = parsePriceDE(nodeText);
  64.                                 }
  65.                             }
  66.                         }
  67.                     }
  68.                 }
  70.                 var baseNet, baseGross;
  71.                 if (displayIsNet) {
  72.                     baseNet = baseDisplayPrice;
  73.                     baseGross = baseGrossPrice > 0 ? baseGrossPrice : baseNet * (1 + taxRate / 100);
  74.                 } else {
  75.                     baseGross = baseDisplayPrice;
  76.                     baseNet = baseGross / (1 + taxRate / 100);
  77.                 }
  79.                 function getSelectedOptionsTotal() {
  80.                     var total = 0;
  81.                     document.querySelectorAll('.dkc-product-option-radio').forEach(function(r) {
  82.                         if (r.checked && r.value !== '') total += parseFloat(r.dataset.price || 0);
  83.                     });
  84.                     document.querySelectorAll('.dkc-product-option-checkbox').forEach(function(c) {
  85.                         if (c.checked) total += parseFloat(c.dataset.price || 0);
  86.                     });
  87.                     return total;
  88.                 }
  90.                 function updatePriceDisplay() {
  91.                     var optionsTotal = getSelectedOptionsTotal();
  92.                     var newNet = baseNet + optionsTotal;
  93.                     var newGross = newNet * (1 + taxRate / 100);
  94.                     var newDisplayPrice = displayIsNet ? newNet : newGross;
  96.                     if (priceElement) {
  97.                         priceElement.innerHTML = formatCurrency(newDisplayPrice) + '&nbsp;&euro;*';
  98.                     }
  100.                     if (grossLine) {
  101.                         var oldText = grossLine.textContent;
  102.                         grossLine.textContent = oldText.replace(
  103.                             /[\d.,]+\s*[\u00a0\s]*\u20ac/,
  104.                             formatCurrency(newGross) + '\u00a0\u20ac'
  105.                         );
  106.                     }
  107.                 }
  109.                 document.querySelectorAll('.dkc-product-option-radio, .dkc-product-option-checkbox').forEach(function(input) {
  110.                     input.addEventListener('change', updatePriceDisplay);
  111.                 });
  113.                 // Bei Reload: sofort pruefen ob etwas angehakt ist
  114.                 updatePriceDisplay();
  116.                 // === Warenkorb Submit-Handler ===
  117.                 addToCartForm.addEventListener('submit', function(event) {
  118.                     var selectedOptions = [];
  120.                     document.querySelectorAll('.dkc-product-option-radio').forEach(function(radio) {
  121.                         if (radio.checked && radio.value !== '') {
  122.                             selectedOptions.push({
  123.                                 id: radio.value,
  124.                                 name: radio.dataset.optionName,
  125.                                 price: parseFloat(radio.dataset.price || 0),
  126.                                 group: radio.dataset.group
  127.                             });
  128.                         }
  129.                     });
  131.                     document.querySelectorAll('.dkc-product-option-checkbox').forEach(function(cb) {
  132.                         if (cb.checked) {
  133.                             selectedOptions.push({
  134.                                 id: cb.value,
  135.                                 name: cb.dataset.optionName,
  136.                                 price: parseFloat(cb.dataset.price || 0),
  137.                                 group: cb.dataset.group
  138.                             });
  139.                         }
  140.                     });
  142.                     if (selectedOptions.length === 0) return;
  144.                     var lineItemKey = null;
  145.                     var lineItemRegex = /lineItems\[([^\]]+)\]/;
  146.                     var inputs = addToCartForm.querySelectorAll('input[name^="lineItems"]');
  147.                     for (var i = 0; i < inputs.length; i++) {
  148.                         var match = inputs[i].name.match(lineItemRegex);
  149.                         if (match && match[1]) {
  150.                             lineItemKey = match[1];
  151.                             break;
  152.                         }
  153.                     }
  154.                     if (!lineItemKey) return;
  156.                     addToCartForm.querySelectorAll('input[name*="dkc_product_options"]').forEach(function(el) { el.remove(); });
  158.                     var optionsInput = document.createElement('input');
  159.                     optionsInput.type = 'hidden';
  160.                     optionsInput.name = 'lineItems[' + lineItemKey + '][payload][dkc_product_options]';
  161.                     optionsInput.value = JSON.stringify(selectedOptions);
  162.                     addToCartForm.appendChild(optionsInput);
  164.                     var totalPrice = 0;
  165.                     for (var j = 0; j < selectedOptions.length; j++) {
  166.                         totalPrice += (selectedOptions[j].price || 0);
  167.                     }
  168.                     if (totalPrice > 0) {
  169.                         var priceInput = document.createElement('input');
  170.                         priceInput.type = 'hidden';
  171.                         priceInput.name = 'lineItems[' + lineItemKey + '][payload][dkc_product_options_price]';
  172.                         priceInput.value = totalPrice.toString();
  173.                         addToCartForm.appendChild(priceInput);
  174.                     }
  176.                     var labels = [];
  177.                     for (var k = 0; k < selectedOptions.length; k++) {
  178.                         labels.push(selectedOptions[k].name);
  179.                     }
  180.                     if (labels.length > 0) {
  181.                         var labelsInput = document.createElement('input');
  182.                         labelsInput.type = 'hidden';
  183.                         labelsInput.name = 'lineItems[' + lineItemKey + '][payload][dkc_product_options_labels]';
  184.                         labelsInput.value = JSON.stringify(labels);
  185.                         addToCartForm.appendChild(labelsInput);
  186.                     }
  187.                 });
  188.             });
  189.         </script>
  190.     {% endif %}
  191. {% endblock %}