// ========================================================= // 1. CONFIGURACIÓN DE TALLAS DINÁMICAS // ========================================================= const DEFAULT_SIZES = ['S', 'M', 'L', 'XL', 'XXL']; const KIDS_SIZES = ['8', '10', '12', '14', '16']; const MUJERES_SIZES = ['S', 'M', 'L', 'XL']; const SIZE_EXCLUSIONS = { 'POLOS Y BIVIDIS': ['XXL'], 'BRIEF': ['XXL'], 'MEDIAS': ['XL', 'XXL'], 'MUJERES': ['XXL'], 'PIJAMAS': ['S', 'XL', 'XXL'] }; // ========================================================= // 2. FUNCIONES DE LÓGICA DE FILTRADO // ========================================================= function sizeMatches(productSize, selectedSize) { const cleanProductSize = productSize.trim().toUpperCase(); const cleanSelectedSize = selectedSize.trim().toUpperCase(); const exactMatch = cleanProductSize === cleanSelectedSize; const startsWithSize = cleanProductSize.startsWith(cleanSelectedSize + '-') || cleanProductSize.startsWith(cleanSelectedSize + '_') || cleanProductSize.startsWith(cleanSelectedSize + ' ') || cleanProductSize.startsWith(cleanSelectedSize + '/'); return exactMatch || startsWithSize; } function applyFilter(selectedSize) { console.log('🔍 Aplicando filtro para talla:', selectedSize); const allProducts = document.querySelectorAll('.gbbProductItem'); allProducts.forEach(product => { product.classList.remove('product-hidden'); const productId = product.getAttribute('productid') || product.querySelector('[productid]')?.getAttribute('productid'); const isProductInCart = document.querySelector(`.gbbSlotFooterProductContainer[productid="${productId}"]`); if (isProductInCart) { product.classList.add('product-hidden'); return; } let hasSize = false; let firstMatchingOption = null; const optionsContainer = product.querySelector('.gbbVariantOptionsContainer'); if (optionsContainer) { const variantOptions = optionsContainer.querySelectorAll('.gbbVariantOption'); variantOptions.forEach(option => { const variantSize = option.getAttribute('data-variant-options'); if (variantSize && sizeMatches(variantSize, selectedSize)) { hasSize = true; if (!firstMatchingOption) { firstMatchingOption = option; } } }); if (hasSize && firstMatchingOption) { if (!product.classList.contains('product-hidden')) { firstMatchingOption.click(); } } } else { const selectedVariantTitle = product.querySelector('.gbbSelectedVariantTitle'); if (selectedVariantTitle) { const singleSize = selectedVariantTitle.textContent; if (sizeMatches(singleSize, selectedSize)) { hasSize = true; } } if (!hasSize) { const productTitle = product.querySelector('.gbbProductTitleOnly'); if (productTitle) { const titleText = productTitle.textContent.trim(); const regex = new RegExp(`[|\\-]\\s*${selectedSize}\\s*$`, 'i'); if (regex.test(titleText)) { hasSize = true; } } } } product.classList.toggle('product-hidden', !hasSize); }); console.log('✅ Filtro aplicado'); } function clearFilter(shouldDeactivateButtons = true) { console.log('🧹 Limpiando filtro: mostrando todos los productos.'); const allProducts = document.querySelectorAll('.gbbProductItem'); allProducts.forEach(product => { product.classList.remove('product-hidden'); }); if (shouldDeactivateButtons) { const buttons = document.querySelectorAll('.size-filter-btn'); buttons.forEach(btn => btn.classList.remove('active')); console.log('🧹 Botones desmarcados.'); } } // ========================================================= // 3. LÓGICA DINÁMICA DE BOTONES Y OBSERVADOR DE CATEGORÍAS // ========================================================= function getActiveCategoryTitle() { const activeTab = document.querySelector('.gbbCategoryTabContainer[data-is-active="true"]'); if (activeTab) { const titleDiv = activeTab.querySelector('.gbbCategoryTabTitle'); if (titleDiv) { const clone = titleDiv.cloneNode(true); clone.querySelectorAll('img').forEach(img => img.remove()); return clone.textContent.trim().toUpperCase(); } } return null; } function updateSizeButtons() { const sizeFilter = document.querySelector('#size-filter'); if (!sizeFilter) return; const activeCategory = getActiveCategoryTitle(); console.log('🔄 Categoría activa detectada:', activeCategory); let sizesToShow = [...DEFAULT_SIZES]; // ✅ BUG CORREGIDO: un solo bloque if/else if encadenado if (activeCategory === 'KIDS') { sizesToShow = [...KIDS_SIZES]; } else if (activeCategory === 'MUJERES') { sizesToShow = [...MUJERES_SIZES]; } else if (activeCategory && SIZE_EXCLUSIONS[activeCategory]) { const exclusions = SIZE_EXCLUSIONS[activeCategory]; sizesToShow = sizesToShow.filter(size => !exclusions.includes(size.toUpperCase())); } // Limpiar botones anteriores sizeFilter.innerHTML = ''; // Crear nuevos botones sizesToShow.forEach(size => { const btn = document.createElement('button'); btn.className = 'size-filter-btn'; btn.dataset.size = size; btn.textContent = size; btn.style.minWidth = '48px'; btn.style.padding = '0.5em 1em'; btn.style.borderRadius = '9999px'; btn.style.border = '1px solid #000'; btn.style.background = 'white'; btn.style.cursor = 'pointer'; btn.style.fontWeight = '500'; btn.style.transition = 'all 0.2s'; btn.addEventListener('click', (event) => { event.preventDefault(); event.stopPropagation(); event.stopImmediatePropagation(); console.log('👆 Click en botón:', btn.dataset.size); sizeFilter.querySelectorAll('.size-filter-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); const selectedSize = btn.dataset.size.toUpperCase(); applyFilter(selectedSize); setTimeout(() => { closeDrawerIfOpen(); }, 1000); }, true); sizeFilter.appendChild(btn); }); console.log('✅ Botones de talla actualizados para:', sizesToShow.join(', ')); clearFilter(true); } function setupCategoryObserver() { const tabContainers = document.querySelectorAll('.gbbCategoryTabContainer'); console.log(`👂 Configurando observadores de categoría en ${tabContainers.length} elementos.`); if (tabContainers.length === 0) return; const observerCallback = function(mutationsList) { for (const mutation of mutationsList) { if (mutation.type === 'attributes' && mutation.attributeName === 'data-is-active') { const target = mutation.target; if (target.getAttribute('data-is-active') === 'true') { console.log('💥 Cambio de pestaña detectado. Actualizando filtro...'); updateSizeButtons(); } } } }; const observerConfig = { attributes: true, attributeFilter: ['data-is-active'] }; tabContainers.forEach(tab => { const tabObserver = new MutationObserver(observerCallback); tabObserver.observe(tab, observerConfig); }); } function injectSizeFilter() { const headerContainer = document.querySelector('.gbbMultipleCategoryHeaderContainer'); const existingFilter = document.querySelector('#size-filter-container'); if (!headerContainer || existingFilter) { return !!existingFilter; } console.log('🚀 Inyectando contenedor del filtro de tallas...'); const container = document.createElement('div'); container.id = 'size-filter-container'; container.style.display = 'flex'; container.style.alignItems = 'center'; container.style.justifyContent = 'center'; container.style.gap = '15px'; container.style.flexWrap = 'wrap'; container.style.margin = '15px 0'; const label = document.createElement('span'); label.textContent = 'Selecciona tu talla:'; label.style.fontWeight = '600'; container.appendChild(label); const sizeFilter = document.createElement('div'); sizeFilter.id = 'size-filter'; sizeFilter.style.display = 'flex'; sizeFilter.style.gap = '8px'; container.appendChild(sizeFilter); headerContainer.insertAdjacentElement('afterend', container); console.log('✅ Contenedor de filtro inyectado correctamente'); setupCategoryObserver(); updateSizeButtons(); return true; } // ========================================================= // 4. INYECCIÓN DE ESTILOS Y OBSERVADOR PRINCIPAL // ========================================================= console.log('💅 Inyectando estilos CSS...'); const style = document.createElement('style'); style.textContent = ` .size-filter-btn:hover { background: black !important; color: white !important; } .size-filter-btn.active { background: black !important; color: white !important; } .product-hidden { display: none !important; } #size-filter-container, #size-filter, .size-filter-btn { pointer-events: auto !important; position: relative; z-index: 1; } `; document.head.appendChild(style); console.log('✅ Estilos CSS inyectados'); const targetNode = document.body; const config = { childList: true, subtree: true }; const callback = function(mutationsList, observer) { if (document.querySelector('.gbbMultipleCategoryHeaderContainer')) { const injected = injectSizeFilter(); if (injected) { console.log('✅ Contenedor encontrado e inyectado. Deteniendo observador principal.'); observer.disconnect(); } } }; console.log('⏳ Iniciando observador principal para inyectar filtro.'); const observer = new MutationObserver(callback); observer.observe(targetNode, config); injectSizeFilter(); // ========================================================= // 5. GUÍA DE TALLAS INTERACTIVA (POP-UP) // ========================================================= (function() { function injectModalStyles() { if (document.getElementById('custom-size-guide-styles')) return; const style = document.createElement('style'); style.id = 'custom-size-guide-styles'; style.innerHTML = ` .custom-size-guide-modal-overlay { display: none; position: fixed; z-index: 99999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); justify-content: center; align-items: center; overflow-y: auto; padding: 20px 0; } .custom-size-guide-modal-content { background-color: #fefefe; padding: 25px; border: none; width: 90%; max-width: 800px; border-radius: 10px; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.4); margin: auto; animation: fadeIn 0.3s; color: #333; } .custom-size-guide-close-button { color: #999; position: absolute; top: 10px; right: 20px; font-size: 30px; cursor: pointer; transition: color 0.2s; } .custom-size-guide-close-button:hover { color: #000; } .custom-tabs-container { border-bottom: 2px solid #ddd; margin-top: 15px; display: flex; flex-wrap: wrap; gap: 5px; } .custom-tab-button { background-color: transparent; border: none; outline: none; cursor: pointer; padding: 10px 15px; font-size: 15px; color: #555; border-radius: 4px 4px 0 0; transition: color 0.2s, border-bottom 0.2s; } .custom-tab-button:hover { color: #000; } .custom-tab-button.active { color: #007bff; border-bottom: 3px solid #007bff; font-weight: bold; background-color: #fff; } .custom-size-table { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 14px; } .custom-size-table th, .custom-size-table td { border: 1px solid #eee; padding: 12px 8px; text-align: center; } .custom-size-table th { background-color: #f8f8f8; color: #333; font-weight: 600; } .custom-size-table tr:nth-child(even) { background-color: #fafafa; } #custom-open-size-guide { background: none; border: none; cursor: pointer; font-size: 16px; color: black; text-decoration: underline; padding: 0; margin-left: 10px; font-weight: normal; transition: color 0.2s; } #custom-open-size-guide:hover { color: #0056b3; } .custom-measurement-img { max-width: 100%; height: auto; display: block; margin: 20px auto; border: 1px solid #eee; border-radius: 5px; } .custom-info-section { padding: 15px; margin-top: 20px; border: 1px solid #ddd; border-radius: 6px; background-color: #f9f9f9; } .custom-info-section h5 { margin-top: 0; color: #007bff; } .custom-info-section p { line-height: 1.5; margin-bottom: 10px; } .custom-info-section p:last-child { margin-bottom: 0; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } `; document.head.appendChild(style); } const measurementGuideHTML = `

