export function ecommerceWebsiteCalculator(form: FormTs) {
// Platform base costs
const platformCosts: Record<string, number> = {
'shopify': 5000,
'woocommerce': 6000,
'magento': 15000,
'bigcommerce': 7000,
'custom': 25000
};
// Store size multipliers
const sizeMultipliers: Record<string, number> = {
'starter': 0.7, // Under 50 products
'small': 1.0, // 50-200 products
'medium': 1.4, // 200-1000 products
'large': 2.0, // 1000-5000 products
'enterprise': 3.0 // 5000+ products
};
// Design level multipliers
const designMultipliers: Record<string, number> = {
'template': 0.6,
'customized': 1.0,
'custom': 1.8,
'premium': 2.5
};
form.addRow(row => {
row.addTextPanel('header', {
computedValue: () => 'E-commerce Website Cost Calculator',
customStyles: { 'font-size': '1.5rem', 'font-weight': '600', 'color': '#1e293b' }
});
});
form.addSpacer({ height: 20 });
// Platform & Store Size Section
const platformSection = form.addSubform('platform', { title: '🛒 Platform & Store Size' });
platformSection.addRow(row => {
row.addDropdown('platform', {
label: 'E-commerce Platform',
options: [
{ id: 'shopify', name: 'Shopify ($5,000+ base)' },
{ id: 'woocommerce', name: 'WooCommerce/WordPress ($6,000+ base)' },
{ id: 'bigcommerce', name: 'BigCommerce ($7,000+ base)' },
{ id: 'magento', name: 'Magento/Adobe Commerce ($15,000+ base)' },
{ id: 'custom', name: 'Custom Built ($25,000+ base)' }
],
defaultValue: 'shopify',
isRequired: true
}, '1fr');
});
platformSection.addRow(row => {
row.addRadioButton('storeSize', {
label: 'Store Size',
options: [
{ id: 'starter', name: 'Starter (under 50 products)' },
{ id: 'small', name: 'Small (50-200 products)' },
{ id: 'medium', name: 'Medium (200-1,000 products)' },
{ id: 'large', name: 'Large (1,000-5,000 products)' },
{ id: 'enterprise', name: 'Enterprise (5,000+ products)' }
],
defaultValue: 'small',
orientation: 'vertical',
isRequired: true
});
});
// Design Section
const designSection = form.addSubform('design', { title: '🎨 Design & Branding' });
designSection.addRow(row => {
row.addRadioButton('designLevel', {
label: 'Design Approach',
options: [
{ id: 'template', name: 'Template Theme (-40%) - Pre-made, minimal customization' },
{ id: 'customized', name: 'Customized Theme - Modified template, your branding' },
{ id: 'custom', name: 'Custom Design (+80%) - Unique design, built from scratch' },
{ id: 'premium', name: 'Premium/Award-worthy (+150%) - High-end, animations, interactions' }
],
defaultValue: 'customized',
orientation: 'vertical'
});
});
designSection.addRow(row => {
row.addCheckbox('mobileFirst', {
label: 'Mobile-First Design (Included)',
defaultValue: true,
isReadOnly: true
}, '1fr');
row.addCheckbox('brandingPackage', {
label: 'Branding Package (+$2,000-5,000)',
defaultValue: false
}, '1fr');
});
// Product Features Section
const productSection = form.addSubform('productFeatures', { title: '📦 Product Features' });
productSection.addRow(row => {
row.addCheckbox('productVariants', {
label: 'Product Variants (Size, Color, etc.)',
defaultValue: true
}, '1fr');
row.addCheckbox('productFilters', {
label: 'Advanced Filtering & Search (+$800)',
defaultValue: false
}, '1fr');
});
productSection.addRow(row => {
row.addCheckbox('productReviews', {
label: 'Customer Reviews System (+$500)',
defaultValue: true
}, '1fr');
row.addCheckbox('wishlist', {
label: 'Wishlist Functionality (+$400)',
defaultValue: false
}, '1fr');
});
productSection.addRow(row => {
row.addCheckbox('productCompare', {
label: 'Product Comparison (+$600)',
defaultValue: false
}, '1fr');
row.addCheckbox('quickView', {
label: 'Quick View Modal (+$400)',
defaultValue: true
}, '1fr');
});
productSection.addRow(row => {
row.addCheckbox('zoom360', {
label: '360° Product Views (+$1,500)',
defaultValue: false
}, '1fr');
row.addCheckbox('productVideos', {
label: 'Product Video Support (+$500)',
defaultValue: false
}, '1fr');
});
// Checkout & Payments Section
const checkoutSection = form.addSubform('checkout', { title: '💳 Checkout & Payments' });
checkoutSection.addRow(row => {
row.addCheckboxList('paymentGateways', {
label: 'Payment Methods',
options: [
{ id: 'stripe', name: 'Stripe' },
{ id: 'paypal', name: 'PayPal' },
{ id: 'square', name: 'Square' },
{ id: 'apple-google', name: 'Apple/Google Pay' },
{ id: 'klarna', name: 'Buy Now Pay Later (Klarna/Affirm)' }
],
defaultValue: ['stripe', 'paypal'],
orientation: 'vertical'
});
});
checkoutSection.addRow(row => {
row.addCheckbox('guestCheckout', {
label: 'Guest Checkout (Recommended)',
defaultValue: true
}, '1fr');
row.addCheckbox('onePageCheckout', {
label: 'One-Page Checkout (+$800)',
defaultValue: false
}, '1fr');
});
checkoutSection.addRow(row => {
row.addCheckbox('abandonedCart', {
label: 'Abandoned Cart Recovery (+$600)',
defaultValue: true
}, '1fr');
row.addCheckbox('subscriptions', {
label: 'Subscription/Recurring Orders (+$2,000)',
defaultValue: false
}, '1fr');
});
// Shipping & Tax Section
const shippingSection = form.addSubform('shipping', { title: '📦 Shipping & Tax' });
shippingSection.addRow(row => {
row.addCheckbox('shippingRates', {
label: 'Real-time Shipping Rates (+$500)',
defaultValue: true
}, '1fr');
row.addCheckbox('multiCarrier', {
label: 'Multi-Carrier Support (+$800)',
defaultValue: false
}, '1fr');
});
shippingSection.addRow(row => {
row.addCheckbox('taxCalculation', {
label: 'Automated Tax Calculation (+$400)',
defaultValue: true
}, '1fr');
row.addCheckbox('international', {
label: 'International Shipping (+$1,000)',
defaultValue: false
}, '1fr');
});
shippingSection.addRow(row => {
row.addCheckbox('storePickup', {
label: 'In-Store Pickup Option (+$500)',
defaultValue: false
}, '1fr');
row.addCheckbox('orderTracking', {
label: 'Order Tracking Page (+$400)',
defaultValue: true
}, '1fr');
});
// Marketing Features Section
const marketingSection = form.addSubform('marketing', { title: '📈 Marketing & SEO' });
marketingSection.addRow(row => {
row.addCheckbox('seoSetup', {
label: 'SEO Optimization (+$1,200)',
defaultValue: true
}, '1fr');
row.addCheckbox('emailMarketing', {
label: 'Email Marketing Integration (+$600)',
defaultValue: true
}, '1fr');
});
marketingSection.addRow(row => {
row.addCheckbox('discountCodes', {
label: 'Discount Codes & Promotions',
defaultValue: true
}, '1fr');
row.addCheckbox('loyaltyProgram', {
label: 'Loyalty/Rewards Program (+$2,500)',
defaultValue: false
}, '1fr');
});
marketingSection.addRow(row => {
row.addCheckbox('socialProof', {
label: 'Social Proof Widgets (+$500)',
defaultValue: false
}, '1fr');
row.addCheckbox('referralProgram', {
label: 'Referral Program (+$1,500)',
defaultValue: false
}, '1fr');
});
marketingSection.addRow(row => {
row.addCheckbox('analytics', {
label: 'Analytics & Conversion Tracking (+$600)',
defaultValue: true
}, '1fr');
row.addCheckbox('remarketing', {
label: 'Remarketing Pixel Setup (+$400)',
defaultValue: true
}, '1fr');
});
// Integrations Section
const integrationsSection = form.addSubform('integrations', { title: '🔌 Integrations' });
integrationsSection.addRow(row => {
row.addCheckbox('inventorySync', {
label: 'Inventory Management System (+$2,000)',
defaultValue: false
}, '1fr');
row.addCheckbox('erpIntegration', {
label: 'ERP Integration (+$5,000)',
defaultValue: false
}, '1fr');
});
integrationsSection.addRow(row => {
row.addCheckbox('crmIntegration', {
label: 'CRM Integration (+$1,500)',
defaultValue: false
}, '1fr');
row.addCheckbox('posIntegration', {
label: 'POS System Integration (+$2,500)',
defaultValue: false
}, '1fr');
});
integrationsSection.addRow(row => {
row.addCheckbox('marketplaces', {
label: 'Marketplace Sync (Amazon, eBay) (+$3,000)',
defaultValue: false
}, '1fr');
row.addCheckbox('dropshipping', {
label: 'Dropshipping Integration (+$1,500)',
defaultValue: false
}, '1fr');
});
// Content & Pages Section
const contentSection = form.addSubform('content', { title: '📄 Content & Pages' });
contentSection.addRow(row => {
row.addSlider('contentPages', {
label: 'Content Pages (About, Contact, FAQ, etc.)',
min: 3,
max: 20,
step: 1,
defaultValue: 5,
showValue: true,
unit: 'pages'
}, '1fr');
});
contentSection.addRow(row => {
row.addCheckbox('blog', {
label: 'Blog/News Section (+$1,000)',
defaultValue: false
}, '1fr');
row.addCheckbox('contentMigration', {
label: 'Content Migration from Existing Site (+$500-2,000)',
defaultValue: false
}, '1fr');
});
contentSection.addRow(row => {
row.addCheckbox('copywriting', {
label: 'Professional Copywriting (+$100/page)',
defaultValue: false
}, '1fr');
row.addCheckbox('productUpload', {
label: 'Product Data Upload Service (+$2/product)',
defaultValue: false
}, '1fr');
});
form.addSpacer({ height: 20, showLine: true, lineStyle: 'dashed' });
// Price Summary Section
const summarySection = form.addSubform('summary', { title: '💰 Your Estimate', isCollapsible: false });
const getBasePrice = () => {
const platform = platformSection.dropdown('platform')?.value() || 'shopify';
const size = platformSection.radioButton('storeSize')?.value() || 'small';
const design = designSection.radioButton('designLevel')?.value() || 'customized';
const base = platformCosts[platform] || 5000;
const sizeMult = sizeMultipliers[size] || 1;
const designMult = designMultipliers[design] || 1;
return base * sizeMult * designMult;
};
summarySection.addRow(row => {
row.addPriceDisplay('basePrice', {
label: 'Base Development Cost',
computedValue: () => Math.round(getBasePrice()),
variant: 'default'
}, '1fr');
});
summarySection.addRow(row => {
row.addPriceDisplay('productFeatures', {
label: 'Product Features',
computedValue: () => {
let total = 0;
if (productSection.checkbox('productFilters')?.value()) total += 800;
if (productSection.checkbox('productReviews')?.value()) total += 500;
if (productSection.checkbox('wishlist')?.value()) total += 400;
if (productSection.checkbox('productCompare')?.value()) total += 600;
if (productSection.checkbox('quickView')?.value()) total += 400;
if (productSection.checkbox('zoom360')?.value()) total += 1500;
if (productSection.checkbox('productVideos')?.value()) total += 500;
return total;
},
variant: 'default',
prefix: '+'
}, '1fr');
row.addPriceDisplay('checkoutFeatures', {
label: 'Checkout & Payment',
computedValue: () => {
let total = 0;
const gateways = checkoutSection.checkboxList('paymentGateways')?.value() || [];
if (gateways.length > 2) total += (gateways.length - 2) * 300;
if (checkoutSection.checkbox('onePageCheckout')?.value()) total += 800;
if (checkoutSection.checkbox('abandonedCart')?.value()) total += 600;
if (checkoutSection.checkbox('subscriptions')?.value()) total += 2000;
return total;
},
variant: 'default',
prefix: '+'
}, '1fr');
});
summarySection.addRow(row => {
row.addPriceDisplay('shippingFeatures', {
label: 'Shipping & Tax',
computedValue: () => {
let total = 0;
if (shippingSection.checkbox('shippingRates')?.value()) total += 500;
if (shippingSection.checkbox('multiCarrier')?.value()) total += 800;
if (shippingSection.checkbox('taxCalculation')?.value()) total += 400;
if (shippingSection.checkbox('international')?.value()) total += 1000;
if (shippingSection.checkbox('storePickup')?.value()) total += 500;
if (shippingSection.checkbox('orderTracking')?.value()) total += 400;
return total;
},
variant: 'default',
prefix: '+'
}, '1fr');
row.addPriceDisplay('marketingFeatures', {
label: 'Marketing & SEO',
computedValue: () => {
let total = 0;
if (marketingSection.checkbox('seoSetup')?.value()) total += 1200;
if (marketingSection.checkbox('emailMarketing')?.value()) total += 600;
if (marketingSection.checkbox('loyaltyProgram')?.value()) total += 2500;
if (marketingSection.checkbox('socialProof')?.value()) total += 500;
if (marketingSection.checkbox('referralProgram')?.value()) total += 1500;
if (marketingSection.checkbox('analytics')?.value()) total += 600;
if (marketingSection.checkbox('remarketing')?.value()) total += 400;
return total;
},
variant: 'default',
prefix: '+'
}, '1fr');
});
summarySection.addRow(row => {
row.addPriceDisplay('integrationsCost', {
label: 'Integrations',
computedValue: () => {
let total = 0;
if (integrationsSection.checkbox('inventorySync')?.value()) total += 2000;
if (integrationsSection.checkbox('erpIntegration')?.value()) total += 5000;
if (integrationsSection.checkbox('crmIntegration')?.value()) total += 1500;
if (integrationsSection.checkbox('posIntegration')?.value()) total += 2500;
if (integrationsSection.checkbox('marketplaces')?.value()) total += 3000;
if (integrationsSection.checkbox('dropshipping')?.value()) total += 1500;
return total;
},
variant: 'default',
prefix: '+'
}, '1fr');
row.addPriceDisplay('contentCost', {
label: 'Content & Services',
computedValue: () => {
let total = 0;
const pages = contentSection.slider('contentPages')?.value() || 5;
total += (pages - 3) * 200; // 3 pages included
if (contentSection.checkbox('blog')?.value()) total += 1000;
if (contentSection.checkbox('contentMigration')?.value()) total += 1000;
if (contentSection.checkbox('copywriting')?.value()) {
total += pages * 100;
}
if (contentSection.checkbox('productUpload')?.value()) {
const size = platformSection.radioButton('storeSize')?.value() || 'small';
const productEstimates: Record<string, number> = {
'starter': 25, 'small': 125, 'medium': 600, 'large': 3000, 'enterprise': 7500
};
total += (productEstimates[size] || 125) * 2;
}
if (designSection.checkbox('brandingPackage')?.value()) total += 3500;
return total;
},
variant: 'default',
prefix: '+'
}, '1fr');
});
summarySection.addSpacer({ showLine: true, lineStyle: 'solid', lineColor: '#e2e8f0' });
summarySection.addRow(row => {
row.addPriceDisplay('totalEstimate', {
label: 'Total Estimated Cost',
computedValue: () => {
let total = getBasePrice();
// Product features
if (productSection.checkbox('productFilters')?.value()) total += 800;
if (productSection.checkbox('productReviews')?.value()) total += 500;
if (productSection.checkbox('wishlist')?.value()) total += 400;
if (productSection.checkbox('productCompare')?.value()) total += 600;
if (productSection.checkbox('quickView')?.value()) total += 400;
if (productSection.checkbox('zoom360')?.value()) total += 1500;
if (productSection.checkbox('productVideos')?.value()) total += 500;
// Checkout
const gateways = checkoutSection.checkboxList('paymentGateways')?.value() || [];
if (gateways.length > 2) total += (gateways.length - 2) * 300;
if (checkoutSection.checkbox('onePageCheckout')?.value()) total += 800;
if (checkoutSection.checkbox('abandonedCart')?.value()) total += 600;
if (checkoutSection.checkbox('subscriptions')?.value()) total += 2000;
// Shipping
if (shippingSection.checkbox('shippingRates')?.value()) total += 500;
if (shippingSection.checkbox('multiCarrier')?.value()) total += 800;
if (shippingSection.checkbox('taxCalculation')?.value()) total += 400;
if (shippingSection.checkbox('international')?.value()) total += 1000;
if (shippingSection.checkbox('storePickup')?.value()) total += 500;
if (shippingSection.checkbox('orderTracking')?.value()) total += 400;
// Marketing
if (marketingSection.checkbox('seoSetup')?.value()) total += 1200;
if (marketingSection.checkbox('emailMarketing')?.value()) total += 600;
if (marketingSection.checkbox('loyaltyProgram')?.value()) total += 2500;
if (marketingSection.checkbox('socialProof')?.value()) total += 500;
if (marketingSection.checkbox('referralProgram')?.value()) total += 1500;
if (marketingSection.checkbox('analytics')?.value()) total += 600;
if (marketingSection.checkbox('remarketing')?.value()) total += 400;
// Integrations
if (integrationsSection.checkbox('inventorySync')?.value()) total += 2000;
if (integrationsSection.checkbox('erpIntegration')?.value()) total += 5000;
if (integrationsSection.checkbox('crmIntegration')?.value()) total += 1500;
if (integrationsSection.checkbox('posIntegration')?.value()) total += 2500;
if (integrationsSection.checkbox('marketplaces')?.value()) total += 3000;
if (integrationsSection.checkbox('dropshipping')?.value()) total += 1500;
// Content
const pages = contentSection.slider('contentPages')?.value() || 5;
total += (pages - 3) * 200;
if (contentSection.checkbox('blog')?.value()) total += 1000;
if (contentSection.checkbox('contentMigration')?.value()) total += 1000;
if (contentSection.checkbox('copywriting')?.value()) total += pages * 100;
if (contentSection.checkbox('productUpload')?.value()) {
const size = platformSection.radioButton('storeSize')?.value() || 'small';
const productEstimates: Record<string, number> = {
'starter': 25, 'small': 125, 'medium': 600, 'large': 3000, 'enterprise': 7500
};
total += (productEstimates[size] || 125) * 2;
}
if (designSection.checkbox('brandingPackage')?.value()) total += 3500;
return Math.round(total);
},
variant: 'large'
});
});
summarySection.addRow(row => {
row.addTextPanel('monthlyNote', {
computedValue: () => {
const platform = platformSection.dropdown('platform')?.value() || 'shopify';
const monthlyCosts: Record<string, string> = {
'shopify': 'Platform fees: $29-299/month + transaction fees',
'woocommerce': 'Hosting: $20-100/month + plugin subscriptions',
'bigcommerce': 'Platform fees: $29-299/month',
'magento': 'Hosting: $100-500/month (cloud) or Adobe Commerce licensing',
'custom': 'Hosting: $50-200/month + maintenance'
};
return monthlyCosts[platform] || '';
},
customStyles: { 'font-size': '0.9rem', 'color': '#059669' }
});
});
const finalSection = form.addSubform('final', {
title: '🧾 Summary',
isCollapsible: false,
sticky: 'bottom'
});
finalSection.addRow(row => {
row.addPriceDisplay('totalEstimate', {
label: 'Total Estimated Cost',
computedValue: () => {
let total = getBasePrice();
if (productSection.checkbox('productFilters')?.value()) total += 800;
if (productSection.checkbox('productReviews')?.value()) total += 500;
if (productSection.checkbox('wishlist')?.value()) total += 400;
if (productSection.checkbox('productCompare')?.value()) total += 600;
if (productSection.checkbox('quickView')?.value()) total += 400;
if (productSection.checkbox('zoom360')?.value()) total += 1500;
if (productSection.checkbox('productVideos')?.value()) total += 500;
const gateways = checkoutSection.checkboxList('paymentGateways')?.value() || [];
if (gateways.length > 2) total += (gateways.length - 2) * 300;
if (checkoutSection.checkbox('onePageCheckout')?.value()) total += 800;
if (checkoutSection.checkbox('abandonedCart')?.value()) total += 600;
if (checkoutSection.checkbox('subscriptions')?.value()) total += 2000;
if (shippingSection.checkbox('shippingRates')?.value()) total += 500;
if (shippingSection.checkbox('multiCarrier')?.value()) total += 800;
if (shippingSection.checkbox('taxCalculation')?.value()) total += 400;
if (shippingSection.checkbox('international')?.value()) total += 1000;
if (shippingSection.checkbox('storePickup')?.value()) total += 500;
if (shippingSection.checkbox('orderTracking')?.value()) total += 400;
if (marketingSection.checkbox('seoSetup')?.value()) total += 1200;
if (marketingSection.checkbox('emailMarketing')?.value()) total += 600;
if (marketingSection.checkbox('loyaltyProgram')?.value()) total += 2500;
if (marketingSection.checkbox('socialProof')?.value()) total += 500;
if (marketingSection.checkbox('referralProgram')?.value()) total += 1500;
if (marketingSection.checkbox('analytics')?.value()) total += 600;
if (marketingSection.checkbox('remarketing')?.value()) total += 400;
if (integrationsSection.checkbox('inventorySync')?.value()) total += 2000;
if (integrationsSection.checkbox('erpIntegration')?.value()) total += 5000;
if (integrationsSection.checkbox('crmIntegration')?.value()) total += 1500;
if (integrationsSection.checkbox('posIntegration')?.value()) total += 2500;
if (integrationsSection.checkbox('marketplaces')?.value()) total += 3000;
if (integrationsSection.checkbox('dropshipping')?.value()) total += 1500;
const pages = contentSection.slider('contentPages')?.value() || 5;
total += (pages - 3) * 200;
if (contentSection.checkbox('blog')?.value()) total += 1000;
if (contentSection.checkbox('contentMigration')?.value()) total += 1000;
if (contentSection.checkbox('copywriting')?.value()) total += pages * 100;
if (contentSection.checkbox('productUpload')?.value()) {
const size = platformSection.radioButton('storeSize')?.value() || 'small';
const productEstimates: Record<string, number> = {
'starter': 25, 'small': 125, 'medium': 600, 'large': 3000, 'enterprise': 7500
};
total += (productEstimates[size] || 125) * 2;
}
if (designSection.checkbox('brandingPackage')?.value()) total += 3500;
return Math.round(total);
},
variant: 'large'
});
});
finalSection.addRow(row => {
row.addTextPanel('disclaimer', {
computedValue: () => 'Final pricing after discovery call.',
customStyles: { 'font-size': '0.85rem', 'color': '#64748b', 'font-style': 'italic' }
});
});
form.configureSubmitButton({
label: 'Schedule Discovery Call'
});
}