// ========================================================= // 1. CONFIGURACIÓN DE TALLAS DINÁMICAS // ========================================================= // Tallas por defecto para categorías que no son "Kids" const DEFAULT_SIZES = ['S', 'M', 'L', 'XL', 'XXL']; // Tallas específicas para "Kids" const KIDS_SIZES = ['10', '12', '14', '16']; const MUJERES_SIZES = ['XS', 'S', 'M', 'L', 'XL']; // Tallas a excluir por categoría (el nombre de la categoría debe coincidir con el texto limpio de la pestaña) const SIZE_EXCLUSIONS = { // Excluir XXL para estas categorías 'POLOS Y BIVIDIS': ['XXL'], 'BRIEF': ['XXL'], 'MEDIAS': ['XXL'], 'MUJERES': ['XXL'], 'PIJAMA': ['XXL'] }; // ========================================================= // 2. FUNCIONES DE LÓGICA DE FILTRADO // ========================================================= /** * Detecta si una talla de producto coincide con el filtro seleccionado. */ 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; } /** * Aplica el filtro de talla, ocultando productos sin la talla seleccionada. */ 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) { // Simular clic solo si el producto no está oculto 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'); } /** * Limpia el filtro. * @param {boolean} shouldDeactivateButtons - Indica si se deben remover las clases 'active' de los botones. */ 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 // ========================================================= /** * Obtiene el nombre de la categoría activa. */ function getActiveCategoryTitle() { // Buscar la pestaña marcada como activa por la tienda const activeTab = document.querySelector('.gbbCategoryTabContainer[data-is-active="true"]'); if (activeTab) { const titleDiv = activeTab.querySelector('.gbbCategoryTabTitle'); if (titleDiv) { // Clonamos el div para remover las imágenes y obtener solo el texto del título const clone = titleDiv.cloneNode(true); clone.querySelectorAll('img').forEach(img => img.remove()); return clone.textContent.trim().toUpperCase(); } } return null; } /** * Determina qué botones de talla mostrar y los genera, según la categoría activa. */ function updateSizeButtons() { const sizeFilter = document.querySelector('#size-filter'); if (!sizeFilter) return; // 1. Determinar el conjunto de tallas const activeCategory = getActiveCategoryTitle(); console.log('🔄 Categoría activa detectada:', activeCategory); let sizesToShow = [...DEFAULT_SIZES]; if (activeCategory === 'KIDS') { sizesToShow = KIDS_SIZES; } else if (activeCategory && SIZE_EXCLUSIONS[activeCategory]) { // Filtrar las tallas excluidas para esta categoría const exclusions = SIZE_EXCLUSIONS[activeCategory]; sizesToShow = sizesToShow.filter(size => !exclusions.includes(size.toUpperCase())); } if (activeCategory === 'MUJERES') { sizesToShow = MUJERES_SIZES; } else if (activeCategory && SIZE_EXCLUSIONS[activeCategory]) { // Filtrar las tallas excluidas para esta categoría const exclusions = SIZE_EXCLUSIONS[activeCategory]; sizesToShow = sizesToShow.filter(size => !exclusions.includes(size.toUpperCase())); } // 2. Limpiar botones anteriores sizeFilter.innerHTML = ''; // 3. Crear nuevos botones sizesToShow.forEach(size => { const btn = document.createElement('button'); btn.className = 'size-filter-btn'; btn.dataset.size = size; btn.textContent = size; // Estilos 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'; // Event Listener - VERSIÓN REFORZADA 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); // Cerrar drawer después de 1 segundo setTimeout(() => { closeDrawerIfOpen(); }, 1000); }, true); sizeFilter.appendChild(btn); }); console.log('✅ Botones de talla actualizados para:', sizesToShow.join(', ')); // Limpiar el filtro de productos visualmente clearFilter(true); } /** * Configura un MutationObserver para detectar el cambio del atributo data-is-active. * Esto asegura que los botones se actualicen tan pronto como la tienda cambia la pestaña. */ function setupCategoryObserver() { const tabContainers = document.querySelectorAll('.gbbCategoryTabContainer'); console.log(`👂 Configurando observadores de categoría en ${tabContainers.length} elementos.`); if (tabContainers.length === 0) return; // El observador local detecta cuando el atributo 'data-is-active' cambia const observerCallback = function(mutationsList, observer) { for (const mutation of mutationsList) { if (mutation.type === 'attributes' && mutation.attributeName === 'data-is-active') { const target = mutation.target; // Si la pestaña acaba de volverse activa, actualizamos los botones if (target.getAttribute('data-is-active') === 'true') { console.log('💥 Cambio de pestaña detectado (data-is-active: true). Actualizando filtro...'); // No necesitamos limpiar productos, solo actualizar los botones updateSizeButtons(); } } } }; const observerConfig = { attributes: true, attributeFilter: ['data-is-active'] }; tabContainers.forEach(tab => { const tabObserver = new MutationObserver(observerCallback); tabObserver.observe(tab, observerConfig); }); } /** * Inyecta el contenedor del filtro de tallas en el DOM. */ 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'; // ... (Estilos del contenedor) 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); // Insertar después del headerContainer headerContainer.insertAdjacentElement('afterend', container); console.log('✅ Contenedor de filtro inyectado correctamente'); // 1. Configurar observadores de cambio de pestaña (la clave del arreglo) setupCategoryObserver(); // 2. Generar y mostrar los botones de talla correctos para la categoría activa actual updateSizeButtons(); return true; } // ========================================================= // 5. INYECCIÓN DE ESTILOS Y OBSERVADOR PRINCIPAL // ========================================================= // Inyección de CSS necesario 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; } /* Evitar que el contenedor de filtros active el drawer */ #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'); // Lógica de inyección robusta usando MutationObserver const targetNode = document.body; const config = { childList: true, subtree: true }; const callback = function(mutationsList, observer) { // Cuando encontramos el contenedor de la cabecera de categorías 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); // Intento de inyección inicial por si el elemento ya está injectSizeFilter(); // ===================================================== // ========================================================= // ========================================================= // ========================================================= // GUÍA DE TALLAS INTERACTIVA (POP-UP) - VERSIÓN CORREGIDA // ========================================================= (function() { // ------------------------------------------------------------------ // A. INYECTAR ESTILOS CSS DEL MODAL // ------------------------------------------------------------------ function injectModalStyles() { if (document.getElementById('custom-size-guide-styles')) return; const style = document.createElement('style'); style.id = 'custom-size-guide-styles'; style.type = 'text/css'; style.innerHTML = ` /* Contenedor del Pop-up (Fondo Oscuro) */ .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; } /* Contenido del Pop-up */ .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; } /* Botón de Cerrar (X) */ .custom-size-guide-close-button { color: #999; position: absolute; top: 10px; right: 20px; font-size: 30px; font-weight: normal; cursor: pointer; transition: color 0.2s; } .custom-size-guide-close-button:hover { color: #000; } /* Estilos de las Pestañas (Tabs) */ .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; } /* Estilos de la Tabla de tallas */ .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; } /* Estilo del botón principal (texto subrayado) */ #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; } /* Estilos de las secciones añadidas */ .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); } // ------------------------------------------------------------------ // B. DATA DE LAS TABLAS DE TALLAS (HTML) - ESPAÑOL // ------------------------------------------------------------------ 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

