Affiliate Product Comparison Table Generator
Affiliate Product Comparison Table Generator
Create beautiful, responsive comparison tables for your affiliate products.
Customize the design, add buy buttons, and generate SEO-optimized HTML code
for your Blogger.com posts.
`;
// Generate HTML table
let htmlTable = `
${tableTitle}
${tableDescription}
| Product |
Description |
Price |
Action |
`;
products.forEach(product => {
htmlTable += `
${product.imageUrl ? ` ` : ''}
${product.title}
|
${product.description || 'N/A'} |
$${product.price} |
Buy Now
|
`;
});
htmlTable += `
`;
// Combine everything
const fullHtml = `${schemaMarkup}\n\n${htmlTable}`;
generatedCode.value = fullHtml;
// Enable copy and download buttons
copyCodeBtn.disabled = false;
downloadCodeBtn.disabled = false;
// Show success message
alert('HTML code generated successfully!');
});
// Copy HTML code
copyCodeBtn.addEventListener('click', function() {
if (!generatedCode.value) {
alert('No code to copy. Please generate the HTML first.');
return;
}
generatedCode.select();
document.execCommand('copy');
// Change button text temporarily
const originalText = this.innerHTML;
this.innerHTML = '
Copied!';
setTimeout(() => {
this.innerHTML = originalText;
}, 2000);
});
// Download HTML code
downloadCodeBtn.addEventListener('click', function() {
if (!generatedCode.value) {
alert('No code to download. Please generate the HTML first.');
return;
}
const blob = new Blob([generatedCode.value], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'affiliate-comparison-table.html';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
});
// Preview table
previewTableBtn.addEventListener('click', function() {
if (products.length === 0) {
alert('Please add at least one product');
return;
}
// Generate a preview version without schema markup
const tableTitle = document.getElementById('table-title').value.trim() || 'Product Comparison';
const tableDescription = document.getElementById('table-description').value.trim() ||
'Compare these top products and choose the best one for your needs.';
const borderStyle = document.getElementById('border-style').value;
let htmlTable = `
${tableTitle}
${tableDescription}
| Product |
Description |
Price |
Action |
`;
products.forEach(product => {
htmlTable += `
|
${product.imageUrl ? `` : ''}
${product.title}
|
${product.description || 'N/A'} |
$${product.price} |
Buy Now
|
`;
});
htmlTable += `
`;
tablePreview.innerHTML = htmlTable;
previewSection.style.display = 'block';
// Prevent actual navigation for preview buttons
tablePreview.querySelectorAll('.buy-now').forEach(btn => {
btn.addEventListener('click', function(e) {
e.preventDefault();
alert('In a real implementation, this would link to your affiliate URL.');
});
});
});
// Share buttons
document.getElementById('share-whatsapp').addEventListener('click', function(e) {
e.preventDefault();
if (!generatedCode.value) {
alert('Please generate the HTML code first.');
return;
}
const text = "Check out this affiliate product comparison table I created!";
const url = encodeURIComponent(window.location.href);
window.open(`https://wa.me/?text=${text}%20${url}`, '_blank');
});
document.getElementById('share-telegram').addEventListener('click', function(e) {
e.preventDefault();
if (!generatedCode.value) {
alert('Please generate the HTML code first.');
return;
}
const text = "Check out this affiliate product comparison table I created!";
const url = encodeURIComponent(window.location.href);
window.open(`https://t.me/share/url?url=${url}&text=${text}`, '_blank');
});
document.getElementById('share-twitter').addEventListener('click', function(e) {
e.preventDefault();
if (!generatedCode.value) {
alert('Please generate the HTML code first.');
return;
}
const text = "Check out this affiliate product comparison table I created!";
const url = encodeURIComponent(window.location.href);
window.open(`https://twitter.com/intent/tweet?text=${text}&url=${url}`, '_blank');
});
});
.jpg)
0 Comments