Guía de Medición

Cintura: Mida alrededor de su línea natural de la cintura manteniendo la cinta métrica ligeramente suelta.

Entrepierna (Inseam): Párese con los pies separados 15 cm. Mida a lo largo de la parte interior de la pierna desde la ingle hasta la abertura de la pierna.

Busto: Mida alrededor de la parte más completa de su busto.

`; const imagePlaceholderHTML = `

Reemplaza esta URL con el enlace de tu imagen. `; const boxersDetails = `

Boxer Estándar para Hombre

El Boxer de Longitud Estándar tiene una entrepierna de 18 cm y ofrece un ajuste ligeramente compresivo. Recomendamos elegir una talla más grande si prefiere un ajuste más holgado o tiene piernas más anchas.

`; const sportyDetails = `

Colección Sporty - Ajuste de Alto Rendimiento

Esta colección está diseñada para ofrecer soporte y compresión. Si duda entre dos tallas, o prefiere un ajuste más cómodo para el uso diario, considere elegir la talla mayor.

`; const infantesDetails = `

Guía para Ropa Infantil

Las tallas de infantes se basan principalmente en la edad y la estatura. Si el niño se encuentra en el límite entre dos tallas, siempre elija la talla superior para asegurar un mejor calce y durabilidad.

`; const sizeData = { HOMBRES: { BOXERS: ` ${boxersDetails} ${imagePlaceholderHTML}