` } }; // ------------------------------------------------------------------ // C. FUNCIONES DE LÓGICA DEL MODAL Y TABS // ------------------------------------------------------------------ function showCategory(categoryName) { // Actualizar pestañas principales 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; let innerHTML = ''; const subKeys = Object.keys(categoryContent); const firstKey = subKeys[0]; // Crear sub-pestañas innerHTML += '

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

'; document.getElementById('contentContainer').innerHTML = innerHTML; // Agregar event listeners a los botones de sub-pestañas document.querySelectorAll('#subTabs .custom-tab-button').forEach(btn => { btn.addEventListener('click', function() { const subItem = this.getAttribute('data-subitem'); showSubContent(categoryName, subItem, this); }); }); // Mostrar el primer contenido showSubContent(categoryName, firstKey, document.querySelector('#subTabs .custom-tab-button')); } function showSubContent(categoryName, subItem, tabElement) { const subContentContainer = document.getElementById('subContentContainer'); if (!subContentContainer) return; // Actualizar pestañas activas document.querySelectorAll('#subTabs .custom-tab-button').forEach(btn => { btn.classList.remove('active'); }); if (tabElement) tabElement.classList.add('active'); // Mostrar contenido 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'; } } // Hacer funciones accesibles globalmente window.sizeGuideShowCategory = showCategory; window.sizeGuideCloseModal = closeModal; // ------------------------------------------------------------------ // D. CREAR E INYECTAR HTML DEL MODAL // ------------------------------------------------------------------ function createAndInjectModalHTML() { // Evitar duplicados if (document.getElementById('sizeGuideModal')) return; const sizeFilterContainer = document.querySelector('#size-filter-container'); // 1. Crear el botón de apertura 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); } // 2. Crear el Pop-up (Modal) const modalOverlay = document.createElement('div'); modalOverlay.id = 'sizeGuideModal'; modalOverlay.className = 'custom-size-guide-modal-overlay'; modalOverlay.innerHTML = ` `; document.body.appendChild(modalOverlay); // 3. Agregar event listeners const closeButton = modalOverlay.querySelector('.custom-size-guide-close-button'); closeButton.addEventListener('click', closeModal); modalOverlay.addEventListener('click', function(event) { if (event.target === modalOverlay) { closeModal(); } }); // Event listeners para pestañas principales document.querySelectorAll('#mainTabs .custom-tab-button').forEach(btn => { btn.addEventListener('click', function() { const category = this.getAttribute('data-category'); showCategory(category); }); }); } // ------------------------------------------------------------------ // E. INICIALIZACIÓN // ------------------------------------------------------------------ const targetNode = document.body; const config = { childList: true, subtree: true }; let initialized = false; const callback = 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 observer = new MutationObserver(callback); observer.observe(targetNode, config); // Intento inmediato si el elemento ya existe if (document.querySelector('#size-filter-container') && !initialized) { injectModalStyles(); createAndInjectModalHTML(); initialized = true; } })(); // ===================================================== // BARRA DE PROGRESO STANDALONE - VERSIÓN COMPLETA // ===================================================== let progressBarElement = null; let mobileProgressBarElement = null; let lastCount = -1; const DISCOUNT_TIERS = [ { threshold: 3, discount: 10 }, { threshold: 6, discount: 15 }, { threshold: 9, discount: 20 } ]; /** * Detecta si estamos en móvil */ function isMobile() { return window.innerWidth <= 768; } /** * Obtiene el contador de productos del carrito */ function getProductCount() { console.log('🔍 Buscando contadores de carrito...'); // Primero intentar con el contador de móvil const mobileCountEl = document.querySelector('.gbbCartQuantity'); if (mobileCountEl) { const mobileCount = parseInt(mobileCountEl.textContent) || 0; console.log('📱 Contador móvil encontrado:', mobileCount); return mobileCount; } // Si no existe, usar el contador de desktop const desktopCountEl = document.querySelector('.gbbFooterTotalItemsInCart'); if (desktopCountEl) { const match = desktopCountEl.textContent.match(/(\d+)/); const desktopCount = match ? parseInt(match[1]) : 0; console.log('🖥️ Contador desktop encontrado:', desktopCount); return desktopCount; } console.log('❌ No se encontró ningún contador'); return 0; } /** * Obtiene los datos de descuento basados en el contador */ function getDiscountData(count) { let data; if (count >= 9) { data = { percent: 100, color: "#4CAF50" }; } else if (count >= 6) { data = { percent: (count / 9) * 100, color: "#8BC34A" }; } else if (count >= 3) { data = { percent: (count / 9) * 100, color: "#FFC107" }; } else { data = { percent: (count / 9) * 100, color: "#F44336" }; } console.log('📊 Datos de descuento:', data, '| Count:', count); return data; } /** * Crea el HTML de la barra de progreso */ function createProgressBarHTML(data, isMobileVersion = false) { const className = isMobileVersion ? 'gbb-progress-bar-wrapper-mobile' : 'gbb-progress-bar-wrapper'; return `

