// 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 = `

Jimmy E. Miami

★★★★★

"Jose is the best! My go to plumber. Very patient and educational. He has helped me with my kitchen, bathroom and outdoor plumbing problems. Highly recommend!"

Posted on

Y Yelp

Froilan V. Hayward

★★★★★

"No one ever raves about their plumber until you meet Jose. He's teaching you and helping solve the issue. It feels like a ton of value for the cost. Best kept secret in the east bay."

Posted on

Y Yelp

Kristie C. Palo Alto

★★★★★

"Jose is super responsive and very friendly, great with communicating what issues are and potential solves could be. He's knowledgeable and honest, with reasonable prices."

Posted on

Y Yelp

Pamela S. Los Altos

★★★★★

"Jose installed a hot water heater for me. He arrived on time, his communication was excellent and his work was top notch. He's super thorough and does great work at fair prices."

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/plumrelief-hayward'; 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); });

SHOWCASE

Our Projects

Leaky Shower Revamp in Livermore

PlumRelief Swift Drain Solution in Fremont

Copper Pipe Upgrade Boosts Water Efficiency