/** * Persistent Services Widget for SPA * Extracts services from footer links (present on all pages) * Works with Single Page Applications */ (function () { 'use strict'; // Configuration const CONFIG = { fontAwesomeUrl: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css', widgetDelay: 2000, // Delay before showing widget (ms) ctaUrl: '/contact-us', // Default CTA URL ctaText: 'Get Free Quote', // Default CTA text footerSelector: '.grab-footer-links-services-list', // Footer services list footerLinkSelector: '.grab-footer-links-services-item-link', // Footer service links storageKey: 'gds_widget_services' // SessionStorage key for caching services }; // Service icon mapping const SERVICE_ICONS = { 'emergency': 'fa-exclamation-triangle', '24 hour': 'fa-clock', 'panel': 'fa-square', 'lube': 'fa-oil-can', 'tune': 'fa-wrench', 'maintenance': 'fa-tools', 'opener installation': 'fa-plus-circle', 'opener repair': 'fa-screwdriver', 'installation': 'fa-hammer', 'residential': 'fa-home', 'off track': 'fa-align-center', 'spring': 'fa-compress', 'weather': 'fa-cloud-rain', 'seal': 'fa-shield-alt', 'repair': 'fa-wrench', 'replacement': 'fa-sync-alt' }; // Widget styles const WIDGET_STYLES = ` .gds-service-widget { position: fixed; top: 30px; right: 30px; width: 380px; max-width: calc(100vw - 60px); background: #000000; border-radius: 16px; box-shadow: 0 10px 40px rgba(130, 18, 18, 0.3); overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 9999; border: 1px solid #821212; display: none; } .gds-service-widget.visible { display: block; animation: gdsSlideInRight 0.5s ease; } .gds-service-widget.minimized { width: 60px; height: 60px; border-radius: 30px; cursor: pointer; } .gds-widget-toggle { position: absolute; top: 18px; right: 18px; width: 32px; height: 32px; background: #821212; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; z-index: 10; } .gds-widget-toggle:hover { transform: scale(1.1); background: #a01515; } .gds-widget-toggle i { color: white; font-size: 14px; transition: transform 0.3s ease; } .gds-service-widget.minimized .gds-widget-toggle { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; } .gds-service-widget.minimized .gds-widget-toggle i { font-size: 18px; } .gds-widget-header { padding: 24px; background: #000000; color: white; opacity: 1; transition: opacity 0.3s ease; border-bottom: 1px solid #821212; } .gds-service-widget.minimized .gds-widget-header { opacity: 0; pointer-events: none; } .gds-widget-title { font-size: 18px; font-weight: 600; margin-bottom: 6px; } .gds-widget-subtitle { font-size: 13px; opacity: 0.85; line-height: 1.4; } .gds-emergency-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(130, 18, 18, 0.3); padding: 5px 10px; border-radius: 20px; margin-top: 10px; font-size: 11px; font-weight: 500; border: 1px solid #821212; } .gds-emergency-badge i { font-size: 10px; animation: gdsPulse 2s infinite; } @keyframes gdsPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .gds-widget-content { padding: 20px; max-height: 380px; overflow-y: auto; opacity: 1; transition: opacity 0.3s ease; background: #1a1a1a; } .gds-service-widget.minimized .gds-widget-content { opacity: 0; pointer-events: none; } .gds-services-loading { text-align: center; padding: 40px 20px; color: #999999; font-size: 14px; } .gds-services-loading i { font-size: 24px; margin-bottom: 10px; animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .gds-service-item { background: #2a2a2a; border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; text-decoration: none; display: flex; align-items: center; gap: 12px; color: #ffffff; } .gds-service-item:hover { transform: translateX(-3px); box-shadow: 0 4px 12px rgba(130, 18, 18, 0.3); border-color: #821212; background: #333333; } .gds-service-item.emergency { background: #821212; color: white; border-color: #821212; } .gds-service-item.emergency:hover { background: #a01515; border-color: #a01515; } .gds-service-icon { width: 32px; height: 32px; background: #1a1a1a; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .gds-service-item.emergency .gds-service-icon { background: rgba(255, 255, 255, 0.2); } .gds-service-icon i { font-size: 14px; color: #821212; } .gds-service-item.emergency .gds-service-icon i { color: white; } .gds-service-name { font-size: 13px; font-weight: 500; line-height: 1.3; flex: 1; color: #ffffff; } .gds-service-item.emergency .gds-service-name { color: white; } .gds-service-arrow { color: #821212; font-size: 12px; opacity: 0; transform: translateX(-5px); transition: all 0.2s ease; } .gds-service-item:hover .gds-service-arrow { opacity: 1; transform: translateX(0); } .gds-service-item.emergency .gds-service-arrow { color: white; } .gds-service-category { font-size: 10px; font-weight: 600; color: #999999; text-transform: uppercase; letter-spacing: 1px; margin: 16px 0 10px; padding-left: 4px; opacity: 0.7; } .gds-service-category:first-child { margin-top: 0; } .gds-widget-cta { padding: 16px 20px; background: #000000; opacity: 1; transition: opacity 0.3s ease; border-top: 1px solid #821212; } .gds-service-widget.minimized .gds-widget-cta { opacity: 0; pointer-events: none; } .gds-cta-button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 20px; background: #821212; color: white; text-decoration: none; border-radius: 8px; font-size: 14px; font-weight: 500; transition: all 0.2s ease; } .gds-cta-button:hover { background: #a01515; transform: translateY(-1px); } .gds-cta-button i { font-size: 14px; } .gds-widget-content::-webkit-scrollbar { width: 5px; } .gds-widget-content::-webkit-scrollbar-track { background: #2a2a2a; border-radius: 3px; } .gds-widget-content::-webkit-scrollbar-thumb { background: #821212; border-radius: 3px; } @media (max-width: 480px) { .gds-service-widget { right: 15px; top: 15px; width: calc(100vw - 30px); } } @keyframes gdsSlideInRight { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } `; class FooterServicesWidget { constructor() { this.widget = null; this.services = []; this.isMinimized = false; this.observer = null; this.showTimeout = null; this.servicesLoaded = false; this.retryCount = 0; this.maxRetries = 10; } init() { console.log('Services Widget: Initializing'); // Load FontAwesome this.loadFontAwesome(); // Inject styles once this.injectStyles(); // Try to load cached services first this.loadCachedServices(); // If we have cached services, create widget immediately if (this.servicesLoaded) { this.createWidget(); this.showTimeout = setTimeout(() => this.showWidget(), CONFIG.widgetDelay); } else { // Otherwise, wait for footer to load this.waitForFooter(); } } waitForFooter() { // Check if footer exists const footer = document.querySelector(CONFIG.footerSelector); if (footer) { console.log('Services Widget: Found footer, extracting services'); this.extractServicesFromFooter(footer); if (this.services.length > 0) { this.servicesLoaded = true; this.cacheServices(); this.createWidget(); this.showTimeout = setTimeout(() => this.showWidget(), CONFIG.widgetDelay); } } else if (this.retryCount < this.maxRetries) { // Retry after a short delay this.retryCount++; console.log(`Services Widget: Footer not found, retrying... (${this.retryCount}/${this.maxRetries})`); setTimeout(() => this.waitForFooter(), 500); } else { // Set up observer as last resort console.log('Services Widget: Setting up observer for footer'); this.setupObserver(); } } setupObserver() { if (this.servicesLoaded) return; this.observer = new MutationObserver((mutations) => { if (!this.servicesLoaded) { const footer = document.querySelector(CONFIG.footerSelector); if (footer) { console.log('Services Widget: Footer appeared, extracting services'); this.extractServicesFromFooter(footer); if (this.services.length > 0) { this.servicesLoaded = true; this.cacheServices(); this.createWidget(); this.showTimeout = setTimeout(() => this.showWidget(), CONFIG.widgetDelay); // Stop observing this.observer.disconnect(); this.observer = null; } } } }); this.observer.observe(document.body, { childList: true, subtree: true }); } extractServicesFromFooter(footer) { this.services = []; const serviceLinks = footer.querySelectorAll(CONFIG.footerLinkSelector); console.log(`Services Widget: Found ${serviceLinks.length} service links in footer`); serviceLinks.forEach(link => { const href = link.getAttribute('href'); const name = link.textContent.trim(); if (href && name) { this.services.push({ name: name, href: href, category: this.categorizeService(name) }); } }); } loadCachedServices() { try { const cached = sessionStorage.getItem(CONFIG.storageKey); if (cached) { this.services = JSON.parse(cached); this.servicesLoaded = true; console.log('Services Widget: Loaded cached services:', this.services.length); } } catch (e) { console.log('Services Widget: No cached services found'); } } cacheServices() { try { sessionStorage.setItem(CONFIG.storageKey, JSON.stringify(this.services)); console.log('Services Widget: Cached services for session'); } catch (e) { console.warn('Services Widget: Could not cache services', e); } } loadFontAwesome() { const existingFA = document.querySelector('link[href*="font-awesome"], link[href*="fontawesome"]'); if (!existingFA) { const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = CONFIG.fontAwesomeUrl; document.head.appendChild(link); } } injectStyles() { if (document.getElementById('gds-widget-styles')) return; const styleSheet = document.createElement('style'); styleSheet.id = 'gds-widget-styles'; styleSheet.textContent = WIDGET_STYLES; document.head.appendChild(styleSheet); } categorizeService(serviceName) { const nameLower = serviceName.toLowerCase(); if (nameLower.includes('24 hour') || nameLower.includes('emergency')) { return 'emergency'; } else if (nameLower.includes('installation') && !nameLower.includes('repair')) { return 'installation'; } else if (nameLower.includes('maintenance') || nameLower.includes('lube') || nameLower.includes('tune')) { return 'maintenance'; } else { return 'repair'; } } getServiceIcon(serviceName) { const nameLower = serviceName.toLowerCase(); for (const [keyword, icon] of Object.entries(SERVICE_ICONS)) { if (nameLower.includes(keyword)) { return icon; } } return 'fa-cog'; } createWidget() { // Don't recreate if already exists if (this.widget) return; console.log('Services Widget: Creating widget with', this.services.length, 'services'); const widget = document.createElement('div'); widget.className = 'gds-service-widget'; widget.id = 'gdsServiceWidget'; // Build widget HTML widget.innerHTML = ` `; document.body.appendChild(widget); this.widget = widget; // Add click handler for toggle const toggleBtn = widget.querySelector('.gds-widget-toggle'); toggleBtn.addEventListener('click', () => this.toggleWidget()); // Store reference globally window.gdsWidget = this; } hasEmergencyService() { return this.services.some(s => s.category === 'emergency'); } buildServicesList() { if (this.services.length === 0) { return `

Loading services...

`; } // Group services by category const categories = { 'emergency': [], 'repair': [], 'installation': [], 'maintenance': [] }; this.services.forEach(service => { if (categories[service.category]) { categories[service.category].push(service); } }); // Build HTML let html = ''; Object.entries(categories).forEach(([category, categoryServices]) => { if (categoryServices.length > 0) { // Add category header (except for emergency) if (category !== 'emergency') { html += `

${category.toUpperCase()}

`; } // Add services categoryServices.forEach(service => { const isEmergency = category === 'emergency'; const icon = this.getServiceIcon(service.name); html += `

${service.name}

`; }); } }); return html; } showWidget() { if (this.widget) { this.widget.classList.add('visible'); console.log('Services Widget: Widget is now visible'); } } toggleWidget() { if (this.widget) { this.widget.classList.toggle('minimized'); this.isMinimized = !this.isMinimized; } } destroy() { if (this.observer) { this.observer.disconnect(); } if (this.showTimeout) { clearTimeout(this.showTimeout); } if (this.widget) { this.widget.remove(); } } } // Initialize widget const footerWidget = new FooterServicesWidget(); // Wait for DOM to be ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => footerWidget.init()); } else { footerWidget.init(); } // Expose destroy method for cleanup if needed window.gdsWidgetDestroy = () => footerWidget.destroy(); })(); // Custom script to change "Get in touch" button text to "10% off Booking Online" (function () { // Wait for DOM to be ready function changeButtonText() { // Find the button with "Get in touch" text const buttons = document.querySelectorAll('button.grab-cta-buttons-primary'); buttons.forEach(button => { if (button.textContent.trim() === 'Get in touch') { button.textContent = '10% Off Booking Online'; } }); } // Run immediately if DOM is ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', changeButtonText); } else { changeButtonText(); } // Also observe for dynamically added buttons const observer = new MutationObserver(changeButtonText); observer.observe(document.body, { childList: true, subtree: true }); })(); // Create a self-executing function to keep variables scoped (function () { // Add Font Awesome CDN if not already present if (!document.querySelector('link[href*="font-awesome"]') && !document.querySelector('link[href*="fontawesome"]')) { const fontAwesomeLink = document.createElement('link'); fontAwesomeLink.rel = 'stylesheet'; fontAwesomeLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'; fontAwesomeLink.integrity = 'sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=='; fontAwesomeLink.crossOrigin = 'anonymous'; document.head.appendChild(fontAwesomeLink); } // Store the Thumbtack link URL const thumbtackUrl = 'https://www.thumbtack.com/il/homer-glen/garage-door-repair/tates-garage-doors/service/424572027449303040'; // Function to create the Thumbtack element function createThumbtackElement() { // Create a new anchor element for Thumbtack const thumbtackLink = document.createElement('a'); thumbtackLink.setAttribute('target', '_blank'); thumbtackLink.setAttribute('rel', 'noopener noreferrer'); thumbtackLink.setAttribute('class', 'text-current hover:opacity-80'); thumbtackLink.setAttribute('href', thumbtackUrl); thumbtackLink.setAttribute('data-thumbtack-icon', 'true'); // For identification // Create span for screen readers const srSpan = document.createElement('span'); srSpan.setAttribute('class', 'sr-only'); srSpan.textContent = 'Thumbtack'; // Create Font Awesome icon element (using thumbtack icon) const icon = document.createElement('i'); icon.setAttribute('class', 'fa-solid fa-thumbtack h-6 w-6 text-primaryContrast hover:text-primaryContrast/80'); icon.setAttribute('aria-hidden', 'true'); icon.style.fontSize = '24px'; icon.style.display = 'inline-block'; icon.style.width = '24px'; icon.style.height = '24px'; icon.style.lineHeight = '24px'; // Append elements thumbtackLink.appendChild(srSpan); thumbtackLink.appendChild(icon); return thumbtackLink; } // Function to add Thumbtack icon to a specific container function addThumbtackIcon(containerSelector) { const container = document.querySelector(containerSelector); if (!container) { return false; // Container not found } // Check if the icon already exists in this container if (container.querySelector('[data-thumbtack-icon="true"]')) { return false; // Already exists } // Create the Thumbtack element and append to the end of the container const thumbtackElement = createThumbtackElement(); container.appendChild(thumbtackElement); return true; } // Function to check both containers and add icons function checkAndAddIcons() { // Try to add to footer addThumbtackIcon('.grab-footer-social-icons'); // Try to add to navbar addThumbtackIcon('.flex.items-center.gap-3.flex-nowrap'); } // Set up a MutationObserver to watch for DOM changes const observer = new MutationObserver(function (mutations) { checkAndAddIcons(); }); // Wait a bit for Font Awesome to load before initial attempt setTimeout(function () { checkAndAddIcons(); }, 500); // Start observing the document for changes observer.observe(document.body, { childList: true, subtree: true }); // Also run the check periodically since some SPAs might modify the DOM in ways // that don't trigger the MutationObserver setInterval(checkAndAddIcons, 2000); // Add marker to localStorage to persist across refreshes try { if (!localStorage.getItem('thumbtackIconAdded')) { localStorage.setItem('thumbtackIconAdded', 'true'); } } catch (e) { // Ignore localStorage errors } })();

Our Services

Sitemap