// Function to set up the testimonials layout function setupTestimonialsLayout() { // Step 1: Find the existing testimonials section const existingTestimonialsSection = document.querySelector('.grab-testimonials-grid'); if (!existingTestimonialsSection) { console.log('Testimonials section not found yet, will try again...'); return false; // Section not found yet } // Check if we've already set up the layout for this specific instance if (existingTestimonialsSection.parentNode.className === 'testimonials-content-wrapper') { console.log('Layout already set up for this instance'); return true; // Already done for this specific grid instance } console.log('Testimonials section found, setting up layout'); // Step 2: Create the container that will hold both sections const container = document.createElement('div'); container.className = 'testimonials-container'; // Step 3: Insert the container before the existing testimonials section existingTestimonialsSection.parentNode.insertBefore(container, existingTestimonialsSection); // Add Google title to the first column const googleTitle = document.createElement('div'); googleTitle.className = 'testimonials-column-title google-title'; googleTitle.innerHTML = ' Google'; // Create a wrapper for the first column to contain the title and testimonials const googleWrapper = document.createElement('div'); googleWrapper.className = 'testimonials-column-wrapper'; // Step 4: Move the existing testimonials section into the google wrapper googleWrapper.appendChild(googleTitle); // Create a content wrapper for the testimonials section const googleContentWrapper = document.createElement('div'); googleContentWrapper.className = 'testimonials-content-wrapper'; googleContentWrapper.appendChild(existingTestimonialsSection); googleWrapper.appendChild(googleContentWrapper); // Create Google review button const googleButton = document.createElement('a'); googleButton.href = 'https://www.google.com/search?q=cj+plumbing+and+hydro+jetting&oq=CJ+Plumbing+And+Hydro+Jetting&gs_lcrp=EgZjaHJvbWUqCggAEAAY4wIYgAQyCggAEAAY4wIYgAQyDQgBEC4YrwEYxwEYgAQyDQgCEAAYhgMYgAQYigUyDQgDEAAYhgMYgAQYigUyDQgEEAAYhgMYgAQYigUyDQgFEAAYhgMYgAQYigUyCggGEAAYgAQYogQyBggHEEUYPNIBBzQ3M2owajeoAgCwAgA&sourceid=chrome&ie=UTF-8#lrd=0x80c2d69b0e650ccf:0x1e461f094d335cfc,1,,,,'; googleButton.className = 'testimonials-review-button google-button'; googleButton.innerHTML = ' Write a Google Review'; googleButton.target = '_blank'; googleButton.rel = 'noopener noreferrer'; // Add button to Google wrapper googleWrapper.appendChild(googleButton); // Add the google wrapper to the container container.appendChild(googleWrapper); // Step 5: Create the wrapper for the second column const angieWrapper = document.createElement('div'); angieWrapper.className = 'testimonials-column-wrapper'; // Add Angie title to the second column const angieTitle = document.createElement('div'); angieTitle.className = 'testimonials-column-title angie-title'; angieTitle.innerHTML = ' Angie

Angie'; angieWrapper.appendChild(angieTitle); // Create a content wrapper for the Angie section const angieContentWrapper = document.createElement('div'); angieContentWrapper.className = 'testimonials-content-wrapper'; angieWrapper.appendChild(angieContentWrapper); // Step 6: Create the second testimonials section (Angie reviews) const angieTestimonialsSection = document.createElement('div'); angieTestimonialsSection.className = 'angie-testimonials-section'; // Step 7: Add the Angie testimonials HTML content angieTestimonialsSection.innerHTML = `

Nick C.

★★★★★ 04/2025

"Excellent experience. Ted was in touch right away with a ballpark estimate for the repair. He arrived when he said he would and did a great job. Would hire again!"

Garage Doors

Posted on

Angie

Venkata Y.

★★★★★ 03/2025

"Ted was great, he finished the work seamlessly and also very knowledgeable and provided details for new equipment."

