Show total savings vs monthly in steps 3 and 4 — big green number showing real € saved
This commit is contained in:
@@ -171,7 +171,8 @@ footer{padding:2.5rem 3rem;border-top:1px solid var(--border);display:flex;justi
|
|||||||
<div class="summary-row"><span id="s3-setup-label">Website setup (one-time)</span><span class="summary-val" id="s3-setup-price">—</span></div>
|
<div class="summary-row"><span id="s3-setup-label">Website setup (one-time)</span><span class="summary-val" id="s3-setup-price">—</span></div>
|
||||||
<div class="summary-row"><span id="s3-support-label">Support plan</span><span class="summary-val" id="s3-support-price">—</span></div>
|
<div class="summary-row"><span id="s3-support-label">Support plan</span><span class="summary-val" id="s3-support-price">—</span></div>
|
||||||
<div class="summary-row"><span id="s3-freq-label">—</span><span class="summary-val" id="s3-freq-price">—</span></div>
|
<div class="summary-row"><span id="s3-freq-label">—</span><span class="summary-val" id="s3-freq-price">—</span></div>
|
||||||
<div class="summary-row total"><span id="s3-total-label">Due today</span><span class="summary-val" id="s3-total">—</span></div>
|
<div class="summary-row"><span id="s3-savings-label">—</span><span class="summary-val" id="s3-savings-val" style="color:#4ade80;font-weight:700">—</span></div>
|
||||||
|
<div class="summary-row total"><span>Due today</span><span class="summary-val" id="s3-total">—</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="wizard-nav"><button class="wizard-btn" onclick="goStep(2)">← Back</button><button class="wizard-btn primary" id="btnStep3" onclick="goStep(4)" disabled>See Summary →</button></div>
|
<div class="wizard-nav"><button class="wizard-btn" onclick="goStep(2)">← Back</button><button class="wizard-btn primary" id="btnStep3" onclick="goStep(4)" disabled>See Summary →</button></div>
|
||||||
</div>
|
</div>
|
||||||
@@ -186,6 +187,7 @@ footer{padding:2.5rem 3rem;border-top:1px solid var(--border);display:flex;justi
|
|||||||
<div class="summary-row"><span>Support plan</span><span class="summary-val" id="s4-support">—</span></div>
|
<div class="summary-row"><span>Support plan</span><span class="summary-val" id="s4-support">—</span></div>
|
||||||
<div class="summary-row"><span>Support payment</span><span class="summary-val" id="s4-pay">—</span></div>
|
<div class="summary-row"><span>Support payment</span><span class="summary-val" id="s4-pay">—</span></div>
|
||||||
<div class="summary-row"><span>Commitment</span><span class="summary-val" id="s4-commitment">—</span></div>
|
<div class="summary-row"><span>Commitment</span><span class="summary-val" id="s4-commitment">—</span></div>
|
||||||
|
<div class="summary-row"><span id="s4-savings-label">Savings vs monthly</span><span class="summary-val" id="s4-savings-val" style="color:#4ade80;font-weight:700">—</span></div>
|
||||||
<div class="summary-row total"><span>Due today</span><span class="summary-val" id="s4-grand">—</span></div>
|
<div class="summary-row total"><span>Due today</span><span class="summary-val" id="s4-grand">—</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="wizard-nav"><button class="wizard-btn" onclick="goStep(3)">← Edit</button><button class="wizard-btn primary" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})">Start Your Website →</button></div>
|
<div class="wizard-nav"><button class="wizard-btn" onclick="goStep(3)">← Edit</button><button class="wizard-btn primary" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})">Start Your Website →</button></div>
|
||||||
@@ -240,7 +242,7 @@ function setPayFreq(f){selectedFreq=f;document.getElementById('toggleMonthly').c
|
|||||||
function getMonthlyPayment(){if(!selectedPlan||!selectedSupport||!selectedDuration)return 0;var disc=durationDiscounts[selectedDuration];return Math.round(supportPrices[selectedSupport]*(1-disc));}
|
function getMonthlyPayment(){if(!selectedPlan||!selectedSupport||!selectedDuration)return 0;var disc=durationDiscounts[selectedDuration];return Math.round(supportPrices[selectedSupport]*(1-disc));}
|
||||||
function getTotalToday(){if(!selectedPlan||!selectedSupport||!selectedDuration)return 0;var disc=durationDiscounts[selectedDuration];var monthlySupport=Math.round(supportPrices[selectedSupport]*(1-disc));if(selectedFreq==='monthly'){return planPrices[selectedPlan]+monthlySupport;}else{return planPrices[selectedPlan]+Math.round(supportPrices[selectedSupport]*durationMonths[selectedDuration]*(1-disc));}}
|
function getTotalToday(){if(!selectedPlan||!selectedSupport||!selectedDuration)return 0;var disc=durationDiscounts[selectedDuration];var monthlySupport=Math.round(supportPrices[selectedSupport]*(1-disc));if(selectedFreq==='monthly'){return planPrices[selectedPlan]+monthlySupport;}else{return planPrices[selectedPlan]+Math.round(supportPrices[selectedSupport]*durationMonths[selectedDuration]*(1-disc));}}
|
||||||
|
|
||||||
function updateAllSummaries(){if(!selectedPlan||!selectedSupport||!selectedDuration)return;var sitePrice=planPrices[selectedPlan];var supportPrice=supportPrices[selectedSupport];var disc=durationDiscounts[selectedDuration];var totalToday=getTotalToday();var monthlyPay=getMonthlyPayment();var saveAmt=selectedFreq==='annual'?Math.round(supportPrice*durationMonths[selectedDuration]*disc):0;var commitment=selectedDuration===1?'12 months':selectedDuration===2?'24 months (5% off support)':'36 months (10% off support)';var freqLabel=selectedFreq==='annual'?'Annual (~'+Math.round(monthlyPay)+'/mo, save €'+saveAmt+')':'Monthly';document.getElementById('s2-setup-label').textContent='Website: '+planNames[selectedPlan];document.getElementById('s2-setup-price').textContent='€'+sitePrice+' (one-time)';document.getElementById('s2-support-label').textContent='Support: '+supportLabels[selectedSupport];document.getElementById('s2-support-price').textContent='€'+supportPrice+'/mo';document.getElementById('s2-monthly-total').textContent='€'+(sitePrice+supportPrice);document.getElementById('s3-setup-label').textContent='Website: '+planNames[selectedPlan];document.getElementById('s3-setup-price').textContent='€'+sitePrice+' one-time';document.getElementById('s3-support-label').textContent=supportLabels[selectedSupport];document.getElementById('s3-support-price').textContent='€'+supportPrice+'/mo';document.getElementById('s3-freq-label').textContent=freqLabel;document.getElementById('s3-freq-price').textContent='€'+monthlyPay+'/mo';document.getElementById('s3-total-label').textContent='Due today';document.getElementById('s3-total').textContent='€'+totalToday;if(selectedDuration===2){document.getElementById('dur-2').querySelector('.dur-desc').textContent='~€'+monthlyPay+'/mo. Save ~€'+saveAmt+' over 2 years.';}if(selectedDuration===3){document.getElementById('dur-3').querySelector('.dur-desc').textContent='~€'+monthlyPay+'/mo. Save ~€'+saveAmt+' over 3 years.';}document.getElementById('s4-plan').textContent=planNames[selectedPlan];document.getElementById('s4-site').textContent='€'+sitePrice;document.getElementById('s4-support').textContent=supportLabels[selectedSupport];document.getElementById('s4-commitment').textContent=commitment;document.getElementById('s4-pay').textContent=freqLabel;document.getElementById('s4-grand').textContent='€'+totalToday;document.getElementById('wizard_plan').value=planNames[selectedPlan];document.getElementById('wizard_support').value=supportLabels[selectedSupport];document.getElementById('wizard_duration').value=durationLabels[selectedDuration];document.getElementById('wizard_freq').value=freqLabel;document.getElementById('wizard_total').value='€'+totalToday;}
|
function updateAllSummaries(){if(!selectedPlan||!selectedSupport||!selectedDuration)return;var sitePrice=planPrices[selectedPlan];var supportPrice=supportPrices[selectedSupport];var disc=durationDiscounts[selectedDuration];var totalToday=getTotalToday();var monthlyPay=getMonthlyPayment();var saveAmt=selectedFreq==='annual'?Math.round(supportPrice*durationMonths[selectedDuration]*disc):0;var commitment=selectedDuration===1?'12 months':selectedDuration===2?'24 months (5% off support)':'36 months (10% off support)';var freqLabel=selectedFreq==='annual'?'Annual (~'+Math.round(monthlyPay)+'/mo, save €'+saveAmt+')':'Monthly';document.getElementById('s2-setup-label').textContent='Website: '+planNames[selectedPlan];document.getElementById('s2-setup-price').textContent='€'+sitePrice+' (one-time)';document.getElementById('s2-support-label').textContent='Support: '+supportLabels[selectedSupport];document.getElementById('s2-support-price').textContent='€'+supportPrice+'/mo';document.getElementById('s2-monthly-total').textContent='€'+(sitePrice+supportPrice);document.getElementById('s3-setup-label').textContent='Website: '+planNames[selectedPlan];document.getElementById('s3-setup-price').textContent='€'+sitePrice+' one-time';document.getElementById('s3-support-label').textContent=supportLabels[selectedSupport];document.getElementById('s3-support-price').textContent='€'+supportPrice+'/mo';document.getElementById('s3-freq-label').textContent=freqLabel;document.getElementById('s3-freq-price').textContent='€'+monthlyPay+'/mo';document.getElementById('s3-total-label').textContent='Due today';document.getElementById('s3-total').textContent='€'+totalToday;var totalSavings=0;if(selectedDuration>1){var monthlyTotalSupport=supportPrices[selectedSupport]*durationMonths[selectedDuration];var discountedTotal=Math.round(supportPrices[selectedSupport]*durationMonths[selectedDuration]*(1-disc));totalSavings=monthlyTotalSupport-discountedTotal;document.getElementById('s3-savings-label').textContent='Total savings vs monthly';document.getElementById('s3-savings-val').textContent='-€'+totalSavings+' ('+Math.round(disc*100)+'% off support)';}else{document.getElementById('s3-savings-label').textContent='Savings';document.getElementById('s3-savings-val').textContent='—';}if(selectedDuration===2){document.getElementById('dur-2').querySelector('.dur-desc').textContent='~€'+monthlyPay+'/mo. Save €'+totalSavings+' over 2 years.';}if(selectedDuration===3){document.getElementById('dur-3').querySelector('.dur-desc').textContent='~€'+monthlyPay+'/mo. Save €'+totalSavings+' over 3 years.';}document.getElementById('s4-plan').textContent=planNames[selectedPlan];document.getElementById('s4-site').textContent='€'+sitePrice;document.getElementById('s4-support').textContent=supportLabels[selectedSupport];document.getElementById('s4-commitment').textContent=commitment;document.getElementById('s4-pay').textContent=freqLabel;document.getElementById('s4-grand').textContent='€'+totalToday;if(selectedDuration>1){var monthlyTotal=supportPrices[selectedSupport]*durationMonths[selectedDuration];var disc=durationDiscounts[selectedDuration];var totalSav2=Math.round(monthlyTotal*(1-(1-disc)));document.getElementById('s4-savings-label').textContent='Total savings vs monthly';document.getElementById('s4-savings-val').textContent='-€'+totalSav2;}else{document.getElementById('s4-savings-label').textContent='Savings vs monthly';document.getElementById('s4-savings-val').textContent='—';}document.getElementById('wizard_plan').value=planNames[selectedPlan];document.getElementById('wizard_support').value=supportLabels[selectedSupport];document.getElementById('wizard_duration').value=durationLabels[selectedDuration];document.getElementById('wizard_freq').value=freqLabel;document.getElementById('wizard_total').value='€'+totalToday;}
|
||||||
|
|
||||||
function goStep(n){document.querySelectorAll('.wizard-panel').forEach(function(p){p.classList.remove('active')});document.getElementById('panel'+n).classList.add('active');for(var i=1;i<=4;i++){var ind=document.getElementById('step'+i+'Indicator');ind.classList.remove('active','done');if(i<n)ind.classList.add('done');if(i===n)ind.classList.add('active');}if(n===4)updateAllSummaries();document.getElementById('pricing').scrollIntoView({behavior:'smooth',block:'start'});}
|
function goStep(n){document.querySelectorAll('.wizard-panel').forEach(function(p){p.classList.remove('active')});document.getElementById('panel'+n).classList.add('active');for(var i=1;i<=4;i++){var ind=document.getElementById('step'+i+'Indicator');ind.classList.remove('active','done');if(i<n)ind.classList.add('done');if(i===n)ind.classList.add('active');}if(n===4)updateAllSummaries();document.getElementById('pricing').scrollIntoView({behavior:'smooth',block:'start'});}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user