(() => { const calculatorIcon = ``; const calculatorId = "346de1a7-1876-49d9-a029-d19bf55e9135"; const showCalculator = (cards, price, planksPerPackData, plankWidth, plankHeight) => { const areaInputId = `${calculatorId}-area`; const wasteInputId = `${calculatorId}-waste`; const planksPerPackInputId = `${calculatorId}-planks-per-pack`; const plankWidthInputId = `${calculatorId}-plank-width`; const plankHeightInputId = `${calculatorId}-plank-height`; const packPriceInputId = `${calculatorId}-pack-price`; const advancedInputsId = `${calculatorId}-advanced-inputs`; const advancedOutputsId = `${calculatorId}-advanced-outputs`; const toggleDetailsId = `${calculatorId}-toggle-details`; const requiredAreaOutputId = `${calculatorId}-required-area`; const plankAreaOutputId = `${calculatorId}-plank-area`; const planksRequiredOutputId = `${calculatorId}-planks-required`; const packsRequiredOutputId = `${calculatorId}-packs-required`; const totalPriceOutputId = `${calculatorId}-total-price`; cards.insertAdjacentHTML("beforeend", `

${calculatorIcon}

Калькулятор укладання

Площа, м² Коефіцієнт підрізки, %

Вартість

—

`); const areaInput = document.getElementById(areaInputId); const wasteInput = document.getElementById(wasteInputId); const planksPerPackInput = document.getElementById(planksPerPackInputId); const plankWidthInput = document.getElementById(plankWidthInputId); const plankHeightInput = document.getElementById(plankHeightInputId); const packPriceInput = document.getElementById(packPriceInputId); const requiredAreaOutput = document.getElementById(requiredAreaOutputId); const plankAreaOutput = document.getElementById(plankAreaOutputId); const planksRequiredOutput = document.getElementById(planksRequiredOutputId); const packsRequiredOutput = document.getElementById(packsRequiredOutputId); const totalPriceOutput = document.getElementById(totalPriceOutputId); packPriceInput.value = price; planksPerPackInput.value = planksPerPackData; plankWidthInput.value = plankWidth; plankHeightInput.value = plankHeight; const advancedInputs = document.getElementById(advancedInputsId); const advancedOutputs = document.getElementById(advancedOutputsId); const toggleDetails = document.getElementById(toggleDetailsId); toggleDetails.addEventListener('click', () => { const isHidden = advancedInputs.classList.contains('hidden'); advancedInputs.classList.toggle('hidden', !isHidden); advancedOutputs.classList.toggle('hidden', !isHidden); toggleDetails.textContent = isHidden ? 'Показати менше' : 'Показати більше'; }); const calculateFlooring = () => { const area = Number(areaInput.value); const wastePercent = Number(wasteInput.value); const planksPerPack = Number(planksPerPackInput.value); const plankWidth = Number(plankWidthInput.value); const plankHeight = Number(plankHeightInput.value); const packPrice = Number(packPriceInput.value); if ( area <= 0 || wastePercent < 0 || planksPerPack <= 0 || plankWidth <= 0 || plankHeight <= 0 ) { requiredAreaOutput.textContent = '—'; plankAreaOutput.textContent = '—'; planksRequiredOutput.textContent = '—'; packsRequiredOutput.textContent = '—'; totalPriceOutput.textContent = '—'; return; } // Convert mm to metres and calculate the area of one plank. const plankArea = (plankWidth / 1000) * (plankHeight / 1000); // Convert percentage to a multiplier. // For example: 10% -> 1.10 const wasteCoefficient = 1 + wastePercent / 100; // Add the cutting/waste allowance. const requiredArea = area * wasteCoefficient; // Round up because you can't buy a fraction of a plank. const planksRequired = Math.ceil(requiredArea / plankArea); // Round up because you can't buy a fraction of a pack. const packsRequired = Math.ceil(planksRequired / planksPerPack); // Calculate the total price if a pack price was provided. const totalPrice = packPrice > 0 ? packsRequired * packPrice : null; requiredAreaOutput.textContent = `${requiredArea.toFixed(2)} м²`; plankAreaOutput.textContent = `${plankArea.toFixed(3)} м²`; planksRequiredOutput.textContent = `${planksRequired} шт.`; packsRequiredOutput.textContent = `${packsRequired} уп.`; totalPriceOutput.textContent = totalPrice !== null ? `${totalPrice.toFixed(2)} грн` : '—'; }; [ areaInput, wasteInput, planksPerPackInput, plankWidthInput, plankHeightInput, packPriceInput ].forEach((input) => { input.addEventListener('input', calculateFlooring); }); calculateFlooring(); } const onUrlChange = async () => { if (!location.pathname.startsWith("/product/tovari-laminat-") && !location.pathname.startsWith("/product/tovari-vinilova-pidloga-")) return; while (document.getElementById(calculatorId) != null) await new Promise(r => setTimeout(r, 0)); const selector = "#__next > main > div:nth-child(3) > section > div:nth-child(2) > div > div:nth-child(2) > div"; let cards = document.querySelector(selector); while (cards == null) { cards = document.querySelector(selector); await new Promise(r => setTimeout(r, 0)); } let price = document.querySelector(".text-2xl").innerText; price = Number(price.slice(0, price.length - 2).replace(",", ".").replaceAll(/\s/g, "")); let planksPerPack; let plankWidth; let plankHeight; document.querySelector("div.text-sm:nth-child(1)").click(); await new Promise((r) => setTimeout(r, 100)); const table = document.querySelector(".table-auto > tbody:nth-child(2)"); for (const i of table.childNodes) { if (i.childNodes[0].innerText == "Кількість в упаковці") { planksPerPack = Number(i.childNodes[1].innerText.replace(" шт", "")); } if (i.childNodes[0].innerText == "Розмір планки") { let dimensions = i.childNodes[1].innerText.replace("мм", ""); if (dimensions.endsWith(' ')) dimensions = dimensions.slice(0, dimensions.length - 1); if (dimensions.includes('х')) { [plankWidth, plankHeight] = dimensions.split("х"); } else if (dimensions.includes('*')) { [plankWidth, plankHeight] = dimensions.split("*"); } plankWidth = Number(plankWidth); plankHeight = Number(plankHeight); } } document.querySelector("div.text-sm:nth-child(1)").click(); showCalculator(cards, price, planksPerPack, plankWidth, plankHeight); }; const originalPushState = history.pushState; history.pushState = function (...args) { const result = originalPushState.apply(this, args); onUrlChange(); return result; }; const originalReplaceState = history.replaceState; history.replaceState = function (...args) { const result = originalReplaceState.apply(this, args); onUrlChange(); return result; }; window.addEventListener('popstate', onUrlChange); window.addEventListener('hashchange', onUrlChange); // Initial page onUrlChange(); })();

Герметик