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

Joshua B. Murrieta

★★★★★

"Butler Heating and Air exceeded expectations! They were fast, efficient, and communicated clearly throughout the process. He's clearly experienced, honest, polite, and fairly priced--which is rare and refreshing. I trust him completely and would absolutely recommend Butler Heating and Air to anyone with HVAC needs."

Posted on

Y Yelp

Ken K. West Hills

★★★★★

"We needed a complete HVAC system replacement for an original system that was 28 years old. James was very knowledgeable. Gave us several options and was able to install the next day. We got a good system, fast, and at a fair price. Take that summer heat! Highly recommended."

Posted on

Y Yelp

Kyle H. San Francisco

★★★★★

"James and his team came in and were very efficient with the ac unit testing and service. James took the time to walk through all test results and recommendations for our unit. They also took the time to rewrap the insulation for a much cleaner and well kept look. I would highly recommend."

Posted on

Y Yelp

Mark V. Temecula

★★★★★

"Great customer service by James. James/Butler Heating and Air trouble shoot my A/C. Found the source of the problem. And informed me of my options. Very informative, honest and reliable. Arrived on time. I will highly recommend his service to my friends and family. Definitely use his services in the future. Great Job! James"

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/butler-heating-and-air-murrieta?uid=PWdsSnRUa84_e9jRJzN6uw&utm_source=ishare'; 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; } /* Yelp rating section styling */ .yelp-rating-section { margin-top: 0; } /* Ensure Font Awesome icons display properly */ .fab.fa-yelp { display: inline-block !important; } /* 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(); addYelpRating(); // 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(); addYelpRating(); }); // 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(); } } // Function to add Yelp rating below Google rating function addYelpRating() { // Find the existing Google rating section const googleRating = document.querySelector('.grab-hero-rating'); if (!googleRating) { console.log('Google rating section not found yet'); return false; } // Check if Yelp rating already exists if (googleRating.querySelector('.yelp-rating-section')) { console.log('Yelp rating already added'); return true; } console.log('Adding Yelp rating section inside Google rating container'); // Create a divider line const divider = document.createElement('div'); divider.className = 'w-full h-px bg-gray-200 my-6'; // Create Yelp logo using Font Awesome const yelpLogo = document.createElement('i'); yelpLogo.className = 'fab fa-yelp mx-auto block'; yelpLogo.style.color = '#d32323'; yelpLogo.style.fontSize = '20px'; yelpLogo.style.width = '20px'; yelpLogo.style.height = '20px'; // Create the rating link const ratingLink = document.createElement('a'); ratingLink.target = '_blank'; ratingLink.rel = 'noreferrer'; ratingLink.href = 'https://www.yelp.com/biz/butler-heating-and-air-murrieta?uid=PWdsSnRUa84_e9jRJzN6uw&utm_source=ishare'; ratingLink.className = 'block font-pairing-secondary text-gray-800'; ratingLink.textContent = '4.9 stars on Yelp'; // Find and clone the existing Google stars instead of creating new ones const existingStarsContainer = googleRating.querySelector('.mx-auto.flex.gap-1.text-yellow-400'); let starsContainer; if (existingStarsContainer) { // Clone the working Google stars container starsContainer = existingStarsContainer.cloneNode(true); console.log('Cloned existing Google stars for Yelp'); } else { // Fallback: create simple Unicode stars if we can't find the Google ones starsContainer = document.createElement('div'); starsContainer.className = 'mx-auto flex gap-1 text-center'; starsContainer.style.color = '#fbbf24'; starsContainer.style.fontSize = '16px'; starsContainer.innerHTML = '★★★★★'; console.log('Using Unicode stars as fallback'); } // Create the Yelp rating section container const yelpSection = document.createElement('div'); yelpSection.className = 'yelp-rating-section flex flex-col gap-1 text-center pb-1'; // Assemble the Yelp rating section yelpSection.appendChild(yelpLogo); yelpSection.appendChild(ratingLink); yelpSection.appendChild(starsContainer); // Add to the existing Google rating container googleRating.appendChild(divider); googleRating.appendChild(yelpSection); // Adjust the padding of the main container googleRating.style.paddingBottom = '12px'; console.log('Yelp rating section added successfully inside Google rating container'); return true; } // Enhanced init function to handle both testimonials and ratings function initTestimonialsAndRatings() { // Add styles immediately (if not added yet) addTestimonialsStyles(); // Try to set up testimonials layout setupTestimonialsLayout(); // Try to add Yelp rating addYelpRating(); } // Start the process (function () { if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => { initTestimonialsObserver(); initTestimonialsAndRatings(); }); } else { initTestimonialsObserver(); initTestimonialsAndRatings(); } })(); // 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); });

Sitemap