`; } /** * Actualiza la barra de progreso existente */ function updateProgressBar() { const count = getProductCount(); console.log('🔄 Update check - Count:', count, '| Last:', lastCount); if (count === lastCount) { console.log('⏭️ Sin cambios, saltando'); return; } console.log('✨ ACTUALIZANDO BARRA - Nuevo count:', count); lastCount = count; const data = getDiscountData(count); // Buscar elementos actuales (podrían haber sido recreados) const desktopContainer = document.querySelector('#desktop-progress-bar-container'); const mobileContainer = document.querySelector('#mobile-progress-bar-container'); // Actualizar barra de desktop if (desktopContainer) { const fillEl = desktopContainer.querySelector('.gbb-progress-bar-fill'); if (fillEl) { fillEl.style.width = `${data.percent}%`; fillEl.style.backgroundColor = data.color; console.log('✅ Barra desktop actualizada'); } } // Actualizar barra de móvil if (mobileContainer) { const fillEl = mobileContainer.querySelector('.gbb-progress-bar-fill'); if (fillEl) { fillEl.style.width = `${data.percent}%`; fillEl.style.backgroundColor = data.color; console.log('✅ Barra móvil actualizada'); } } } /** * Inyecta la barra de progreso ANTES de .gbbDiscountFooterHTML */ function injectProgressBar() { console.log('🚀 Intentando inyectar barra...'); const discountFooterContainer = document.querySelector('.gbbDiscountFooterHTML'); if (!discountFooterContainer) { console.log('❌ .gbbDiscountFooterHTML no encontrado'); return false; } // Verificar si ya existe const existingDesktop = document.querySelector('#desktop-progress-bar-container'); const existingMobile = document.querySelector('#mobile-progress-bar-container'); if (existingDesktop || existingMobile) { console.log('⚠️ Barra ya existe, saltando inyección'); return true; } const count = getProductCount(); const data = getDiscountData(count); lastCount = count; if (isMobile()) { console.log('📱 Creando barra MÓVIL...'); const mobileContainer = document.createElement('div'); mobileContainer.id = 'mobile-progress-bar-container'; mobileContainer.style.width = '100%'; mobileContainer.style.margin = '10px 0'; mobileContainer.innerHTML = createProgressBarHTML(data, true); discountFooterContainer.insertAdjacentElement('beforebegin', mobileContainer); console.log('✅ Barra móvil inyectada ANTES de .gbbDiscountFooterHTML'); } else { console.log('🖥️ Creando barra DESKTOP...'); const desktopContainer = document.createElement('div'); desktopContainer.id = 'desktop-progress-bar-container'; desktopContainer.style.width = '100%'; desktopContainer.style.margin = '10px 0'; desktopContainer.innerHTML = createProgressBarHTML(data, false); discountFooterContainer.insertAdjacentElement('beforebegin', desktopContainer); console.log('✅ Barra desktop inyectada ANTES de .gbbDiscountFooterHTML'); } return true; } /** * Verifica y reinyecta la barra si es necesario */ function checkAndReinject() { const discountFooterContainer = document.querySelector('.gbbDiscountFooterHTML'); const existingBar = document.querySelector('#desktop-progress-bar-container, #mobile-progress-bar-container'); if (discountFooterContainer && !existingBar) { console.log('🔄 BARRA DESAPARECIDA - Reinyectando...'); injectProgressBar(); updateProgressBar(); } } /** * Inyecta los estilos CSS necesarios */ function injectProgressBarStyles() { console.log('🎨 Inyectando estilos CSS...'); const style = document.createElement('style'); style.textContent = ` .gbb-progress-bar-wrapper, .gbb-progress-bar-wrapper-mobile { padding: 8px 15px; font-family: sans-serif; box-sizing: border-box; border-radius: 8px; min-height: 20px; display: flex; flex-direction: column; justify-content: center; width: 100%; } .gbb-progress-bar-bg { height: 8px; background: #e0e0e0; border-radius: 6px; overflow: hidden; width: 100%; } .gbb-progress-bar-fill { height: 100%; transition: width 0.3s ease, background-color 0.3s ease; border-radius: 6px; } @media (max-width: 768px) { .gbb-progress-bar-wrapper-mobile { padding: 6px 12px; min-height: 16px; } .gbb-progress-bar-wrapper-mobile .gbb-progress-bar-bg { height: 6px; } } `; document.head.appendChild(style); console.log('✅ Estilos inyectados'); } /** * Inicializa la barra de progreso */ function initializeProgressBar() { console.log('🎬 Inicializando sistema de barra de progreso...'); // Inyectar estilos injectProgressBarStyles(); // Intentar inyectar inmediatamente setTimeout(() => { console.log('⏰ Intento inicial de inyección'); injectProgressBar(); }, 100); // Verificar y reinyectar cada 500ms setInterval(() => { checkAndReinject(); }, 500); // Actualizar barra cada segundo setInterval(() => { updateProgressBar(); }, 1000); // Observador para detectar cuando se regenera el footer const footerObserver = new MutationObserver((mutations) => { mutations.forEach(mutation => { // Si se añaden o eliminan nodos en el footer if (mutation.type === 'childList') { const target = mutation.target; // Si el cambio ocurrió en o cerca del footer if (target.classList && (target.classList.contains('gbbPageFooterHTML') || target.classList.contains('gbbFooterBundleItemsContainer') || target.classList.contains('gbbSlotFooterProductsContainer') || target.classList.contains('gbbDiscountFooterHTML'))) { console.log('🔔 Cambio detectado en footer, verificando barra...'); setTimeout(checkAndReinject, 100); } } }); }); // Observar el documento completo footerObserver.observe(document.body, { childList: true, subtree: true }); // Observador específico para cambios en el contador const cartObserver = new MutationObserver((mutations) => { mutations.forEach(mutation => { if (mutation.type === 'childList' || mutation.type === 'characterData') { const target = mutation.target; if (target.classList && (target.classList.contains('gbbCartQuantity') || target.classList.contains('gbbFooterTotalItemsInCart'))) { console.log('🔔 Cambio en contador detectado'); updateProgressBar(); } } }); }); cartObserver.observe(document.body, { childList: true, subtree: true, characterData: true }); console.log('✅ Sistema de observadores activado'); } console.log('📦 Script de barra de progreso cargado'); if (document.readyState === 'loading') { console.log('⏳ DOM aún cargando, esperando DOMContentLoaded...'); document.addEventListener('DOMContentLoaded', initializeProgressBar); } else { console.log('✅ DOM ya cargado, inicializando inmediatamente'); initializeProgressBar(); } // Solo ejecutar en desktop (ancho mayor a 768px) if (window.innerWidth > 768) { // Crear el contenedor del botón con tooltip const cartContainer = document.createElement('div'); cartContainer.id = 'floatingCartContainer'; cartContainer.innerHTML = ` `; // Estilos del contenedor - oculto inicialmente 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; `; // Insertar en el DOM document.body.appendChild(cartContainer); // Obtener elementos const cartButton = document.getElementById('floatingCartButton'); const tooltip = cartContainer.querySelector('.tooltip-text'); // Estilos del tooltip 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); `; // Estilos del botón 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; `; // Variable para controlar si ya se mostró el tooltip automático let autoTooltipShown = false; let isVisible = false; // Detectar scroll para mostrar/ocultar el botón window.addEventListener('scroll', () => { const scrollPosition = window.scrollY; // Mostrar después de 300px de scroll if (scrollPosition > 300 && !isVisible) { cartContainer.style.opacity = '1'; cartContainer.style.transform = 'translateY(0)'; cartContainer.style.pointerEvents = 'auto'; isVisible = true; // Mostrar tooltip automáticamente después de 2 segundos if (!autoTooltipShown) { setTimeout(() => { tooltip.style.opacity = '1'; tooltip.style.transform = 'translateX(0)'; // Ocultar el tooltip después de 3 segundos 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; } }); // Efectos hover 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)'; }); // Scroll suave al footer cartButton.addEventListener('click', (e) => { e.preventDefault(); const footer = document.querySelector('.gbbPageFooterHTML'); if (footer) { footer.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); // Opcional: Remover el botón si la ventana se redimensiona a mobile window.addEventListener('resize', () => { if (window.innerWidth <= 768 && document.getElementById('floatingCartContainer')) { document.getElementById('floatingCartContainer').remove(); } }); } history.pushState(null, '', '/armatupack'); /** * Cierra el drawer si está abierto (solo en móvil) */ /** * Cierra el drawer si está abierto (solo 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...'); // Buscar el botón de cerrar del drawer const closeButton = drawer.querySelector('.gbbDrawerCloseButton, [class*="close" i], [class*="Close"]'); if (closeButton) { closeButton.click(); console.log('✅ Drawer cerrado con botón'); } else { // Si no hay botón, cambiar el atributo directamente drawer.setAttribute('data-drawer-status', 'closed'); drawer.style.display = 'none'; console.log('✅ Drawer cerrado directamente'); } // CRÍTICO: Restaurar el scroll después de cerrar el drawer setTimeout(() => { // Remover overflow-y: hidden del body y html document.body.style.overflowY = ''; document.documentElement.style.overflowY = ''; // También buscar cualquier contenedor padre que pueda tener overflow-y: hidden 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); } } // Función para aplicar el scroll independiente function aplicarScrollIndependiente() { // Detectar si es desktop (pantallas grandes) const isDesktop = window.innerWidth > 768; if (!isDesktop) { console.log('Es móvil, no se aplica el scroll personalizado'); return; } // Seleccionar el contenedor de productos const productosContainer = document.querySelector('.gbbMultipleCategoryBodyContainer'); const footerContainer = document.querySelector('.gbbPageFooterHTML'); if (!productosContainer || !footerContainer) { console.log('Contenedores no encontrados, reintentando...'); setTimeout(aplicarScrollIndependiente, 500); return; } // Aplicar estilos al contenedor principal const mainContainer = document.querySelector('.gbbMultipleCategoriesContainerHTML'); if (mainContainer) { mainContainer.style.display = 'flex'; mainContainer.style.flexDirection = 'column'; mainContainer.style.height = '100vh'; mainContainer.style.overflow = 'hidden'; } // Hacer que el header sea fijo const headerContainer = document.querySelector('.gbbMultipleCategoryHeaderContainer'); if (headerContainer) { headerContainer.style.flexShrink = '0'; } // Hacer que el filtro de tallas sea fijo const sizeFilter = document.getElementById('size-filter-container'); if (sizeFilter) { sizeFilter.style.flexShrink = '0'; } // Aplicar scroll al contenedor de productos - MÁS ALTO productosContainer.style.flex = '1'; productosContainer.style.overflowY = 'auto'; productosContainer.style.overflowX = 'hidden'; productosContainer.style.maxHeight = 'calc(100vh - 180px)'; // MUCHO MÁS ALTO - solo resta 180px productosContainer.style.minHeight = '70vh'; // Mínimo 70% de la pantalla 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%'; // Crear estilos CSS para scrollbar visible const style = document.createElement('style'); style.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; } /* Para Firefox */ .gbbMultipleCategoryBodyContainer { scrollbar-width: thin; scrollbar-color: #888 #f1f1f1; } `; document.head.appendChild(style); // Hacer que el footer sea fijo 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 correctamente para DESKTOP'); } // Ejecutar cuando el DOM esté listo if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', aplicarScrollIndependiente); } else { aplicarScrollIndependiente(); } // También ejecutar después de un pequeño delay por si acaso setTimeout(aplicarScrollIndependiente, 1000); // Reaplica si cambia el tamaño de ventana window.addEventListener('resize', function() { const isDesktop = window.innerWidth > 768; if (isDesktop) { aplicarScrollIndependiente(); } });

Guía de tallas

Lista de deseos

Lista de deseos

Comparar