Hombres - Boxers (S a XXL)

Talla	S	M	L	XL
(D) Elástico	65 cm	70 cm	73 cm	76 cm
(C) Cadera / Hip	70-79 cm	80-89 cm	90-99 cm	100-115 cm
(A) Alto / Alto	22.5 cm	24 cm	25 cm	27 cm
(B) Pierna / Entrepierna	40-45 cm	46-52 cm	52-60 cm	61-80 cm

${measurementGuideHTML} `, BRIEFS: ` ${imagePlaceholderHTML}

Hombres - Briefs (S a XL)

Características del Brief

Diseño clásico y cómodo para el uso diario. Ofrece soporte sin compresión excesiva.

Talla	S	M	L	XL
Elástico
Cadera

${measurementGuideHTML} `, POLOS: ` ${imagePlaceholderHTML}

Hombres - Polos (S a XL)

Talla	S	M	L	XL
Pecho	48 cm	49.5 cm	51 cm	54 cm
Manga	19 cm	19.5 cm	20.5 cm	22 cm
Largo	65.5 cm	67.5 cm	70 cm	71.5 cm

`, BIVIDIS: ` ${imagePlaceholderHTML}

Hombres - Bividis (S a XL)

Talla	S	M	L	XL
Pecho	35 cm	36 cm	37.5 cm	39 cm
Largo	63.5 cm	66 cm	68 cm	69 cm

