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.textAlign = "center"; cardContainer.style.position = "relative"; 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%"; 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) { // Para telas menores (celulares), ajuste para 100% da largura cardContainer.style.width = "100%"; cardContainer.style.margin = "20px 0"; // Ajuste a margem para celular } else { // Em telas maiores, mantém o estilo original cardContainer.style.width = "65%"; cardContainer.style.margin = "40px auto"; } } // Verifica a condição inicial e adiciona o listener handleMobileChange(mediaQuery); mediaQuery.addListener(handleMobileChange); } } } }); document.addEventListener("DOMContentLoaded", function() { if (window.location.pathname.includes("/collections/")) { document.body.classList.add("collections-page"); } }); document.addEventListener('DOMContentLoaded', () => { // Verifica se a página atual é uma página de busca if (!window.location.pathname.includes('/search')) { return; // Sai da execução do script se não for uma página de busca } // Variável global para acessar filtersContainer em várias funções let filtersContainer = null; // Arrays globais para mapear valores aos tipos de filtro const sizes = ['10x10', '15x15', '16x20', '20x20', '20x21', '21x22', '22x23', '25x25', '27x27', '28x30', '30x30', '30x33', '35x35', '40x40', '40x43', '43x45', '45x45', '46x50', '50x50', '55x55', '60x60', '60x62', '65x65', '70x70', '70x73', '74x75', '75x75', '80x80', '80x84', '85x85', '90x90', '90x92', '95x95', '97x100', '100x100', '100x110', '110x110', '110x115', '115x116', '120x120', '120x130', '130x130', '130x140', '140x140', '145x147', '150x150', '150x160', '160x160', '160x180', '200x200', '200x220' ] ; const techniques = [ { name: 'Desenho', icon: 'fas fa-pencil-alt' }, { name: 'Escultura', icon: 'fas fa-monument' }, { name: 'Giclée', icon: 'fas fa-print' }, { name: 'Gravura', icon: 'fas fa-stamp' }, { name: 'Pintura', icon: 'fas fa-palette' } ]; const formats = ['Horizontal', 'Quadrado', 'Vertical']; const styles = [ 'Abstrato', 'Animal', 'Cena de Gênero', 'Figurativo', 'Floral', 'Marinha', 'Naif', 'Natureza-Morta', 'Nu', 'Paisagem', 'Paranaenses', 'Religioso', 'Sacro', 'Street Art', 'Surrealismo', 'Bronze' ]; // Função para esconder o header específico se necessário const hideHeaderIfNecessary = () => { const header = document.querySelector('header.section-header'); if (header) { const headerText = header.textContent.trim().toLowerCase(); if (headerText.includes('pesquisa') || headerText.includes('search')) { header.style.display = 'none'; } } }; // Função para carregar o Font Awesome via CSS const loadFontAwesome = () => { const link = document.createElement('link'); link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'; link.rel = 'stylesheet'; link.crossOrigin = 'anonymous'; document.head.appendChild(link); }; // Função para criar o container principal const createContainers = () => { let containerDiv = document.querySelector('.search-page-container'); if (!containerDiv) { containerDiv = document.createElement('div'); containerDiv.classList.add('search-page-container'); // Inserir o container após o header existente const headerSection = document.querySelector('[data-section-id="header"][data-section-type="header-section"]'); if (headerSection) { headerSection.parentNode.insertBefore(containerDiv, headerSection.nextSibling); } else { // Se não encontrar, adicionar ao body document.body.appendChild(containerDiv); } } return containerDiv; }; // Função para criar o card de título e subtítulo const createTitleCard = (containerDiv) => { // Verifica se o card já existe if (containerDiv.querySelector('.custom-search-header')) return; const customHeader = document.createElement('div'); customHeader.classList.add('custom-search-header'); const title = document.createElement('h1'); title.textContent = 'Busca Personalizada'; customHeader.appendChild(title); const subtitle = document.createElement('p'); subtitle.textContent = 'Obras de arte na medida para você'; customHeader.appendChild(subtitle); containerDiv.appendChild(customHeader); }; // Função para criar o overlay com filtros const createOverlay = (containerDiv) => { // Verifica se o overlay já existe let overlayDiv = containerDiv.querySelector('.search-page-overlay'); if (overlayDiv) return overlayDiv; overlayDiv = document.createElement('div'); overlayDiv.classList.add('search-page-overlay'); containerDiv.appendChild(overlayDiv); return overlayDiv; }; // Função para criar o novo card "Ver Resultados" const createResultsButtonCard = (containerDiv) => { // Verifica se o card já existe if (containerDiv.querySelector('.results-button-card')) return; const resultsCard = document.createElement('div'); resultsCard.classList.add('results-button-card'); const resultsButton = document.createElement('button'); resultsButton.textContent = 'Ver Resultados'; resultsButton.classList.add('ver-resultados-button'); resultsCard.appendChild(resultsButton); containerDiv.appendChild(resultsCard); // Adiciona o card fora do overlay dos filtros // Evento para o botão "Ver Resultados" resultsButton.addEventListener('click', () => { const targetElement = document.querySelector('.page-width.page-content'); if (targetElement) { targetElement.scrollIntoView({ behavior: 'smooth' }); } }); }; // Função para criar os filtros const createFilters = (overlayDiv) => { // Verifica se os filtros já foram criados filtersContainer = overlayDiv.querySelector('.filters-container'); if (filtersContainer) return; // Filtros já existem // Cria o container dos filtros filtersContainer = document.createElement('div'); filtersContainer.classList.add('filters-container'); overlayDiv.appendChild(filtersContainer); // Cria as linhas de filtros const firstRow = document.createElement('div'); firstRow.classList.add('filters-row', 'first-row'); filtersContainer.appendChild(firstRow); const secondRow = document.createElement('div'); secondRow.classList.add('filters-row', 'second-row'); filtersContainer.appendChild(secondRow); const thirdRow = document.createElement('div'); thirdRow.classList.add('filters-row', 'third-row'); filtersContainer.appendChild(thirdRow); // Criação dos filtros createFormatFilter('Orientação', formats, firstRow); createPriceSliderCompact(firstRow); // Filtro de preço com funcionalidade createTechniqueFilter('Técnica', techniques, secondRow); createEstiloFilter('Estilo', styles, thirdRow); createSizeFilter('Tamanho', sizes, thirdRow); // Inserir o formulário de pesquisa (oculto) const searchForm = document.querySelector('.search-bar--page'); if (searchForm) { overlayDiv.appendChild(searchForm); searchForm.style.display = 'none'; // Garantir que esteja oculto } // Marcar filtros selecionados a partir da URL markSelectedFiltersFromURL(); }; // Função para criar filtros com ícones (Técnica) const createTechniqueFilter = (title, techniquesArray, parentRow) => { const filterWrapper = document.createElement('div'); filterWrapper.classList.add('filter-wrapper', 'filter-technique'); const filterTitle = document.createElement('div'); filterTitle.classList.add('filter-title'); const icon = document.createElement('i'); icon.className = 'fas fa-paint-brush'; // Ícone representativo filterTitle.appendChild(icon); const titleText = document.createElement('span'); titleText.textContent = title; filterTitle.appendChild(titleText); filterWrapper.appendChild(filterTitle); const techniqueOptions = document.createElement('div'); techniqueOptions.classList.add('technique-options'); techniquesArray.forEach(technique => { const button = document.createElement('button'); button.type = 'button'; button.classList.add('technique-button'); button.setAttribute('data-value', technique.name); const techIcon = document.createElement('i'); techIcon.className = technique.icon; button.appendChild(techIcon); const techText = document.createElement('span'); techText.textContent = technique.name; button.appendChild(techText); techniqueOptions.appendChild(button); }); filterWrapper.appendChild(techniqueOptions); parentRow.appendChild(filterWrapper); // Eventos para os botões de técnica techniqueOptions.querySelectorAll('.technique-button').forEach(button => { button.addEventListener('click', () => { button.classList.toggle('active'); updateURLFilters(); // Recarregar a página com os novos filtros window.location.href = getNewUrl(); }); }); }; // Função para criar o filtro "Estilo" como dropdown const createEstiloFilter = (title, stylesArray, parentRow) => { const filterWrapper = document.createElement('div'); filterWrapper.classList.add('filter-wrapper', 'filter-estilo'); const filterButton = document.createElement('button'); filterButton.classList.add('filter-button'); const icon = document.createElement('i'); icon.className = 'fas fa-layer-group'; // Ícone representativo filterButton.appendChild(icon); const filterTitle = document.createElement('span'); filterTitle.textContent = title; filterButton.appendChild(filterTitle); const arrowIcon = document.createElement('i'); arrowIcon.className = 'fas fa-chevron-down icon'; filterButton.appendChild(arrowIcon); filterWrapper.appendChild(filterButton); const filterDropdown = document.createElement('div'); filterDropdown.classList.add('filter-dropdown'); stylesArray.forEach(style => { const label = document.createElement('label'); const input = document.createElement('input'); input.type = 'checkbox'; input.value = style; label.appendChild(input); label.appendChild(document.createTextNode(style)); filterDropdown.appendChild(label); }); filterWrapper.appendChild(filterDropdown); parentRow.appendChild(filterWrapper); // Eventos para abrir/fechar o dropdown filterButton.addEventListener('click', function(e) { e.stopPropagation(); closeAllDropdowns(); filterDropdown.classList.toggle('active'); // Adicionar classe para desativar o scroll do body quando o dropdown estiver aberto if (filterDropdown.classList.contains('active')) { document.body.classList.add('no-scroll'); } else { document.body.classList.remove('no-scroll'); } }); // Fechar dropdown ao clicar fora document.addEventListener('click', () => { filterDropdown.classList.remove('active'); document.body.classList.remove('no-scroll'); }); // Eventos dos checkboxes filterDropdown.querySelectorAll('input[type="checkbox"]').forEach(el => { el.addEventListener('change', () => { updateURLFilters(); // Recarregar a página com os novos filtros window.location.href = getNewUrl(); }); }); }; // Função para criar o filtro de formato (botões com ícones) const createFormatFilter = (title, optionsArray, parentRow) => { const filterWrapper = document.createElement('div'); filterWrapper.classList.add('filter-wrapper', 'filter-format'); const filterTitle = document.createElement('div'); filterTitle.classList.add('filter-title'); const icon = document.createElement('i'); icon.className = 'fas fa-vector-square'; filterTitle.appendChild(icon); const titleText = document.createElement('span'); titleText.textContent = title; filterTitle.appendChild(titleText); filterWrapper.appendChild(filterTitle); const filterOptions = document.createElement('div'); filterOptions.classList.add('format-options'); optionsArray.forEach(option => { const button = document.createElement('button'); button.type = 'button'; button.classList.add('format-button'); button.setAttribute('data-value', option); const optionIcon = document.createElement('i'); // Atribuir classes de ícones apropriados switch(option) { case 'Horizontal': optionIcon.className = 'fas fa-arrows-alt-h'; break; case 'Vertical': optionIcon.className = 'fas fa-arrows-alt-v'; break; case 'Quadrado': optionIcon.className = 'fas fa-square'; break; default: optionIcon.className = 'fas fa-arrows-alt'; } button.appendChild(optionIcon); const span = document.createElement('span'); span.textContent = option; button.appendChild(span); filterOptions.appendChild(button); }); filterWrapper.appendChild(filterOptions); parentRow.appendChild(filterWrapper); // Eventos para os botões de formato filterOptions.querySelectorAll('.format-button').forEach(button => { button.addEventListener('click', () => { button.classList.toggle('active'); updateURLFilters(); // Recarregar a página com os novos filtros window.location.href = getNewUrl(); }); }); }; const createPriceSliderCompact = (parentRow) => { const priceSliderWrapper = document.createElement('div'); priceSliderWrapper.classList.add('filter-wrapper', 'price-slider-wrapper'); const priceTitleWrapper = document.createElement('div'); priceTitleWrapper.classList.add('filter-title'); const icon = document.createElement('i'); icon.className = 'fas fa-dollar-sign'; priceTitleWrapper.appendChild(icon); const priceTitle = document.createElement('span'); priceTitle.textContent = 'Preço'; priceTitleWrapper.appendChild(priceTitle); priceSliderWrapper.appendChild(priceTitleWrapper); // Slider de preço compacto const priceSliderContainer = document.createElement('div'); priceSliderContainer.classList.add('price-slider-container'); const sliderWithInputsContainer = document.createElement('div'); sliderWithInputsContainer.classList.add('slider-with-inputs-container'); // **Estrutura para "mínimo" e input1** const minLabel = document.createElement('span'); minLabel.classList.add('price-label', 'min-label'); minLabel.textContent = 'Mínimo'; sliderWithInputsContainer.appendChild(minLabel); const minPriceInput = document.createElement('input'); minPriceInput.type = 'number'; minPriceInput.min = 0; minPriceInput.max = 100000; minPriceInput.value = 0; minPriceInput.classList.add('price-input', 'min-price'); minPriceInput.step = 1000; sliderWithInputsContainer.appendChild(minPriceInput); // **Slider Range** const rangeSlider = document.createElement('div'); rangeSlider.classList.add('range-slider'); const minSlider = document.createElement('input'); minSlider.type = 'range'; minSlider.min = 0; minSlider.max = 100000; minSlider.value = 0; minSlider.classList.add('min-slider'); minSlider.step = 1000; const maxSlider = document.createElement('input'); maxSlider.type = 'range'; maxSlider.min = 0; maxSlider.max = 100000; maxSlider.value = 100000; maxSlider.classList.add('max-slider'); maxSlider.step = 1000; rangeSlider.appendChild(minSlider); rangeSlider.appendChild(maxSlider); sliderWithInputsContainer.appendChild(rangeSlider); // **Estrutura para "máximo" e input2** const maxLabel = document.createElement('span'); maxLabel.classList.add('price-label', 'max-label'); maxLabel.textContent = 'Máximo'; sliderWithInputsContainer.appendChild(maxLabel); const maxPriceInput = document.createElement('input'); maxPriceInput.type = 'number'; maxPriceInput.min = 0; maxPriceInput.max = 100000; maxPriceInput.value = 100000; maxPriceInput.classList.add('price-input', 'max-price'); maxPriceInput.step = 1000; sliderWithInputsContainer.appendChild(maxPriceInput); priceSliderContainer.appendChild(sliderWithInputsContainer); priceSliderWrapper.appendChild(priceSliderContainer); parentRow.appendChild(priceSliderWrapper); // **Adicionar Event Listeners e Funções Relacionadas ao Preço** // Sincronizar sliders e inputs const syncMinSlider = (value) => { value = parseInt(value); const maxSliderValue = parseInt(maxSlider.value) - 1000; if (value > maxSliderValue) { value = maxSliderValue; } if (value < parseInt(minSlider.min)) { value = parseInt(minSlider.min); } minSlider.value = value; minPriceInput.value = value; }; const syncMaxSlider = (value) => { value = parseInt(value); const minSliderValue = parseInt(minSlider.value) + 1000; if (value < minSliderValue) { value = minSliderValue; } if (value > parseInt(maxSlider.max)) { value = parseInt(maxSlider.max); } maxSlider.value = value; maxPriceInput.value = value; }; const syncMinInput = (value) => { value = parseInt(value); const maxPriceValue = parseInt(maxPriceInput.value) - 1000; if (value > maxPriceValue) { value = maxPriceValue; } if (value < parseInt(minPriceInput.min)) { value = parseInt(minPriceInput.min); } minPriceInput.value = value; minSlider.value = value; }; const syncMaxInput = (value) => { value = parseInt(value); const minPriceValue = parseInt(minPriceInput.value) + 1000; if (value < minPriceValue) { value = minPriceValue; } if (value > parseInt(maxPriceInput.max)) { value = parseInt(maxPriceInput.max); } maxPriceInput.value = value; maxSlider.value = value; }; minSlider.addEventListener('input', () => { syncMinSlider(minSlider.value); filterItemsByPrice(); }); maxSlider.addEventListener('input', () => { syncMaxSlider(maxSlider.value); filterItemsByPrice(); }); minPriceInput.addEventListener('change', () => { syncMinInput(minPriceInput.value); filterItemsByPrice(); }); maxPriceInput.addEventListener('change', () => { syncMaxInput(maxPriceInput.value); filterItemsByPrice(); }); // Função para formatar números com separador de milhar const formatNumber = (num) => { return num.toLocaleString('pt-BR'); }; // Atualizar os valores formatados nos inputs const updateFormattedInputs = () => { minPriceInput.value = minPriceInput.value; maxPriceInput.value = maxPriceInput.value; }; // Função para filtrar itens por preço const filterItemsByPrice = () => { const minPrice = parseInt(minPriceInput.value); const maxPrice = parseInt(maxPriceInput.value); // Obter todos os itens const items = document.querySelectorAll('.grid__item.grid-product'); let visibleCount = 0; items.forEach(item => { // Obter preço do item const priceElement = item.querySelector('.grid-product__price'); if (priceElement) { let priceText = priceElement.textContent.trim(); // Remover 'R$' e quaisquer pontos ou vírgulas priceText = priceText.replace('R$', '').trim(); // Substituir '.' por '' e ',' por '.' priceText = priceText.replace(/\./g, '').replace(',', '.'); const price = parseFloat(priceText); if (price >= minPrice && price <= maxPrice) { item.style.display = ''; // Mostrar item visibleCount++; } else { item.style.display = 'none'; // Ocultar item } } }); // Atualizar o número de resultados const resultsHeader = document.querySelector('[data-section-type="collection-template"] h2'); if (resultsHeader) { resultsHeader.textContent = `${visibleCount} resultados`; } }; }; // Função para criar o filtro "Tamanho" dividido em "Altura" e "Largura" const createSizeFilter = (title, sizesArray, parentRow) => { const filterWrapper = document.createElement('div'); filterWrapper.classList.add('filter-wrapper', 'filter-tamanho'); // Título do filtro const filterTitle = document.createElement('div'); filterTitle.classList.add('filter-title'); const icon = document.createElement('i'); icon.className = 'fas fa-ruler-horizontal'; // Ícone representativo filterTitle.appendChild(icon); const titleText = document.createElement('span'); titleText.textContent = title; filterTitle.appendChild(titleText); filterWrapper.appendChild(filterTitle); // Container para Altura e Largura com "x" entre eles const sizeSelectors = document.createElement('div'); sizeSelectors.classList.add('size-selectors'); // Dropdown para Altura const alturaSelect = document.createElement('select'); alturaSelect.classList.add('size-select', 'altura-select'); const alturaPlaceholder = document.createElement('option'); alturaPlaceholder.value = ''; alturaPlaceholder.textContent = 'Altura'; alturaSelect.appendChild(alturaPlaceholder); // Dropdown para Largura const larguraSelect = document.createElement('select'); larguraSelect.classList.add('size-select', 'largura-select'); const larguraPlaceholder = document.createElement('option'); larguraPlaceholder.value = ''; larguraPlaceholder.textContent = 'Comprimento'; larguraSelect.appendChild(larguraPlaceholder); // Processar as opções para Altura e Largura const alturaOptions = new Set(); const larguraOptions = new Set(); sizesArray.forEach(size => { const [altura, largura] = size.split('x'); if (altura && largura) { alturaOptions.add(altura); larguraOptions.add(largura); } }); alturaOptions.forEach(altura => { const option = document.createElement('option'); option.value = altura; option.textContent = altura; alturaSelect.appendChild(option); }); larguraOptions.forEach(largura => { const option = document.createElement('option'); option.value = largura; option.textContent = largura; larguraSelect.appendChild(option); }); // Adicionar "x" entre os dropdowns const xSpan = document.createElement('span'); xSpan.classList.add('size-x'); xSpan.textContent = 'x'; sizeSelectors.appendChild(alturaSelect); sizeSelectors.appendChild(xSpan); sizeSelectors.appendChild(larguraSelect); filterWrapper.appendChild(sizeSelectors); parentRow.appendChild(filterWrapper); // Eventos para dropdowns alturaSelect.addEventListener('change', () => { updateURLFilters(); // Recarregar a página com os novos filtros window.location.href = getNewUrl(); }); larguraSelect.addEventListener('change', () => { updateURLFilters(); // Recarregar a página com os novos filtros window.location.href = getNewUrl(); }); }; // Função para fechar todos os dropdowns const closeAllDropdowns = () => { document.querySelectorAll('.filter-dropdown').forEach(dropdown => dropdown.classList.remove('active')); document.body.classList.remove('no-scroll'); }; // Função para atualizar a URL com os filtros selecionados (excluindo preço) const updateURLFilters = () => { // Coletar valores selecionados de cada filtro const selectedAltura = filtersContainer.querySelector('.altura-select').value; const selectedLargura = filtersContainer.querySelector('.largura-select').value; const selectedTechniques = Array.from(filtersContainer.querySelectorAll('.filter-technique .technique-button.active')).map(el => el.getAttribute('data-value')); const selectedFormats = Array.from(filtersContainer.querySelectorAll('.filter-format .format-button.active')).map(el => el.getAttribute('data-value')); const selectedStyles = Array.from(filtersContainer.querySelectorAll('.filter-estilo input[type="checkbox"]:checked')).map(el => el.value); // Coletar todos os valores selecionados em um único array let filterValues = []; if (selectedTechniques.length) filterValues = filterValues.concat(selectedTechniques); if (selectedFormats.length) filterValues = filterValues.concat(selectedFormats); if (selectedStyles.length) filterValues = filterValues.concat(selectedStyles); if (selectedAltura) filterValues.push(selectedAltura); if (selectedLargura) filterValues.push(selectedLargura); // Remover duplicatas const uniqueFilterValues = [...new Set(filterValues)]; // Combinar com ' AND ' const qValue = uniqueFilterValues.map(value => encodeURIComponent(value)).join('+AND+'); // Construir os novos parâmetros de consulta let queryParts = []; // Adicionar tipo de produto queryParts.push(`type=product`); // Adicionar parâmetro q se houver filtros selecionados if (qValue) { queryParts.push(`q=${qValue}`); } // Construir a nova string de consulta const queryString = queryParts.join('&'); // Construir a nova URL const newUrl = `${window.location.pathname}?${queryString}`; // Função auxiliar para retornar a nova URL return newUrl; }; // Função para obter a nova URL após atualizar os filtros const getNewUrl = () => { return updateURLFilters(); }; // Função para marcar os filtros selecionados a partir da URL const markSelectedFiltersFromURL = () => { const urlParams = new URLSearchParams(window.location.search); const qParam = urlParams.get('q') || ''; console.log('qParam:', qParam); // Log do parâmetro q if (!qParam) { console.log('Nenhum filtro selecionado na URL.'); return; // Nenhum filtro selecionado } // Separar os valores de q por ' AND ' e filtrar const selectedValues = qParam.split(/\s+AND\s+/i).map(val => val.trim()).filter(val => val !== ''); console.log('selectedValues:', selectedValues); // Log dos valores selecionados // **Resetar todas as seleções para evitar duplicações ou conflitos** // Remover 'active' de todos os botões de técnica filtersContainer.querySelectorAll('.filter-technique .technique-button.active').forEach(button => { button.classList.remove('active'); console.log(`Removendo classe 'active' do botão de técnica: ${button.getAttribute('data-value')}`); }); // Remover 'active' de todos os botões de formato filtersContainer.querySelectorAll('.filter-format .format-button.active').forEach(button => { button.classList.remove('active'); console.log(`Removendo classe 'active' do botão de formato: ${button.getAttribute('data-value')}`); }); // Desmarcar todos os checkboxes de estilo filtersContainer.querySelectorAll('.filter-estilo input[type="checkbox"]:checked').forEach(checkbox => { checkbox.checked = false; console.log(`Desmarcando checkbox de estilo: ${checkbox.value}`); }); // Resetar selects de altura e largura const alturaSelect = filtersContainer.querySelector('.altura-select'); const larguraSelect = filtersContainer.querySelector('.largura-select'); if (alturaSelect) { alturaSelect.value = ''; console.log('Resetando select de altura.'); } if (larguraSelect) { larguraSelect.value = ''; console.log('Resetando select de largura.'); } // **Agora, marcar os filtros que estão na URL** // Usar um loop 'for...of' para melhor controle for (const value of selectedValues) { console.log(`Processando valor selecionado: ${value}`); // Verificar se o valor está nas técnicas const technique = techniques.find(t => t.name.toLowerCase() === value.toLowerCase()); if (technique) { const button = filtersContainer.querySelector(`.filter-technique .technique-button[data-value="${technique.name}"]`); if (button) { button.classList.add('active'); console.log(`Marcando técnica ativa: ${technique.name}`); } else { console.log(`Botão de técnica não encontrado para: ${technique.name}`); } continue; // Passar para o próximo valor } // Verificar se o valor está nos formatos const format = formats.find(f => f.toLowerCase() === value.toLowerCase()); if (format) { const button = filtersContainer.querySelector(`.filter-format .format-button[data-value="${format}"]`); if (button) { button.classList.add('active'); console.log(`Marcando formato ativo: ${format}`); } else { console.log(`Botão de formato não encontrado para: ${format}`); } continue; // Passar para o próximo valor } // Verificar se o valor está nos estilos const style = styles.find(s => s.toLowerCase() === value.toLowerCase()); if (style) { const checkbox = filtersContainer.querySelector(`.filter-estilo input[type="checkbox"][value="${style}"]`); if (checkbox) { checkbox.checked = true; console.log(`Marcando checkbox de estilo: ${style}`); } else { console.log(`Checkbox de estilo não encontrado para: ${style}`); } continue; // Passar para o próximo valor } // Verificar se o valor está nas alturas if (sizes.some(size => size.toLowerCase().startsWith(`${value.toLowerCase()}x`))) { if (alturaSelect) { alturaSelect.value = value; console.log(`Selecionando altura: ${value}`); } continue; // Passar para o próximo valor } // Verificar se o valor está nas larguras if (sizes.some(size => size.toLowerCase().endsWith(`x${value.toLowerCase()}`))) { if (larguraSelect) { larguraSelect.value = value; console.log(`Selecionando largura: ${value}`); } continue; // Passar para o próximo valor } console.log(`Valor não corresponde a nenhum filtro conhecido: ${value}`); } }; // Inicialização hideHeaderIfNecessary(); loadFontAwesome(); const containerDiv = createContainers(); createTitleCard(containerDiv); const overlayDiv = createOverlay(containerDiv); createFilters(overlayDiv); createResultsButtonCard(containerDiv); // Adiciona o botão "Ver Resultados" fora do overlay dos filtros }); document.addEventListener("DOMContentLoaded", function() { document.querySelector('meta[name="description"]').setAttribute("content", "123"); }); // Adiciona Font Awesome dinamicamente const link = document.createElement("link"); link.rel = "stylesheet"; link.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"; document.head.appendChild(link); // Seleciona cada link de compartilhamento e aplica o ícone correspondente document.querySelector(".social-sharing a[title*='Facebook']").classList.add("facebook"); document.querySelector(".social-sharing a[title*='Twitter']").classList.add("twitter"); document.querySelector(".social-sharing a[title*='Pinterest']").classList.add("pinterest"); // Adiciona o ícone específico para cada link document.querySelector(".social-sharing a[title*='Facebook']").innerHTML = ''; document.querySelector(".social-sharing a[title*='Twitter']").innerHTML = ''; document.querySelector(".social-sharing a[title*='Pinterest']").innerHTML = ''; // Adiciona o segundo botão de WhatsApp const whatsappShare = document.createElement("a"); whatsappShare.classList.add("social-sharing__link", "whatsapp"); whatsappShare.href = "#"; whatsappShare.innerHTML = ''; // Função para compartilhar a URL atual com mensagem predefinida whatsappShare.addEventListener("click", (event) => { event.preventDefault(); const currentUrl = window.location.href; const whatsappMessage = `Gostei dessa obra ${currentUrl}`; const whatsappLink = `https://api.whatsapp.com/send?phone=554130137873&text=${encodeURIComponent(whatsappMessage)}`; window.open(whatsappLink, "_blank"); }); // Adiciona o segundo botão de WhatsApp ao contêiner document.querySelector(".social-sharing").appendChild(whatsappShare); // 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); // Select the main product images 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 startY = 0; let translateX = 0; let translateY = 0; let initialTranslateX = 0; let initialTranslateY = 0; const scaleFactor = 2; // Zoom scale factor // 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'; translateX = 0; translateY = 0; modalImage.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scaleFactor})`; 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; startY = touches.clientY; initialTranslateX = translateX; initialTranslateY = translateY; } // Handle touch move for panning with constraints function handleTouchMove(evt) { evt.preventDefault(); // Prevent scrolling const touches = evt.touches[0]; const deltaX = touches.clientX - startX; const deltaY = touches.clientY - startY; // Update translateX and translateY translateX = initialTranslateX + deltaX; translateY = initialTranslateY + deltaY; // Calculate the maximum translate values const imageWidth = modalImage.clientWidth; const imageHeight = modalImage.clientHeight; const scaledWidth = imageWidth * scaleFactor; const scaledHeight = imageHeight * scaleFactor; const maxTranslateX = (scaledWidth - imageWidth) / 2; const maxTranslateY = (scaledHeight - imageHeight) / 2; // Clamp translateX and translateY translateX = Math.max(-maxTranslateX, Math.min(translateX, maxTranslateX)); translateY = Math.max(-maxTranslateY, Math.min(translateY, maxTranslateY)); // Apply the transform modalImage.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scaleFactor})`; } // 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'));

Illustration for the book Desabrigo by Antonio Fraga, by Poty Lazzarotto

STAY IN THE KNOW