document.addEventListener("DOMContentLoaded", function() { if (window.location.pathname.includes("/collections/")) { const pageContentContainer = document.querySelector(".page-width.page-content"); if (pageContentContainer) { const rteElement = pageContentContainer.querySelector(".rte"); if (rteElement) { const cardContainer = document.createElement("div"); cardContainer.style.backgroundColor = "#f9f9f9"; cardContainer.style.width = "65%"; // Largura padrão para desktop cardContainer.style.padding = "30px"; cardContainer.style.margin = "40px auto"; cardContainer.style.boxSizing = "border-box"; cardContainer.style.borderRadius = "15px"; cardContainer.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.1)"; cardContainer.style.fontFamily = "Arial, sans-serif"; cardContainer.style.lineHeight = "1.8"; cardContainer.style.border = "1px solid #ddd"; cardContainer.style.backgroundImage = "linear-gradient(135deg, #f5f5f5 25%, #e6e6e6 75%)"; cardContainer.style.color = "#333"; cardContainer.style.position = "relative"; // Removido o `text-align: center` global const contentWrapper = document.createElement("div"); contentWrapper.innerHTML = rteElement.innerHTML; contentWrapper.style.padding = "20px"; contentWrapper.style.backgroundColor = "rgba(255, 255, 255, 0.95)"; contentWrapper.style.borderRadius = "10px"; contentWrapper.style.boxShadow = "0 2px 6px rgba(0, 0, 0, 0.05)"; contentWrapper.style.maxWidth = "100%"; // Centralizar apenas títulos (h2) const titles = contentWrapper.querySelectorAll("h2, strong"); titles.forEach(function(title) { title.style.textAlign = "center"; // Centraliza os títulos e elementos em negrito }); cardContainer.appendChild(contentWrapper); rteElement.style.display = "none"; const footer = document.querySelector("#shopify-section-footer"); if (footer) { footer.parentNode.insertBefore(cardContainer, footer); } // Adiciona media query para celular const mediaQuery = window.matchMedia("(max-width: 768px)"); function handleMobileChange(e) { if (e.matches) { cardContainer.style.width = "100%"; cardContainer.style.margin = "20px 0"; } else { cardContainer.style.width = "65%"; cardContainer.style.margin = "40px auto"; } } handleMobileChange(mediaQuery); mediaQuery.addListener(handleMobileChange); } } } }); // Select the main product image const images = document.querySelectorAll('.product-image-main img'); // Create the modal const modal = document.createElement('div'); Object.assign(modal.style, { position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: 'rgba(0, 0, 0, 0.8)', display: 'none', justifyContent: 'center', alignItems: 'center', zIndex: '1000' }); // Create the modal content container const modalContent = document.createElement('div'); Object.assign(modalContent.style, { position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }); // Create the modal image element const modalImage = document.createElement('img'); Object.assign(modalImage.style, { maxWidth: '100%', maxHeight: '90vh', width: 'auto', height: 'auto', borderRadius: '10px', objectFit: 'contain', transition: 'transform 0.3s ease' // For smooth zoom transitions }); // Add the modal image to the modal content, and the content to the modal modalContent.appendChild(modalImage); modal.appendChild(modalContent); document.body.appendChild(modal); // Create the zoom icon template const zoomIconTemplate = document.createElement('div'); zoomIconTemplate.innerHTML = '🔍'; // Magnifying glass icon Object.assign(zoomIconTemplate.style, { position: 'absolute', bottom: '10px', right: '10px', fontSize: '24px', color: 'rgba(255, 255, 255, 0.8)', cursor: 'pointer', zIndex: '1001' }); // Add the zoom icon to each image images.forEach((image) => { const parent = image.parentElement; parent.style.position = 'relative'; // Ensure the parent is positioned parent.appendChild(zoomIconTemplate.cloneNode(true)); }); // Current index to keep track of the displayed image let currentIndex = 0; // Function to update the image in the modal function updateModalImage(index) { const imgElement = images[index]; const src = imgElement.getAttribute('src'); const srcset = imgElement.getAttribute('srcset') || imgElement.getAttribute('data-srcset'); if (srcset) { const highestResSrc = srcset.split(',').pop().trim().split(' ')[0]; modalImage.setAttribute('src', highestResSrc); } else { modalImage.setAttribute('src', src); } modal.style.display = 'flex'; } // Add event listeners to images and zoom icons images.forEach((image, index) => { const zoomIcon = image.parentElement.querySelector('div'); image.addEventListener('click', () => { currentIndex = index; updateModalImage(currentIndex); }); zoomIcon.addEventListener('click', (e) => { e.stopPropagation(); // Prevent the click from bubbling up currentIndex = index; updateModalImage(currentIndex); }); }); // Close the modal when clicking outside the image modal.addEventListener('click', (event) => { if (event.target === modal) { modal.style.display = 'none'; resetImageTransform(); } }); // Function to reset image transformations function resetImageTransform() { isZoomed = false; translateX = 0; translateY = 0; modalImage.style.transform = 'scale(1)'; modalImage.style.transformOrigin = 'center center'; disablePan(); } // Detect mobile devices (Android and iPhone) function isMobileDevice() { return /Android|iPhone|iPad|iPod/i.test(navigator.userAgent); } // Variables for double-tap and pan functionality let lastTap = 0; let isZoomed = false; let startX = 0; let translateX = 0; let initialTranslateX = 0; let zoomScaleFactor = 1; // Will be calculated dynamically // Add double-tap event listener on mobile devices if (isMobileDevice()) { modalImage.addEventListener('touchend', handleDoubleTap); } function handleDoubleTap(e) { const currentTime = new Date().getTime(); const tapLength = currentTime - lastTap; if (tapLength < 500 && tapLength > 0) { // Double-tap detected toggleZoom(e); e.preventDefault(); } lastTap = currentTime; } // Toggle zoom function function toggleZoom(e) { if (!isZoomed) { // Enter zoom mode isZoomed = true; modalImage.style.transformOrigin = 'center center'; // Calculate scale factor to make image height equal to viewport height const viewportHeight = window.innerHeight; const imageHeight = modalImage.clientHeight; zoomScaleFactor = viewportHeight / imageHeight; // Reset translations translateX = 0; // Apply transform modalImage.style.transform = `translate(${translateX}px, 0px) scale(${zoomScaleFactor})`; enablePan(); } else { // Exit zoom mode resetImageTransform(); } } // Enable pan functionality function enablePan() { modalImage.addEventListener('touchstart', handleTouchStart, false); modalImage.addEventListener('touchmove', handleTouchMove, false); modalImage.style.touchAction = 'none'; // Prevent default touch actions } // Disable pan functionality function disablePan() { modalImage.removeEventListener('touchstart', handleTouchStart, false); modalImage.removeEventListener('touchmove', handleTouchMove, false); modalImage.style.touchAction = ''; // Reset touch action } // Handle touch start for panning function handleTouchStart(evt) { const touches = evt.touches[0]; startX = touches.clientX; initialTranslateX = translateX; } // Handle touch move for panning with constraints function handleTouchMove(evt) { evt.preventDefault(); // Prevent scrolling const touches = evt.touches[0]; const deltaX = touches.clientX - startX; // Update translateX translateX = initialTranslateX + deltaX; // Calculate the maximum translate values const imageWidth = modalImage.clientWidth; const scaledWidth = imageWidth * zoomScaleFactor; const maxTranslateX = (scaledWidth - imageWidth) / 2; // Clamp translateX translateX = Math.max(-maxTranslateX, Math.min(translateX, maxTranslateX)); // Apply the transform modalImage.style.transform = `translate(${translateX}px, 0px) scale(${zoomScaleFactor})`; } // Create navigation arrows const prevArrow = document.createElement('span'); prevArrow.innerHTML = '❮'; // Left arrow Object.assign(prevArrow.style, { position: 'absolute', left: '20px', top: '50%', fontSize: '40px', color: 'rgba(255, 255, 255, 0.8)', cursor: 'pointer', transform: 'translateY(-50%)', zIndex: '1001' }); const nextArrow = document.createElement('span'); nextArrow.innerHTML = '❯'; // Right arrow Object.assign(nextArrow.style, { position: 'absolute', right: '20px', top: '50%', fontSize: '40px', color: 'rgba(255, 255, 255, 0.8)', cursor: 'pointer', transform: 'translateY(-50%)', zIndex: '1001' }); // Add hover effect to arrows [prevArrow, nextArrow].forEach((arrow) => { arrow.addEventListener('mouseenter', () => { arrow.style.color = 'rgba(255, 255, 255, 1)'; }); arrow.addEventListener('mouseleave', () => { arrow.style.color = 'rgba(255, 255, 255, 0.8)'; }); }); // Add arrows to the modal content modalContent.appendChild(prevArrow); modalContent.appendChild(nextArrow); // Navigation functionality prevArrow.addEventListener('click', (event) => { event.stopPropagation(); resetImageTransform(); // Reset zoom when navigating currentIndex = (currentIndex === 0) ? images.length - 1 : currentIndex - 1; updateModalImage(currentIndex); }); nextArrow.addEventListener('click', (event) => { event.stopPropagation(); resetImageTransform(); // Reset zoom when navigating currentIndex = (currentIndex === images.length - 1) ? 0 : currentIndex + 1; updateModalImage(currentIndex); }); // Responsiveness adjustments window.addEventListener('resize', adjustLayout); function adjustLayout() { if (window.innerWidth < 768) { // Mobile devices prevArrow.style.fontSize = '30px'; nextArrow.style.fontSize = '30px'; prevArrow.style.left = '10px'; nextArrow.style.right = '10px'; modalImage.style.maxWidth = '100%'; modalImage.style.maxHeight = '95%'; } else { // Desktop devices prevArrow.style.fontSize = '40px'; nextArrow.style.fontSize = '40px'; prevArrow.style.left = '20px'; nextArrow.style.right = '20px'; modalImage.style.maxWidth = '100%'; modalImage.style.maxHeight = '90vh'; } } // Call adjustLayout on load window.dispatchEvent(new Event('resize')); // Função para procurar itens com o valor de R$ 1,00 e modificar o conteúdo function replaceOneRealPrice() { // Procurando todos os elementos com a classe grid-product__price const priceElements = document.querySelectorAll('div.grid-product__price'); priceElements.forEach((priceElement) => { // Verifica se o conteúdo do elemento inclui "R$ 1,00" if (priceElement.textContent.includes('R$ 1,00')) { console.log('Item com preço de R$ 1,00 encontrado.'); // Removendo o elemento com o preço original const originalPriceElement = priceElement.querySelector('span.grid-product__price--original'); if (originalPriceElement) { originalPriceElement.remove(); console.log('Preço original removido.'); } // Substituindo "R$ 1,00" por "Solicitar Preço" priceElement.innerHTML = priceElement.innerHTML.replace('R$ 1,00', 'Solicitar Preço'); console.log('Preço alterado para "Solicitar Preço".'); } }); } // Executando a função quando a página carrega document.addEventListener("DOMContentLoaded", replaceOneRealPrice); // Função para verificar a presença do botão e remover o link do carrinho function checkAndRemoveCartLink() { // Procurando todos os botões na página const buttons = document.querySelectorAll('button.easy-quote-button'); let buttonFound = false; buttons.forEach((button) => { // Verifica se o texto do botão é "SOLICITAR PREÇO" if (button.textContent.trim() === 'SOLICITAR PREÇO') { buttonFound = true; console.log('Botão "SOLICITAR PREÇO" encontrado.'); // Procurando o link do carrinho const cartLink = document.querySelector('a.site-nav__link.site-nav__link--icon.js-drawer-open-cart'); if (cartLink) { // Removendo o link do carrinho cartLink.remove(); console.log('Link do carrinho removido.'); } else { console.log('Link do carrinho não encontrado.'); } } }); if (!buttonFound) { console.log('Botão "SOLICITAR PREÇO" não encontrado.'); } } // Função para tentar novamente se elementos não forem encontrados function waitForElements() { checkAndRemoveCartLink(); // Verifique se ainda não encontrou e tenta novamente após 500ms if (!document.querySelector('button.easy-quote-button') || !document.querySelector('a.site-nav__link.site-nav__link--icon.js-drawer-open-cart')) { setTimeout(waitForElements, 500); } } // Executando a função quando a página carrega document.addEventListener("DOMContentLoaded", waitForElements); // Adicionar Font Awesome let linkFontAwesome = document.createElement('link'); linkFontAwesome.rel = 'stylesheet'; linkFontAwesome.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css'; document.head.appendChild(linkFontAwesome); // Adicionar estilos customizados via JS let style = document.createElement('style'); style.innerHTML = ` .social-btn { display: inline-block; margin-right: 15px; font-size: 24px; color: white; text-decoration: none; border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .social-btn:hover { transform: scale(1.1); } .social-btn.facebook { background-color: #3b5998; } .social-btn.twitter { background-color: #1da1f2; } .social-btn.pinterest { background-color: #bd081c; } .social-btn.whatsapp { background-color: #25d366; } .social-sharing { display: flex; justify-content: center; /* Centraliza horizontalmente */ align-items: center; /* Centraliza verticalmente */ margin-top: 20px; /* Ajusta o espaço superior */ } `; document.head.appendChild(style); // Função para criar os ícones de compartilhamento function createSocialButtons() { const socialSharingDiv = document.querySelector('.social-sharing'); socialSharingDiv.innerHTML = ''; // Facebook const facebookBtn = document.createElement('a'); facebookBtn.href = `https://www.facebook.com/sharer.php?u=${window.location.href}`; facebookBtn.target = '_blank'; facebookBtn.className = 'social-btn facebook'; facebookBtn.innerHTML = ''; socialSharingDiv.appendChild(facebookBtn); // Twitter const twitterBtn = document.createElement('a'); twitterBtn.href = `https://twitter.com/share?url=${window.location.href}&text=Sopro%20de%20Metal,%20por%20Guilherme%20Lopes`; twitterBtn.target = '_blank'; twitterBtn.className = 'social-btn twitter'; twitterBtn.innerHTML = ''; socialSharingDiv.appendChild(twitterBtn); // Pinterest const pinterestBtn = document.createElement('a'); pinterestBtn.href = `https://pinterest.com/pin/create/button/?url=${window.location.href}&media=//umlugaraosol.com.br/cdn/shop/files/GUL002.5_1024x1024.png?v=1688682589&description=Sopro%20de%20Metal,%20por%20Guilherme%20Lopes`; pinterestBtn.target = '_blank'; pinterestBtn.className = 'social-btn pinterest'; pinterestBtn.innerHTML = ''; socialSharingDiv.appendChild(pinterestBtn); // WhatsApp const whatsappBtn = document.createElement('a'); whatsappBtn.href = `https://wa.me/?text=Gostei%20dessa%20obra%20${encodeURIComponent(window.location.href)}`; whatsappBtn.target = '_blank'; whatsappBtn.className = 'social-btn whatsapp'; whatsappBtn.innerHTML = ''; socialSharingDiv.appendChild(whatsappBtn); } // Chama a função para criar os botões createSocialButtons();

Composição IV, por Maramgoní

FIQUE POR DENTRO