`, PIJAMAS: ` ${imagePlaceholderHTML}

Hombres - Pijama Polo (S a XL)

Talla	S	M	L	XL
Pecho	53 cm	54 cm	56 cm	57 cm
Largo	71 cm	73 cm	75 cm	78 cm

Hombres - Pijama Short (S a XL)

Talla	S	M	L	XL
Cintura	60 cm	64 cm	68 cm	70 cm
Largo	44 cm	46 cm	49 cm	50 cm

`, MEDIAS: ` ${imagePlaceholderHTML}

Medias - Hombre (S a XL)

Talla	S	M	L	XL
Talla de Pie	32 - 34	35 - 39	39 - 42	43 - 45
Tipo	Unisex	Unisex	Unisex	Unisex

` }, MUJERES: { SPORTY: ` ${sportyDetails} ${imagePlaceholderHTML}

Mujeres - Sporty (XS a XL)

Talla	XS	S	M	L	XL
Contorno de Busto
Contorno de Cintura
Contorno de Cadera
Largo (Legging)

${measurementGuideHTML} `, PIJAMAS: ` ${imagePlaceholderHTML}

Mujeres - Pijamas (XS a XL)

Pijamas Confortables

Diseño holgado para máximo confort durante el descanso.

Talla	XS	S	M	L	XL
Busto
Cintura
Cadera

