Cotizador de Lonas de PVC

const quoteState = { product: 'Lonas de PVC', selections: {}, prices: {}, total: 0 }; const formatCurrency = (value) => new Intl.NumberFormat('es-CL', { style: 'currency', currency: 'CLP', minimumFractionDigits: 0 }).format(value); const calculateAndUpdate = () => { let tempS = { 'Producto': quoteState.product }, tempP = {}, total = 0; const getVal = id => widget.querySelector('#' + id) ? widget.querySelector('#' + id).value : 0; const isCheck = id => widget.querySelector('#' + id) ? widget.querySelector('#' + id).checked : false; const l_w = parseFloat(getVal('lona_width')) || 0, l_l = parseFloat(getVal('lona_length')) || 0, l_a = l_w * l_l, l_p = (l_w + l_l) * 2; const l_color = widget.querySelector('.lona-colors .color-swatch.selected'); tempS['Dimensiones'] = `${l_w}m x ${l_l}m (${l_a.toFixed(2)} m²)`; if (l_color) tempS['Color'] = l_color.dataset.colorNombre; let l_costo = l_a * 6000; tempP['Costo Lona'] = l_costo; total += l_costo; if (l_w > 2) { const seams = Math.floor((l_w - 0.01) / 2); const cost = seams * l_l * 2000; if (cost > 0) { tempP[`${seams} Union(es) Central(es)`] = cost; total += cost; } } if (isCheck('lona_termosellado')) { const cost = l_p * 2000; tempP['Refuerzo Perimetral'] = cost; total += cost; } if (isCheck('lona_ojetillos')) { const count = Math.ceil(l_p / 0.5); const cost = count * 300; if(cost>0) {tempP[`${count} Ojetillos`] = cost; total += cost;} } quoteState.selections = tempS; quoteState.prices = tempP; quoteState.total = total; updateSummary(); }; const updateSummary = () => { let summaryHtml = '', priceHtml = ''; if (Object.keys(quoteState.selections).length > 1 && quoteState.total > 0) { summaryHtml = '

'; for (const [k, v] of Object.entries(quoteState.selections)) { summaryHtml += `
• ${k}: ${v}
`; } summaryHtml += '

'; } else { summaryHtml = '

Completa los pasos para ver tu resumen.

'; } for (const [k, v] of Object.entries(quoteState.prices)) { priceHtml += ``; } widget.querySelector('#detailedSummary').innerHTML = summaryHtml; widget.querySelector('#priceBreakdown').innerHTML = priceHtml; widget.querySelector('#totalPrice').textContent = formatCurrency(quoteState.total); }; widget.querySelectorAll('.config-input').forEach(input => { const eventType = (input.type === 'range' || input.type === 'number') ? 'input' : 'change'; input.addEventListener(eventType, calculateAndUpdate); }); widget.querySelectorAll('.lona-colors .color-swatch').forEach(el => el.addEventListener('click', (e) => { e.currentTarget.parentElement.querySelectorAll('.color-swatch').forEach(s => s.classList.remove('selected')); e.currentTarget.classList.add('selected'); calculateAndUpdate(); })); widget.querySelector('#send-whatsapp-btn').addEventListener('click', () => { const getVal = id => widget.querySelector('#' + id) ? widget.querySelector('#' + id).value : ''; const name = getVal('userName').trim(), email = getVal('userEmail').trim(), phone = getVal('userPhone').trim(); if (quoteState.total <= 0) { alert('Por favor, completa una cotización válida primero.'); return; } if (!name || !phone) { alert('Por favor, completa tu Nombre y Teléfono.'); return; } let msg = `*¡Hola! Quisiera solicitar la siguiente cotización:*\n\n*--- RESUMEN ---*\n`; for (const [k, v] of Object.entries(quoteState.selections)) { msg += `*${k}:* ${v}\n`; } if (Object.keys(quoteState.prices).length > 0) { msg += `\n*--- DESGLOSE ESTIMADO ---*\n`; for (const [k, v] of Object.entries(quoteState.prices)) { msg += `${k}: ${formatCurrency(v)}\n`; } } msg += `\n*TOTAL ESTIMADO: ${formatCurrency(quoteState.total)}*\n_(Precios IVA incluido)_\n\n*--- MIS DATOS ---*\n*Nombre:* ${name}\n*Teléfono:* ${phone}\n`; if (email) msg += `*Email:* ${email}\n`; msg += `\n_Mensaje generado desde el cotizador web._`; window.open(`https://api.whatsapp.com/send?phone=56939590875&text=${encodeURIComponent(msg)}`, '_blank'); }); calculateAndUpdate(); });