Analyzing checkout flow...

'; placeholder.classList.remove('hidden'); resultsContainer.classList.add('hidden'); setTimeout(() => { const analysis = analyzeCheckout(); renderResults(analysis); placeholder.classList.add('hidden'); resultsContainer.classList.remove('hidden'); }, 1500); }; const analyzeCheckout = () => { let score = 0; const strengths = []; const weaknesses = []; // 1. Form Fields (40 points) const fields = parseInt(formFieldsInput.value) || 15; if (fields <= 8) { score += 40; strengths.push("Low number of form fields reduces friction."); } else if (fields <= 12) { score += 25; weaknesses.push("Consider reducing form fields to below 8 for a faster experience."); } else { score += 10; weaknesses.push("High number of form fields can lead to high cart abandonment. Simplify the form."); } // 2. Guest Checkout (30 points) const guestCheckout = document.querySelector('input[name="guest-checkout"]:checked').value === 'yes'; if (guestCheckout) { score += 30; strengths.push("Guest checkout is available, which is excellent for new customers."); } else { weaknesses.push("Forcing account creation is a major conversion killer. Offer a guest checkout option."); } // 3. Payment Options (20 points) const paymentOptions = parseInt(paymentOptionsInput.value) || 1; if (paymentOptions >= 4) { score += 20; strengths.push("Multiple payment options (e.g., PayPal, Apple Pay) cater to diverse customer preferences."); } else if (paymentOptions >= 2) { score += 10; strengths.push("Offers standard credit card payments."); weaknesses.push("Add digital wallets like PayPal or Apple Pay to increase trust and convenience."); } else { weaknesses.push("Only one payment option is very restrictive. Add more choices."); } // 4. Single Page Checkout (10 points) const singlePage = document.querySelector('input[name="single-page"]:checked').value === 'yes'; if (singlePage) { score += 10; strengths.push("Single-page checkout simplifies the process for users."); } else { weaknesses.push("A multi-page checkout can feel long. Consider testing a single-page or accordion-style layout."); } return { score, strengths, weaknesses }; }; const renderResults = (analysis) => { scoreText.textContent = analysis.score; const angle = analysis.score * 3.6; progressBar.style.background = `conic-gradient(#2563eb ${angle}deg, #e5e7eb ${angle}deg)`; strengthsList.innerHTML = analysis.strengths.map(s => `

${s}

`).join(''); if (analysis.strengths.length === 0) strengthsList.innerHTML = `

No significant strengths identified.

`; weaknessesList.innerHTML = analysis.weaknesses.map(w => `

${w}

`).join(''); if (analysis.weaknesses.length === 0) weaknessesList.innerHTML = `

No major weaknesses identified. Well done!

`; }; const handleDownloadPdf = () => { const pdfContentEl = document.getElementById('pdf-content'); if (!pdfContentEl) return; const analysis = analyzeCheckout(); // Populate PDF document.getElementById('pdf-timestamp').textContent = new Date().toLocaleString('en-US'); document.getElementById('pdf-score').textContent = analysis.score; document.getElementById('pdf-inputs').innerHTML = `

Form Fields: ${formFieldsInput.value}

Guest Checkout: ${document.querySelector('input[name="guest-checkout"]:checked').value}

Payment Options: ${paymentOptionsInput.value}

Single Page: ${document.querySelector('input[name="single-page"]:checked').value}

`; document.getElementById('pdf-strengths-list').innerHTML = `

${analysis.strengths.map(s => `
• • ${s}
`).join('')}

`; document.getElementById('pdf-weaknesses-list').innerHTML = `

${analysis.weaknesses.map(w => `
• • ${w}
`).join('')}

`; pdfContentEl.classList.remove('hidden'); html2canvas(pdfContentEl, { scale: 2 }).then(canvas => { pdfContentEl.classList.add('hidden'); const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'portrait', unit: 'pt', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const margin = 40; const imgWidth = pdfWidth - (margin * 2); const imgHeight = (canvas.height * imgWidth) / canvas.width; pdf.addImage(imgData, 'PNG', margin, margin, imgWidth, imgHeight); pdf.save('checkout-optimization-report.pdf'); }).catch(err => { console.error("Error generating PDF:", err); pdfContentEl.classList.add('hidden'); }); }; // --- Event Listeners --- analyzeBtn.addEventListener('click', handleAnalysis); pdfBtn.addEventListener('click', handleDownloadPdf); });