// 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://search.google.com/local/writereview?placeid=ChIJjQc6YLbOvk4RjTvUM5zSEp8'; 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 yelpWrapper = document.createElement('div'); yelpWrapper.className = 'testimonials-column-wrapper'; // Add Yelp title to the second column const yelpTitle = document.createElement('div'); yelpTitle.className = 'testimonials-column-title yelp-title'; yelpTitle.innerHTML = ' Yelp'; yelpWrapper.appendChild(yelpTitle); // Create a content wrapper for the Yelp section const yelpContentWrapper = document.createElement('div'); yelpContentWrapper.className = 'testimonials-content-wrapper'; yelpWrapper.appendChild(yelpContentWrapper); // Step 6: Create the second testimonials section (Yelp reviews) const yelpTestimonialsSection = document.createElement('div'); yelpTestimonialsSection.className = 'yelp-testimonials-section'; // Step 7: Add the Yelp testimonials HTML content yelpTestimonialsSection.innerHTML = `

Emily R. Temecula

★★★★★

"Our new LVP floors are stunning! The team was professional, and the installation was seamless. Highly recommend it!"

Posted on

Y Yelp

Mark T. Murrieta

★★★★★

"Durable, waterproof, and beautiful! I love how easy it is to clean, especially with pets and kids around."

Posted on

Y Yelp

David K. Wildomar

★★★★★

"Love my new luxury vinyl floors! The team was knowledgeable, courteous, and efficient. Great experience!"

Posted on

Y Yelp

Sarah T. Wildomar

★★★★★

"Exceeded my expectations! Beautiful flooring, competitive pricing, and exceptional customer service. Thank you!"

Posted on

Y Yelp

`; // Add the Yelp testimonials section to the yelp content wrapper yelpContentWrapper.appendChild(yelpTestimonialsSection); // Create Yelp review button const yelpButton = document.createElement('a'); yelpButton.href = 'https://www.yelp.com/biz/langdon-floorcovering-murrieta'; yelpButton.className = 'testimonials-review-button yelp-button'; yelpButton.innerHTML = ' Write a Yelp Review'; yelpButton.target = '_blank'; yelpButton.rel = 'noopener noreferrer'; // Add button to Yelp wrapper yelpWrapper.appendChild(yelpButton); // Add the yelp wrapper to the container container.appendChild(yelpWrapper); // 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 yelpWrapper = document.querySelector('.testimonials-column-wrapper:last-child'); if (!googleWrapper || !yelpWrapper) { console.log('Column wrappers not found'); return; } // Get content wrappers const googleContentWrapper = googleWrapper.querySelector('.testimonials-content-wrapper'); const yelpContentWrapper = yelpWrapper.querySelector('.testimonials-content-wrapper'); if (!googleContentWrapper || !yelpContentWrapper) { 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 yelpTestimonialsSection = yelpContentWrapper.querySelector('.yelp-testimonials-section'); const yelpReviewsGrid = yelpTestimonialsSection?.querySelector('div > div'); const yelpCards = yelpReviewsGrid?.querySelectorAll('div[style*="background-color: #f9f9f9"]'); if (!googleTestimonialsSection || !googleTestimonialsGrid || !googleCards || !yelpTestimonialsSection) { console.log('Testimonial cards not found'); return; } // Apply flex container class to both grids if (googleTestimonialsGrid) { googleTestimonialsGrid.classList.add('testimonials-flex-container'); } if (yelpReviewsGrid) { yelpReviewsGrid.classList.add('testimonials-flex-container'); } // Apply stretched-card class to all cards if (googleCards) { googleCards.forEach(card => { card.classList.add('stretched-card'); }); } if (yelpCards) { yelpCards.forEach(card => { card.classList.add('stretched-card'); }); } // Make content wrappers equal height equalizeContentWrapperHeights(googleContentWrapper, yelpContentWrapper); console.log('Cards in both columns stretched successfully'); } // Function to equalize the height of content wrappers function equalizeContentWrapperHeights(googleContentWrapper, yelpContentWrapper) { if (!googleContentWrapper || !yelpContentWrapper) { console.log('Content wrappers not available for height equalization'); return; } // Reset heights to auto to get their natural height googleContentWrapper.style.height = 'auto'; yelpContentWrapper.style.height = 'auto'; // Wait a moment for browser to calculate natural heights setTimeout(() => { // Get the natural heights const googleHeight = googleContentWrapper.offsetHeight; const yelpHeight = yelpContentWrapper.offsetHeight; // Determine the taller height const maxHeight = Math.max(googleHeight, yelpHeight); // Set both content wrappers to the same height googleContentWrapper.style.height = maxHeight + 'px'; yelpContentWrapper.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 */ .testimonials-column-wrapper { width: 50%; box-sizing: border-box; display: flex; flex-direction: column; } /* Content wrapper styling */ .testimonials-content-wrapper { flex-grow: 1; display: grid; } /* Title styling */ .testimonials-column-title { text-align: center; padding: 15px; margin-bottom: 15px; font-size: 24px; font-weight: bold; border-radius: 6px; } /* Google title styling */ .google-title { background-color: #f2f2f2; color: #4285F4; } /* Yelp title styling */ .yelp-title { background-color: #f2f2f2; color: #d32323; } /* 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 .yelp-testimonials-section { width: 100%; margin: 0; box-sizing: border-box; display: flex; flex-direction: column; flex-grow: 1; } /* Style the Yelp content container */ .yelp-content-container { display: flex; flex-direction: column; flex-grow: 1; } /* Make the grid a flex container */ .testimonials-flex-container { display: flex !important; flex-direction: column !important; flex-grow: 1; } /* Make each card stretch */ .stretched-card { flex-grow: 1; display: flex !important; flex-direction: column !important; } /* Ensure card content fills the space */ .stretched-card > blockquote, .stretched-card > .yelp-review-content { 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 Yelp reviews grid */ .yelp-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; } /* Yelp button styling */ .yelp-button { background-color: #d32323; color: white; border: 2px solid #d32323; } .yelp-button:hover { background-color: white; color: #d32323; } /* 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 yelpContentWrapper = document.querySelector('.testimonials-column-wrapper:last-child .testimonials-content-wrapper'); if (googleContentWrapper && yelpContentWrapper) { equalizeContentWrapperHeights(googleContentWrapper, yelpContentWrapper); } }, 250); });

INSIGHTS & UPDATES

Latest Articles

What is Luxury Vinyl Plank (LVP)?