${measurementGuideHTML} ` }, INFANTES: { BOXERS: ` ${infantesDetails} ${imagePlaceholderHTML}

Infantes - Boxers (Tallas 10 a 16)

Talla	10	12	14	16
Edad Aprox.	8-9 años	10-11 años	12-13 años	14-15 años
Estatura (cm)				159-167
Cintura
Cadera

`, GENERAL: ` ${infantesDetails} ${imagePlaceholderHTML}

Infantes - Ropa General (Tallas 10 a 16)

Talla	10	12	14	16
Edad Aprox.	8-9 años	10-11 años	12-13 años	14-15 años
Estatura (cm)
Pecho
Cintura

` } }; function showCategory(categoryName) { document.querySelectorAll('#mainTabs .custom-tab-button').forEach(btn => { btn.classList.remove('active'); }); const activeBtn = document.querySelector(`#mainTabs button[data-category="${categoryName}"]`); if (activeBtn) activeBtn.classList.add('active'); const categoryContent = sizeData[categoryName]; if (!categoryContent) return; const subKeys = Object.keys(categoryContent); const firstKey = subKeys[0]; let innerHTML = '

'; subKeys.forEach((subItem, index) => { const buttonText = subItem.toUpperCase().replace('_', ' '); const activeClass = index === 0 ? 'active' : ''; innerHTML += ``; }); innerHTML += '

