Spaces:
Running
Running
File size: 4,406 Bytes
35f4881 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
document.addEventListener('DOMContentLoaded', function() {
// Modal functionality
const callbackBtn = document.getElementById('callbackBtn');
const callbackModal = document.getElementById('callbackModal');
const closeModal = document.getElementById('closeModal');
const callbackForm = document.getElementById('callbackForm');
// Mobile sticky footer bar
const stickyFooterBar = document.createElement('div');
stickyFooterBar.className = 'sticky-footer-bar';
stickyFooterBar.innerHTML = `
<a href="tel:+1234567890" class="call-btn" data-tracking="sticky_bar_click">
<i data-feather="phone" class="mr-1"></i> Call Now
</a>
<button id="stickyQuoteBtn" class="quote-btn">
<i data-feather="message-square" class="mr-1"></i> Free Quote
</button>
`;
// Add sticky footer bar to body
document.body.appendChild(stickyFooterBar);
// Initialize Feather icons in sticky bar
feather.replace();
// Modal open/close
callbackBtn.addEventListener('click', function() {
callbackModal.classList.remove('hidden');
document.body.style.overflow = 'hidden';
trackEvent('cta_click_secondary', { variant: 'A' });
});
closeModal.addEventListener('click', function() {
callbackModal.classList.add('hidden');
document.body.style.overflow = 'auto';
});
// Close modal when clicking outside
callbackModal.addEventListener('click', function(e) {
if (e.target === callbackModal) {
callbackModal.classList.add('hidden');
document.body.style.overflow = 'auto';
}
});
// Sticky bar quote button
document.getElementById('stickyQuoteBtn').addEventListener('click', function() {
callbackModal.classList.remove('hidden');
document.body.style.overflow = 'hidden';
trackEvent('sticky_bar_click', { variant: 'A' });
});
// Form submission
callbackForm.addEventListener('submit', function(e) {
e.preventDefault();
// In a real implementation, you would submit the form data here
alert('Thank you! We will call you within 5 minutes.');
callbackModal.classList.add('hidden');
document.body.style.overflow = 'auto';
trackEvent('form_submit', { variant: 'A' });
});
// Track CTA clicks
document.querySelectorAll('[data-tracking]').forEach(element => {
element.addEventListener('click', function() {
const event = this.getAttribute('data-tracking');
const variant = this.getAttribute('data-variant') || 'A';
trackEvent(event, { variant });
});
});
// Form validation
const formInputs = callbackForm.querySelectorAll('input');
formInputs.forEach(input => {
input.addEventListener('blur', function() {
validateField(this);
});
});
// Initialize Feather icons
feather.replace();
// Track page view
trackEvent('page_view', { variant: 'A' });
});
function validateField(field) {
if (field.hasAttribute('required') && !field.value.trim()) {
showError(field, 'This field is required');
return false;
}
if (field.type === 'tel' && !isValidPhone(field.value)) {
showError(field, 'Please enter a valid phone number');
return false;
}
clearError(field);
return true;
}
function showError(field, message) {
clearError(field);
field.classList.add('input-error');
const errorElement = document.createElement('div');
errorElement.className = 'error-message';
errorElement.textContent = message;
field.parentNode.appendChild(errorElement);
}
function clearError(field) {
field.classList.remove('input-error');
const errorElement = field.parentNode.querySelector('.error-message');
if (errorElement) {
errorElement.remove();
}
}
function isValidPhone(phone) {
const phoneRegex = /^[0-9]{10}$/;
return phoneRegex.test(phone);
}
function trackEvent(event, data) {
// In a real implementation, this would send data to your analytics platform
console.log('Event tracked:', event, data);
// Example implementation with Google Analytics:
// if (typeof gtag !== 'undefined') {
// gtag('event', event, data);
// }
} |