Garage Doors

Posted on

Angie

Loren K.

★★★★★ 02/2025

"Good service, best price. I would recommend him to anyone looking for garage door work."

Garage Doors

Posted on

Angie

`; // Add the Angie testimonials section to the angie content wrapper angieContentWrapper.appendChild(angieTestimonialsSection); // Create Angie review button const angieButton = document.createElement('a'); angieButton.href = 'https://www.angi.com/companylist/us/mn/minneapolis/residential-garage-door-services-reviews-9868462.htm'; angieButton.className = 'testimonials-review-button angie-button'; angieButton.innerHTML = ' Angie

Write an Angie Review'; angieButton.target = '_blank'; angieButton.rel = 'noopener noreferrer'; // Add button to Angie wrapper angieWrapper.appendChild(angieButton); // Add the angie wrapper to the container container.appendChild(angieWrapper); // Ensure Font Awesome is loaded ensureFontAwesomeLoaded(); // Apply flexbox to stretch the cards in both columns setTimeout(() => { stretchColumnCards(); }, 500); console.log('Testimonials sections successfully rearranged'); return true; // Setup complete } // Function to stretch the cards in both columns function stretchColumnCards() { // Get both column wrappers const googleWrapper = document.querySelector('.testimonials-column-wrapper:first-child'); const angieWrapper = document.querySelector('.testimonials-column-wrapper:last-child'); if (!googleWrapper || !angieWrapper) { console.log('Column wrappers not found'); return; } // Get content wrappers const googleContentWrapper = googleWrapper.querySelector('.testimonials-content-wrapper'); const angieContentWrapper = angieWrapper.querySelector('.testimonials-content-wrapper'); if (!googleContentWrapper || !angieContentWrapper) { console.log('Content wrappers not found'); return; } // Get the testimonials sections and cards const googleTestimonialsSection = googleContentWrapper.querySelector('.grab-testimonials-section'); const googleTestimonialsGrid = googleTestimonialsSection?.querySelector('.grab-testimonials-grid'); const googleCards = googleTestimonialsGrid?.querySelectorAll('.grab-testimonial-card'); const angieTestimonialsSection = angieContentWrapper.querySelector('.angie-testimonials-section'); const angieReviewsGrid = angieTestimonialsSection?.querySelector('div > div'); const angieCards = angieReviewsGrid?.querySelectorAll('div[style*="background-color: #f9f9f9"]'); if (!googleTestimonialsSection || !googleTestimonialsGrid || !googleCards || !angieTestimonialsSection) { console.log('Testimonial cards not found'); return; } // Apply flex container class to both grids if (googleTestimonialsGrid) { googleTestimonialsGrid.classList.add('testimonials-flex-container'); } if (angieReviewsGrid) { angieReviewsGrid.classList.add('testimonials-flex-container'); } // Apply stretched-card class to all cards if (googleCards) { googleCards.forEach(card => { card.classList.add('stretched-card'); }); } if (angieCards) { angieCards.forEach(card => { card.classList.add('stretched-card'); }); } // Make content wrappers equal height equalizeContentWrapperHeights(googleContentWrapper, angieContentWrapper); console.log('Cards in both columns stretched successfully'); } // Function to equalize the height of content wrappers function equalizeContentWrapperHeights(googleContentWrapper, angieContentWrapper) { if (!googleContentWrapper || !angieContentWrapper) { console.log('Content wrappers not available for height equalization'); return; } // Reset heights to auto to get their natural height googleContentWrapper.style.height = 'auto'; angieContentWrapper.style.height = 'auto'; // Wait a moment for browser to calculate natural heights setTimeout(() => { // Get the natural heights const googleHeight = googleContentWrapper.offsetHeight; const angieHeight = angieContentWrapper.offsetHeight; // Determine the taller height const maxHeight = Math.max(googleHeight, angieHeight); // Set both content wrappers to the same height googleContentWrapper.style.height = maxHeight + 'px'; angieContentWrapper.style.height = maxHeight + 'px'; console.log(`Content wrappers set to equal height: ${maxHeight}px`); }, 100); } // Function to ensure Font Awesome is loaded function ensureFontAwesomeLoaded() { // Check if Font Awesome is already loaded if (document.querySelector('link[href*="font-awesome"]') || document.querySelector('link[href*="fontawesome"]')) { return; // Font Awesome is already loaded } // Load Font Awesome from CDN const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'; link.integrity = 'sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=='; link.crossOrigin = 'anonymous'; link.referrerPolicy = 'no-referrer'; document.head.appendChild(link); } // Add the CSS function addTestimonialsStyles() { // Only add the styles once if (document.getElementById('testimonials-custom-styles')) { return; } const styleElement = document.createElement('style'); styleElement.id = 'testimonials-custom-styles'; styleElement.innerHTML = ` /* Two-column testimonials layout */ .testimonials-container { display: flex; flex-direction: row; gap: 20px; max-width: 100%; margin: 0 auto; padding: 0; } /* Column wrapper styling - ensure equal widths */ .testimonials-column-wrapper { width: 50%; box-sizing: border-box; display: flex; flex-direction: column; min-height: 0; /* Allow flex items to shrink */ } /* Content wrapper styling - ensure equal heights */ .testimonials-content-wrapper { flex-grow: 1; display: flex; flex-direction: column; min-height: 0; /* Allow flex items to shrink */ } /* Title styling with better icon alignment */ .testimonials-column-title { text-align: center; padding: 15px; margin-bottom: 15px; font-size: 24px; font-weight: bold; border-radius: 6px; display: flex; align-items: center; justify-content: center; line-height: 1; } /* Google title styling */ .google-title { background-color: #f2f2f2; color: #4285F4; } /* Angie title styling */ .angie-title { background-color: #f2f2f2; color: #FC6152; } /* Icon styling */ .testimonials-column-title i { margin-right: 10px; font-size: 28px; } /* Make the testimonials sections take up all available width */ .testimonials-content-wrapper .grab-testimonials-section, .testimonials-content-wrapper .angie-testimonials-section { width: 100%; margin: 0; box-sizing: border-box; display: flex; flex-direction: column; flex-grow: 1; } /* Style the Angie content container */ .angie-content-container { display: flex; flex-direction: column; flex-grow: 1; } /* Make the grid a flex container with equal height cards */ .testimonials-flex-container { display: flex !important; flex-direction: column !important; flex-grow: 1; gap: 25px; /* Consistent spacing between cards */ } /* Make each card stretch to equal height */ .stretched-card { flex: 1; /* Equal height distribution */ display: flex !important; flex-direction: column !important; min-height: 0; /* Allow flex items to shrink */ } /* Ensure all review cards have equal dimensions */ .testimonials-container .grab-testimonials-grid .grab-testimonial-card, .angie-testimonials-section div[style*="background-color: #f9f9f9"] { flex: 1; min-height: 200px; /* Minimum height for consistency */ display: flex; flex-direction: column; } /* Make sure content within cards fills available space */ .grab-testimonial-card > *, .angie-testimonials-section div[style*="background-color: #f9f9f9"] > * { flex-shrink: 0; } /* Make the review text area flexible */ .grab-testimonial-card blockquote, .angie-testimonials-section p[style*="font-style: italic"] { flex-grow: 1; } /* Reduce the width of the grid in the first testimonial section */ .testimonials-column-wrapper .grab-testimonials-grid { grid-template-columns: 1fr !important; } /* Style the Angie reviews grid */ .angie-reviews-grid { flex-grow: 1; } /* Review buttons styling */ .testimonials-review-button { display: block; text-align: center; padding: 12px 20px; margin: 20px auto; border-radius: 6px; font-weight: bold; text-decoration: none; transition: all 0.3s ease; max-width: 250px; } /* Google button styling */ .google-button { background-color: #4285F4; color: white; border: 2px solid #4285F4; } .google-button:hover { background-color: white; color: #4285F4; } /* Angie button styling */ .angie-button { background-color: #FE8A7F; color: white; border: 2px solid #FE8A7F; } .angie-button:hover { background-color: white; color: #FE8A7F; } /* Button icon styling */ .testimonials-review-button i { margin-right: 8px; } /* Responsive styles for mobile */ @media (max-width: 992px) { .testimonials-container { flex-direction: column; } .testimonials-column-wrapper { width: 100%; margin-bottom: 30px; } .testimonials-content-wrapper { height: auto !important; } /* Restore grid columns on mobile for the first testimonial section */ .testimonials-column-wrapper .grab-testimonials-grid { grid-template-columns: 1fr !important; } /* Make sure the grid containers don't overflow */ .testimonials-column-wrapper .grab-testimonials-container { max-width: 100%; padding: 0 15px; } } `; document.head.appendChild(styleElement); } // Create a store for observers const observerStore = { mainObserver: null, routeChangeObserver: null, isActive: false }; // Setup observer for SPA route changes function setupRouteChangeObserver() { // Target common SPA route change indicator elements const targetNode = document.body; // Create new observer for route changes if (!observerStore.routeChangeObserver) { observerStore.routeChangeObserver = new MutationObserver((mutations) => { // Check for URL changes which indicate route changes in most SPAs if (window.location.href !== observerStore.lastUrl) { observerStore.lastUrl = window.location.href; console.log('Route change detected, checking for testimonials section...'); // Give the DOM time to update after route change setTimeout(() => { // Try to find and set up testimonials setupTestimonialsLayout(); // Re-initiate the main observer in case it was disconnected initTestimonialsObserver(); }, 500); } }); // Store current URL observerStore.lastUrl = window.location.href; // Observe URL changes in the document observerStore.routeChangeObserver.observe(targetNode, { childList: true, subtree: true }); console.log('Route change observer initialized'); } } // For SPAs, we need to monitor for DOM changes to detect when our element appears function initTestimonialsObserver() { // Add styles immediately (if not added yet) addTestimonialsStyles(); // Try to set up initially (in case the element is already there) if (setupTestimonialsLayout()) { console.log('Testimonials layout set up successfully on initialization'); } else { console.log('Testimonials section not found yet, setting up observer...'); } // Important: Don't disconnect the observer even if setup was successful // because we need it for when the user navigates back to this page // If already observing, don't create a new observer if (observerStore.isActive && observerStore.mainObserver) { console.log('Observer already active'); return; } // Set up a mutation observer to watch for DOM changes if (!observerStore.mainObserver) { observerStore.mainObserver = new MutationObserver(function (mutations) { // Try to set up the layout whenever DOM changes setupTestimonialsLayout(); }); // Configure the observer to watch for added nodes in the entire document observerStore.mainObserver.observe(document.body, { childList: true, subtree: true }); observerStore.isActive = true; console.log('Main testimonials observer initialized'); // Also set up the route change observer setupRouteChangeObserver(); } } // Start the process (function () { if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => { initTestimonialsObserver(); }); } else { initTestimonialsObserver(); } })(); // Add window resize handler to re-stretch cards window.addEventListener('resize', function () { // Wait a bit for resize to complete clearTimeout(window.resizeTimeout); window.resizeTimeout = setTimeout(function () { // Get both content wrappers const googleContentWrapper = document.querySelector('.testimonials-column-wrapper:first-child .testimonials-content-wrapper'); const angieContentWrapper = document.querySelector('.testimonials-column-wrapper:last-child .testimonials-content-wrapper'); if (googleContentWrapper && angieContentWrapper) { equalizeContentWrapperHeights(googleContentWrapper, angieContentWrapper); } }, 250); });

Sitemap