'; document.getElementById('contentContainer').innerHTML = innerHTML; document.querySelectorAll('#subTabs .custom-tab-button').forEach(btn => { btn.addEventListener('click', function() { const subItem = this.getAttribute('data-subitem'); showSubContent(categoryName, subItem, this); }); }); showSubContent(categoryName, firstKey, document.querySelector('#subTabs .custom-tab-button')); } function showSubContent(categoryName, subItem, tabElement) { const subContentContainer = document.getElementById('subContentContainer'); if (!subContentContainer) return; document.querySelectorAll('#subTabs .custom-tab-button').forEach(btn => { btn.classList.remove('active'); }); if (tabElement) tabElement.classList.add('active'); if (sizeData[categoryName] && sizeData[categoryName][subItem]) { subContentContainer.innerHTML = sizeData[categoryName][subItem]; } } function openModal() { const modal = document.getElementById('sizeGuideModal'); if (modal) { modal.style.display = 'flex'; showCategory('HOMBRES'); } } function closeModal() { const modal = document.getElementById('sizeGuideModal'); if (modal) modal.style.display = 'none'; } window.sizeGuideShowCategory = showCategory; window.sizeGuideCloseModal = closeModal; function createAndInjectModalHTML() { if (document.getElementById('sizeGuideModal')) return; const sizeFilterContainer = document.querySelector('#size-filter-container'); const openButton = document.createElement('button'); openButton.id = 'custom-open-size-guide'; openButton.textContent = 'Guía de Tallas'; openButton.onclick = openModal; if (sizeFilterContainer) { sizeFilterContainer.appendChild(openButton); } else { document.body.appendChild(openButton); } const modalOverlay = document.createElement('div'); modalOverlay.id = 'sizeGuideModal'; modalOverlay.className = 'custom-size-guide-modal-overlay'; modalOverlay.innerHTML = ` `; document.body.appendChild(modalOverlay); const closeButton = modalOverlay.querySelector('.custom-size-guide-close-button'); closeButton.addEventListener('click', closeModal); modalOverlay.addEventListener('click', function(event) { if (event.target === modalOverlay) closeModal(); }); document.querySelectorAll('#mainTabs .custom-tab-button').forEach(btn => { btn.addEventListener('click', function() { const category = this.getAttribute('data-category'); showCategory(category); }); }); } const targetNodeModal = document.body; const configModal = { childList: true, subtree: true }; let initialized = false; const callbackModal = function(mutationsList, observer) { if (!initialized && document.querySelector('#size-filter-container')) { console.log('✅ Contenedor encontrado. Inyectando guía de tallas.'); injectModalStyles(); createAndInjectModalHTML(); initialized = true; observer.disconnect(); } }; console.log('⏳ Observando DOM para inyectar Guía de Tallas...'); const modalObserver = new MutationObserver(callbackModal); modalObserver.observe(targetNodeModal, configModal); if (document.querySelector('#size-filter-container') && !initialized) { injectModalStyles(); createAndInjectModalHTML(); initialized = true; } })(); // ========================================================= // 6. BOTÓN FLOTANTE (solo desktop) // ========================================================= if (window.innerWidth > 768) { const cartContainer = document.createElement('div'); cartContainer.id = 'floatingCartContainer'; cartContainer.innerHTML = ` `; cartContainer.style.cssText = ` position: fixed; bottom: 30px; right: 30px; display: flex; align-items: center; gap: 12px; z-index: 9999; opacity: 0; transform: translateY(20px); transition: all 0.4s ease; pointer-events: none; `; document.body.appendChild(cartContainer); const cartButton = document.getElementById('floatingCartButton'); const tooltip = cartContainer.querySelector('.tooltip-text'); tooltip.style.cssText = ` background: #000; color: #fff; padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; white-space: nowrap; opacity: 0; transform: translateX(10px); transition: all 0.3s ease; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,0.2); `; cartButton.style.cssText = ` width: 60px; height: 60px; background: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: all 0.3s ease; text-decoration: none; `; let autoTooltipShown = false; let isVisible = false; window.addEventListener('scroll', () => { const scrollPosition = window.scrollY; if (scrollPosition > 300 && !isVisible) { cartContainer.style.opacity = '1'; cartContainer.style.transform = 'translateY(0)'; cartContainer.style.pointerEvents = 'auto'; isVisible = true; if (!autoTooltipShown) { setTimeout(() => { tooltip.style.opacity = '1'; tooltip.style.transform = 'translateX(0)'; setTimeout(() => { tooltip.style.opacity = '0'; tooltip.style.transform = 'translateX(10px)'; }, 3000); autoTooltipShown = true; }, 2000); } } else if (scrollPosition <= 300 && isVisible) { cartContainer.style.opacity = '0'; cartContainer.style.transform = 'translateY(20px)'; cartContainer.style.pointerEvents = 'none'; isVisible = false; } }); cartContainer.addEventListener('mouseenter', () => { cartButton.style.transform = 'scale(1.1)'; cartButton.style.boxShadow = '0 6px 16px rgba(0,0,0,0.4)'; tooltip.style.opacity = '1'; tooltip.style.transform = 'translateX(0)'; }); cartContainer.addEventListener('mouseleave', () => { cartButton.style.transform = 'scale(1)'; cartButton.style.boxShadow = '0 4px 12px rgba(0,0,0,0.3)'; tooltip.style.opacity = '0'; tooltip.style.transform = 'translateX(10px)'; }); cartButton.addEventListener('click', (e) => { e.preventDefault(); const footer = document.querySelector('.gbbPageFooterHTML'); if (footer) footer.scrollIntoView({ behavior: 'smooth', block: 'start' }); }); window.addEventListener('resize', () => { if (window.innerWidth <= 768 && document.getElementById('floatingCartContainer')) { document.getElementById('floatingCartContainer').remove(); } }); } // ========================================================= // 7. SCROLL INDEPENDIENTE (solo desktop) // ========================================================= function aplicarScrollIndependiente() { const isDesktop = window.innerWidth > 768; if (!isDesktop) return; const productosContainer = document.querySelector('.gbbMultipleCategoryBodyContainer'); const footerContainer = document.querySelector('.gbbPageFooterHTML'); if (!productosContainer || !footerContainer) { setTimeout(aplicarScrollIndependiente, 500); return; } const mainContainer = document.querySelector('.gbbMultipleCategoriesContainerHTML'); if (mainContainer) { mainContainer.style.display = 'flex'; mainContainer.style.flexDirection = 'column'; mainContainer.style.height = '100vh'; mainContainer.style.overflow = 'hidden'; } const headerContainer = document.querySelector('.gbbMultipleCategoryHeaderContainer'); if (headerContainer) headerContainer.style.flexShrink = '0'; const sizeFilter = document.getElementById('size-filter-container'); if (sizeFilter) sizeFilter.style.flexShrink = '0'; productosContainer.style.flex = '1'; productosContainer.style.overflowY = 'auto'; productosContainer.style.overflowX = 'hidden'; productosContainer.style.maxHeight = 'calc(100vh - 180px)'; productosContainer.style.minHeight = '70vh'; productosContainer.style.borderBottom = '3px solid #ddd'; productosContainer.style.borderLeft = '3px solid #ddd'; productosContainer.style.padding = '10px 5px'; productosContainer.style.webkitOverflowScrolling = 'touch'; productosContainer.style.width = '100%'; const scrollStyle = document.createElement('style'); scrollStyle.textContent = ` .gbbMultipleCategoryBodyContainer::-webkit-scrollbar { width: 12px; } .gbbMultipleCategoryBodyContainer::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } .gbbMultipleCategoryBodyContainer::-webkit-scrollbar-thumb { background: #888; border-radius: 10px; border: 2px solid #f1f1f1; } .gbbMultipleCategoryBodyContainer::-webkit-scrollbar-thumb:hover { background: #555; } .gbbMultipleCategoryBodyContainer { scrollbar-width: thin; scrollbar-color: #888 #f1f1f1; } `; document.head.appendChild(scrollStyle); footerContainer.style.flexShrink = '0'; footerContainer.style.position = 'sticky'; footerContainer.style.bottom = '0'; footerContainer.style.backgroundColor = '#fff'; footerContainer.style.borderTop = '4px solid #000'; console.log('✅ Scroll independiente aplicado para DESKTOP'); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', aplicarScrollIndependiente); } else { aplicarScrollIndependiente(); } setTimeout(aplicarScrollIndependiente, 1000); window.addEventListener('resize', function() { if (window.innerWidth > 768) aplicarScrollIndependiente(); }); // ========================================================= // 8. CERRAR DRAWER EN MÓVIL // ========================================================= function closeDrawerIfOpen() { const drawer = document.querySelector('.gbbDrawer[data-drawer-status="opened"]'); if (drawer && window.innerWidth <= 768) { console.log('📱 Cerrando drawer en móvil...'); const closeButton = drawer.querySelector('.gbbDrawerCloseButton, [class*="close" i], [class*="Close"]'); if (closeButton) { closeButton.click(); } else { drawer.setAttribute('data-drawer-status', 'closed'); drawer.style.display = 'none'; } setTimeout(() => { document.body.style.overflowY = ''; document.documentElement.style.overflowY = ''; const possibleContainers = [ document.querySelector('.gbbDrawer'), document.querySelector('[class*="container"]'), document.querySelector('[class*="wrapper"]') ]; possibleContainers.forEach(container => { if (container) container.style.overflowY = ''; }); console.log('✅ Scroll restaurado en móvil'); }, 100); } } // ========================================================= // 9. URL // ========================================================= history.pushState(null, '', '/armatupack');

Filtros

Talla

Color

Boxer Essential Capuchino

Boxer Essential Capuchino

Lista de deseos

Lista de deseos

Comparar