Listado de Productos<\/title>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n \r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\r\n <style>\r\n \/* El CSS se incluir\u00e1 aqu\u00ed *\/\r\n \r\n\/* Estilos base *\/\r\n.header-bar {\r\n background: #1A1D30;\r\n padding: 6px;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n}\r\n\r\n.logo-panel {\r\n max-width: 225px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.logo-panel-2 {\r\n width: 225px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.logo-panel img {\r\n width: 225px;\r\n height: 40px;\r\n object-fit: contain;\r\n}\r\n\r\n.logo-panel-2 img {\r\n width: 225px;\r\n height: 40px;\r\n object-fit: contain;\r\n}\r\n\r\n\/* Buscador *\/\r\n#searchForm {\r\n display: flex;\r\n align-items: center;\r\n flex: 1;\r\n max-width: 100%;\r\n background: white;\r\n border-radius: 4px;\r\n margin-left: 10px;\r\n padding: 0;\r\n}\r\n\r\n#searchInput {\r\n flex: 1;\r\n padding: 6px 6px;\r\n border: none;\r\n font-size: 13px;\r\n background: white;\r\n color: #1A1D30;\r\n border-radius: 4px;\r\n}\r\n\r\n#searchForm button {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: #FFB77A;\r\n border: none;\r\n padding: 10px 12px;\r\n cursor: pointer;\r\n}\r\n\r\n#searchForm i {\r\n color: #1A1D30;\r\n font-size: 16px;\r\n}\r\n\r\n\/* Versi\u00f3n m\u00f3vil *\/\r\n@media (max-width: 768px) {\r\n .logo-panel {\r\n max-width: 200px;\r\n }\r\n \r\n .logo-panel-2 {\r\n display: none;\r\n}\r\n\r\n .logo-panel img {\r\n width: 90px;\r\n height: auto;\r\n }\r\n\r\n #searchForm {\r\n max-width: 100%;\r\n margin-left: 0;\r\n }\r\n}\r\n <\/style>\r\n \r\n \r\n <script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-7066323332708614\"\r\n crossorigin=\"anonymous\"><\/script>\r\n <script async custom-element=\"amp-ad\" src=\"https:\/\/cdn.ampproject.org\/v0\/amp-ad-0.1.js\"><\/script>\r\n \r\n \r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n\r\n\r\n \r\n<\/head>\r\n\r\n<body>\r\n\r\n \r\n <div class=\"header-bar\">\r\n <div class=\"logo-panel\">\r\n <a href=\"\/\" style=\"display: inline-block;\">\r\n <img decoding=\"async\" src=\"https:\/\/quitoprices.com\/wp-content\/QLogo3.png\" alt=\"Logo\" \/>\r\n <\/a>\r\n <\/div>\r\n <form id=\"searchForm\">\r\n <input id=\"searchInput\" type=\"search\" placeholder=\"\" \/>\r\n <button type=\"submit\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <\/button>\r\n <\/form>\r\n <div class=\"logo-panel-2\">\r\n <a href=\"https:\/\/genbotcia.com\/\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"display: inline-block;\">\r\n <img decoding=\"async\" src=\"https:\/\/quitoprices.com\/wp-content\/pbG.png\" alt=\"Logo\" \/>\r\n <\/a>\r\n <\/div>\r\n <\/div> \r\n\r\n<amp-auto-ads type=\"adsense\"\r\n data-ad-client=\"ca-pub-7066323332708614\">\r\n<\/amp-auto-ads>\r\n <header>\r\n \r\n<div class=\"layout-container\">\r\n \r\n <div id=\"carrusel\" class=\"carrusel-scroll carrusel-movil\"><\/div>\r\n \r\n <div id=\"productGrid\"><\/div>\r\n<\/div>\r\n\r\n\r\n<style>\r\n\r\n\/* Contenedor general *\/\r\n.layout-container {\r\n width: 100%;\r\n max-width: 100%;\r\n margin: 0;\r\n padding: 0;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0px;\r\n}\r\n\r\n\r\n\/* Carrusel horizontal en m\u00f3viles *\/\r\n.carrusel-movil {\r\n position: sticky;\r\n top: 0;\r\n z-index: 10; \/* asegura que est\u00e9 por encima del contenido *\/\r\n display: flex;\r\n flex-direction: row;\r\n gap: 0px;\r\n overflow-x: auto;\r\n padding-top: 6px;\r\n padding-left: 6px;\r\n padding-right: 6px;\r\n padding-bottom: 6px;\r\n background: #2E324A;\r\n border-bottom: none;\r\n}\r\n\r\n.carrusel-movil.hidden {\r\n transform: translateY(-100%);\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: transform 0.5s ease, opacity 0.5s ease;\r\n}\r\n\r\n\/* Botones del carrusel *\/\r\n.carrusel-scroll button {\r\n background: #2E324A;\r\n color: white;\r\n border: 1px solid #2E324A;\r\n padding: 10px 10px;\r\n border-radius: 20px;\r\n cursor: pointer;\r\n font-size: 14px;\r\n white-space: nowrap;\r\n transition: background 0.3s, color 0.3s, border 0.3s;\r\n}\r\n\r\n\r\n\r\n\/* Grid de productos *\/\r\n#productGrid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr); \/* m\u00f3vil: m\u00e1ximo 2 columnas *\/\r\n gap: 20px;\r\n padding: 4px;\r\n justify-content: center;\r\n height: auto;\r\n overflow: visible;\r\n margin-top: 8px;\r\n}\r\n\r\n\/* Estilos para escritorio *\/\r\n@media (min-width: 769px) {\r\n .layout-container {\r\n flex-direction: row;\r\n align-items: flex-start;\r\n \r\n .carrusel-scroll button:hover {\r\n background: #C7C8CE;\r\n color: #1A1D30;\r\n border: 1px solid #C7C8CE;\r\n}\r\n }\r\n\r\n .carrusel-scroll {\r\n position: sticky;\r\n top: 20px;\r\n flex-direction: column;\r\n height: 90vh; \/* ocupa toda la altura de la pantalla *\/\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n width: 300px;\r\n margin-right: 5px;\r\n padding-top: : 20px;\r\n }\r\n\r\n .carrusel-scroll button {\r\n width: 100%;\r\n margin-bottom: 0px;\r\n }\r\n\r\n #productGrid {\r\n grid-template-columns: repeat(5, 1fr); \/* escritorio: m\u00e1ximo 5 columnas *\/\r\n padding: 20px;\r\n flex: 1;\r\n justify-content: start;\r\n max-width: none;\r\n margin-left: 0;\r\n height: auto;\r\n overflow: visible;\r\n }\r\n}\r\n\r\n\r\n\/* Estilos para desktop *\/\r\n@media (min-width: 769px) {\r\n .layout-container {\r\n flex-direction: row;\r\n align-items: flex-start;\r\n }\r\n\r\n .carrusel-scroll {\r\n flex-direction: column;\r\n max-height: 90vh; \/* altura fija para scroll *\/\r\n overflow-y: auto; \/* scroll vertical independiente *\/\r\n max-width: 250px;\r\n padding-right: 5px;\r\n }\r\n\r\n .carrusel-scroll button {\r\n width: 100%;\r\n }\r\n \r\n #productGrid {\r\n grid-template-columns: repeat(5, 1fr);\r\n flex: 1;\r\n justify-content: start;\r\n max-width: none;\r\n margin-left: 0;\r\n }\r\n}\r\n\r\n#carrusel button.active {\r\n background: white;\r\n color: #1A1D30;\r\n order: 1px solid white;\r\n}\r\n\r\n\r\n\/* Tarjeta de producto *\/\r\n.product-card {\r\n position: relative; \/* clave para posicionar el badge dentro del card *\/\r\n width: 100%;\r\n height: 300px; \/* o ajusta seg\u00fan tu dise\u00f1o *\/\r\n max-width: 240px;\r\n background: #fff;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n box-shadow: none;\r\n transition: none;\r\n cursor: pointer;\r\n}\r\n\r\n\r\n\/* Imagen del producto *\/\r\n.product-card img {\r\n width: auto;\r\n height: auto;\r\n max-width: 100%;\r\n max-height: 100%;\r\n object-fit: contain;\r\n display: block;\r\n}\r\n\r\n.image-container {\r\n width: 180px;\r\n height: 180px;\r\n max-width: 180px;\r\n max-height: 180px;\r\n min-width: 180px;\r\n min-height: 180px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n overflow: visible;\r\n}\r\n\r\n\r\n\/* Badge de descuento *\/\r\n.discount-badge {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n background: #2E324A;\r\n color: white;\r\n padding: 2px 3px;\r\n font-size: 15px;\r\n border-radius: 2px 2px 2px 2px;\r\n z-index: 1;\r\n}\r\n\r\n\r\n\/* Informaci\u00f3n del producto *\/\r\n.product-info {\r\n padding: 0px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between; \/* distribuye verticalmente *\/\r\n height: 100%;\r\n}\r\n\r\n\/* L\u00ednea de precios *\/\r\n.price-line {\r\n display: flex;\r\n justify-content: space-between;\r\n font-weight: 500;\r\n font-size: 16px;\r\n min-height: 24px;\r\n}\r\n\r\n.precio-real {\r\n text-decoration: line-through;\r\n color: #999;\r\n font-weight: normal;\r\n}\r\n\r\n\/* Nombre del producto *\/\r\n.nombre {\r\n font-size: 13px;\r\n font-weight: 500;\r\n color: #333;\r\n margin-top: 2px;\r\n line-height: 1.2;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; \/* \u2190 m\u00e1ximo 2 l\u00edneas *\/\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n min-height: calc(1.2em * 2); \/* altura para 2 l\u00edneas *\/\r\n max-height: calc(1.2em * 2); \/* evita que crezca m\u00e1s *\/\r\n}\r\n\r\n\/* L\u00ednea de cantidad *\/\r\n.quantity-line {\r\n font-size: 12px;\r\n color: #555;\r\n min-height: 12px;\r\n}\r\n\r\n\/* Punto de venta *\/\r\n.product-info p:last-child {\r\n font-size: 12px;\r\n color: #777;\r\n margin: 0;\r\n min-height: 20px;\r\n}\r\n\r\n\/* Scrollbar para navegadores WebKit (Chrome, Safari, Edge) *\/\r\n.carrusel-scroll::-webkit-scrollbar {\r\n height: 6px; \/* para scroll horizontal *\/\r\n background: white;\r\n}\r\n\r\n.carrusel-scroll::-webkit-scrollbar-thumb {\r\n background-color: white; \/* color muy tenue *\/\r\n border-radius: 10px;\r\n}\r\n\r\n.carrusel-scroll::-webkit-scrollbar-track {\r\n background: white;\r\n}\r\n\r\n\/* Scrollbar para Firefox *\/\r\n.carrusel-scroll {\r\n scrollbar-width: thin;\r\n scrollbar-color: rgba(26, 29, 48, 0.1) transparent;\r\n}\r\n\r\n .punto-sticky {\r\n position: sticky;\r\n top: 0;\r\n z-index: 9; \/* debajo del carrusel *\/\r\n background: #1A1D30;\r\n color: white;\r\n padding: 0px 0px;\r\n font-size: 14px;\r\n font-weight: 500;\r\n text-align: center;\r\n transition: transform 0.5s ease, opacity 0.5s ease;\r\n}\r\n\r\n.punto-sticky.hidden {\r\n transform: translateY(-100%);\r\n opacity: 0;\r\n pointer-events: none;\r\n}\r\n\r\n.modal {\r\n display: none;\r\n position: fixed;\r\n z-index: 1000;\r\n left: 0; top: 0;\r\n width: 100%; height: 100%;\r\n background-color: rgba(0,0,0,0.5);\r\n}\r\n\r\n.modal-content {\r\n position: relative;\r\n background-color: #fff;\r\n margin: 10% auto;\r\n padding: 2em;\r\n width: 80%;\r\n max-width: 400px;\r\n border-radius: 8px;\r\n}\r\n\r\n\/* Badge de descuento modal*\/\r\n.discount-badge-modal {\r\n position: absolute;\r\n top: 10px;\r\n left: 10px;\r\n background: #2E324A;\r\n color: white;\r\n padding: 2px 3px;\r\n font-size: 24px;\r\n border-radius: 2px 2px 2px 2px;\r\n z-index: 1;\r\n}\r\n\r\n.closeModal {\r\n position: absolute;\r\n top: 10px;\r\n right: 20px;\r\n font-size: 32px;\r\n cursor: pointer;\r\n}\r\n\r\n.image-wrapper {\r\n display: flex;\r\n justify-content: center; \/* centra horizontalmente *\/\r\n align-items: center; \/* centra verticalmente *\/\r\n height: 100%; \/* ajusta seg\u00fan el espacio que quieras *\/\r\n}\r\n\r\n.price-row {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n font-size: 22px;\r\n width: 100%;\r\n margin-bottom: 10px;\r\n}\r\n.price-row strong {\r\n color: #000;\r\n}\r\n.price-row del {\r\n color: gray;\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n <\/header>\r\n \r\n <main>\r\n <div id=\"productGrid\"><\/div>\r\n <\/main>\r\n\r\n\r\n<div id=\"modal\" class=\"modal\">\r\n <div class=\"modal-content\">\r\n <span id=\"closeModal\" class=\"closeModal\">×<\/span>\r\n <div id=\"modalDetails\"><\/div>\r\n <div class=\"modal-buttons\" style=\"margin-left=20px;\">\r\n \r\n \r\n \r\n \r\n \r\n \r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n \r\n <script>\r\n\/\/ URL del archivo CSV\r\nconst csvUrl = 'https:\/\/quitoprices.com\/wp-content\/productos.csv';\r\n\r\n\/\/ Funci\u00f3n para cargar el CSV desde una URL\r\nasync function loadCSV(url) {\r\n try {\r\n const response = await fetch(url);\r\n if (!response.ok) {\r\n throw new Error('No se pudo cargar el archivo CSV.');\r\n }\r\n const data = await response.text();\r\n return parseCSV(data);\r\n } catch (error) {\r\n console.error('Error al cargar el CSV:', error);\r\n return [];\r\n }\r\n}\r\n\r\n\/\/ Funci\u00f3n para parsear el CSV\r\nfunction parseCSV(data) {\r\n const lines = data.trim().split('\\n');\r\n \/\/ Trim each header to remove leading\/trailing whitespace\r\n const headers = lines[0].split('|').map(header => header.trim());\r\n const products = [];\r\n\r\n for (let i = 1; i < lines.length; i++) {\r\n \/\/ Trim each line to remove leading\/trailing whitespace\r\n const currentline = lines[i].trim().split('|');\r\n\r\n const obj = {};\r\n headers.forEach((header, index) => {\r\n \/\/ Assign trimmed values to each object property\r\n const value = currentline[index] ? currentline[index].trim() : '';\r\n obj[header] = value;\r\n });\r\n products.push(obj);\r\n }\r\n return products;\r\n}\r\n\r\n\r\n\/\/ Variables globales\r\nlet products = [];\r\nlet filteredProducts = [];\r\n\r\n\/\/ Variable para guardar el punto seleccionado\r\n let puntoSeleccionado = null;\r\n\r\n\/\/ Funci\u00f3n de inicializaci\u00f3n\r\nasync function initialize() {\r\n products = await loadCSV(csvUrl);\r\n filteredProducts = [...products];\r\n populateFilters();\r\n displayProducts();\r\n}\r\n\r\n\r\n\/\/ Funci\u00f3n para poblar opciones de filtros\r\nfunction populateFilters() {\r\n \r\n const puntosDeVenta = [...new Set(products.map(p => p.PuntoDeVenta))];\r\n\r\n \/\/ Poblar opciones de PuntoDeVenta para ambas versiones\r\n populatePuntoDeVentaFilters(puntosDeVenta);\r\n}\r\n\r\n\/\/ Funci\u00f3n para poblar los filtros de PuntoDeVenta para desktop y m\u00f3vil\r\nfunction populatePuntoDeVentaFilters(puntosDeVenta) {\r\n const carrusel = document.getElementById('carrusel');\r\n carrusel.innerHTML = '';\r\n\r\n \/\/ Eliminar duplicados y ordenar alfab\u00e9ticamente\r\n const puntosOrdenados = [...new Set(puntosDeVenta)].sort((a, b) => a.localeCompare(b));\r\n \/\/Agregar boton Todos\r\n const btn = document.createElement('button');\r\n btn.textContent = \"Todos\";\r\n btn.addEventListener('click', () => {\r\n updateActiveButton(btn);\r\n puntoSeleccionado = \"Todos\";\r\n \/\/ \u2190 esto aplica el estilo activo\r\n \/\/updatePuntoSticky(\"Todos\");\r\n filterProducts(); \/\/ aplica el filtro inmediatamente\r\n });\r\n carrusel.appendChild(btn);\r\n \r\n \/\/ Renderizar botones en el carrusel\r\n puntosOrdenados.forEach(punto => {\r\n const btn = document.createElement('button');\r\n btn.textContent = punto;\r\n btn.addEventListener('click', () => {\r\n puntoSeleccionado = punto;\r\n updateActiveButton(btn); \/\/ \u2190 esto aplica el estilo activo\r\n \/\/updatePuntoSticky(punto);\r\n filterProducts(); \/\/ aplica el filtro inmediatamente\r\n });\r\n carrusel.appendChild(btn);\r\n \r\n \/\/ Seleccionar el primero por defecto\r\n \/*if (index === 0) {\r\n puntoSeleccionado = punto;\r\n filterProducts();\r\n }*\/\r\n });\r\n \r\n \/\/ Seleccionar el primero por defecto\r\n if (puntosOrdenados.length > 0) {\r\n puntoSeleccionado = \"Todos\";\r\n \/\/updatePuntoSticky(\"Todos\");\r\n filterProducts();\r\n\r\n \/\/ Activar visualmente el primer bot\u00f3n\r\n const primerBoton = carrusel.querySelector('button');\r\n if (primerBoton) updateActiveButton(primerBoton);\r\n }\r\n}\r\n\r\nfunction updateActiveButton(activeBtn) {\r\n const buttons = document.querySelectorAll('#carrusel button');\r\n buttons.forEach(btn => btn.classList.remove('active'));\r\n activeBtn.classList.add('active');\r\n}\r\n\r\n\/\/ Funci\u00f3n para mostrar productos\r\nfunction displayProducts() {\r\n const grid = document.getElementById('productGrid');\r\n grid.innerHTML = '';\r\n\r\n filteredProducts.forEach((product, index) => {\r\n \r\n \/* \/\/ Mostrar anuncio despu\u00e9s de cada 50 productos\r\n if (index > 0 && index % 100 === 0) {\r\n const adElement = document.createElement('div');\r\n adElement.className = 'ad'; \/\/ Clase para estilizar el anuncio\r\n\r\n \/\/ Inserta el c\u00f3digo <amp-ad>\r\n adElement.innerHTML = `\r\n <amp-ad width=\"100vw\" height=\"320\"\r\n type=\"adsense\"\r\n data-ad-client=\"ca-pub-7066323332708614\"\r\n data-ad-slot=\"7064253755\"\r\n data-auto-format=\"mcrspv\"\r\n data-full-width=\"\">\r\n <div overflow=\"\"><\/div>\r\n <\/amp-ad>\r\n `;\r\n\r\n \/\/ A\u00f1ade el anuncio al grid\r\n productGrid.appendChild(adElement);\r\n }*\/\r\n \r\n \r\n const card = document.createElement('div');\r\n card.className = 'product-card';\r\n card.addEventListener('click', () => openModal(product));\r\n\r\n \/\/ Badge de descuento\r\n const discountBadge = document.createElement('div');\r\n discountBadge.className = 'discount-badge';\r\n discountBadge.textContent = `-${product.Descuento}%`;\r\n card.appendChild(discountBadge);\r\n\r\n \/\/ Imagen\r\n const img = document.createElement('img');\r\n const imageContainer = document.createElement('div');\r\n img.src = product.RutaImagen;\r\n img.alt = product.Nombre;\r\n img.loading = 'lazy';\r\n \/\/img.addEventListener('click', () => openModal(product));\r\n imageContainer.className = 'image-container';\r\n imageContainer.appendChild(img);\r\n\r\n card.appendChild(imageContainer);\r\n\r\n \/\/ Informaci\u00f3n\r\n const info = document.createElement('div');\r\n info.className = 'product-info';\r\n\r\n \/\/ PrecioActual y PrecioReal\r\n const priceLine = document.createElement('div');\r\n priceLine.className = 'price-line';\r\n\r\n const precioActual = document.createElement('span');\r\n precioActual.textContent = `$${product.PrecioActual}`;\r\n\r\n const precioReal = document.createElement('span');\r\n precioReal.textContent = `$${product.PrecioReal}`;\r\n precioReal.className = 'precio-real';\r\n\r\n priceLine.appendChild(precioActual);\r\n priceLine.appendChild(precioReal);\r\n info.appendChild(priceLine);\r\n\r\n\r\n \/\/ Nombre\r\n const nombre = document.createElement('p');\r\n nombre.className = 'nombre';\r\n nombre.textContent = product.Nombre;\r\n nombre.title = product.Nombre;\r\n info.appendChild(nombre);\r\n \r\n \/\/ Cantidad\r\n const quantityLine = document.createElement('div');\r\n quantityLine.className = 'quantity-line';\r\n\r\n const cantidadContainer = document.createElement('span'); \/\/ Contenedor para el \u00edcono y la cantidad\r\n cantidadContainer.style.display = 'flex'; \/\/ Alinear \u00edcono y texto horizontalmente\r\n cantidadContainer.style.alignItems = 'center'; \/\/ Alinear verticalmente\r\n\r\n const icono = document.createElement('i'); \/\/ Crear el \u00edcono de Font Awesome\r\n icono.className = 'fa-solid fa-robot'; \/\/ Clase del \u00edcono\r\n icono.style.marginLeft = '10px'; \/\/ Espaciado entre el \u00edcono y el texto\r\n icono.style.color = '#00bf63';\r\n\r\n const cantidad = document.createElement('span');\r\n cantidad.textContent = product.Cantidad;\r\n cantidadContainer.appendChild(cantidad);\r\n \r\n \/\/ A\u00f1adir el \u00edcono al contenedor\r\n \/*if (Number(product.RecomendadoPorIA) === 1) {\r\n cantidadContainer.appendChild(icono);\r\n }*\/\r\n quantityLine.appendChild(cantidadContainer);\r\n info.appendChild(quantityLine);\r\n\r\n \/\/ PuntoDeVenta\r\n const puntoVenta = document.createElement('p');\r\n puntoVenta.textContent = product.PuntoDeVenta;\r\n puntoVenta.style.alignItems = 'left';\r\n info.appendChild(puntoVenta);\r\n \r\n \r\n card.appendChild(info);\r\n grid.appendChild(card);\r\n });\r\n}\r\n\r\n\/\/ Funci\u00f3n para filtrar productos\r\nfunction filterProducts() {\r\n if (puntoSeleccionado !== \"Todos\") {\r\n filteredProducts = products.filter(product => {\r\n return product.PuntoDeVenta === puntoSeleccionado;\r\n });\r\n }\r\n else{\r\n filteredProducts = products; \/\/ \u2190 devuelve todos los productos\r\n }\r\n displayProducts();\r\n}\r\n\r\nfunction updatePuntoSticky(nombre) {\r\n const puntoSticky = document.getElementById('puntoSticky');\r\n puntoSticky.textContent = nombre;\r\n}\r\n\r\n\r\nlet lastScrollTop = 0;\r\nconst carrusel = document.querySelector('.carrusel-movil');\r\nconst puntoSticky = document.getElementById('puntoSticky');\r\n\r\nwindow.addEventListener('scroll', () => {\r\n const currentScroll = window.pageYOffset || document.documentElement.scrollTop;\r\n\r\n if (window.innerWidth < 769) {\r\n if (currentScroll > lastScrollTop + 4) {\r\n \/\/ Scroll hacia abajo: ocultar carrusel, mostrar cinta\r\n carrusel.classList.add('hidden');\r\n \/\/puntoSticky.classList.remove('hidden');\r\n } else if (currentScroll < lastScrollTop - 2) {\r\n \/\/ Scroll hacia arriba: mostrar carrusel, ocultar cinta\r\n carrusel.classList.remove('hidden');\r\n \/\/puntoSticky.classList.add('hidden');\r\n }\r\n }\r\n\r\n lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;\r\n});\r\n\r\ndocument.getElementById('searchForm').addEventListener('submit', function(e) {\r\n e.preventDefault(); \/\/ evita recargar la p\u00e1gina\r\n const query = document.getElementById('searchInput').value.toLowerCase();\r\n const productos = document.querySelectorAll('.product-card');\r\n\r\n productos.forEach(card => {\r\n const nombre = card.querySelector('.nombre')?.textContent.toLowerCase() || '';\r\n if (nombre.includes(query)) {\r\n card.style.display = 'flex'; \/\/ o 'block' seg\u00fan tu layout\r\n } else {\r\n card.style.display = 'none';\r\n }\r\n });\r\n});\r\n\r\n\r\n\/\/ Funciones del modal\r\nconst modal = document.getElementById('modal');\r\nconst closeModalBtn = document.getElementById('closeModal');\r\n\r\nfunction openModal(product) {\r\n \/\/console.log('Product in openModal:', product); \r\n const modalDetails = document.getElementById('modalDetails');\r\n \r\n \/\/ Variable para guardar el nombre detectado\r\n let appName = \"\";\r\n\r\n \/\/ Validar si el texto contiene \"rappi\" o \"tipti\"\r\n if (product.AppStore.toLowerCase().includes(\"rappi\")) {\r\n appName = \"Rappi\";\r\n } else if (product.AppStore.toLowerCase().includes(\"tipti\")) {\r\n appName = \"Tipti\";\r\n } else {\r\n appName = \"\"; \/\/ O cualquier valor por defecto\r\n };\r\n \r\n \/\/ Crear el elemento PuntoDeVenta en el Modal\r\n const puntoVentaModal = document.createElement('p');\r\n puntoVentaModal.textContent = product.PuntoDeVenta;\r\n\r\n \/\/ Obtener el estilo del PuntoDeVenta en el grid\r\n \/*const puntoVentaGrid = Array.from(document.querySelectorAll('.product-card p')).find(\r\n (el) => el.textContent === product.PuntoDeVenta\r\n );\r\n \r\n if (puntoVentaGrid) {\r\n const gridBackgroundColor = window.getComputedStyle(puntoVentaGrid).backgroundColor;\r\n const gridTextColor = window.getComputedStyle(puntoVentaGrid).color;\r\n\r\n \/\/ Aplicar los mismos estilos al modal\r\n puntoVentaModal.style.backgroundColor = gridBackgroundColor;\r\n puntoVentaModal.style.color = gridTextColor;\r\n puntoVentaModal.style.fontWeight = 'bold'; \/\/ Aseguramos negritas\r\n }\r\n *\/\r\n\r\n \r\n \/\/ A\u00f1adir el \u00edcono al modal si es recomendado por la IA\r\n \/* const textRecomendado = Number(product.RecomendadoPorIA) === 1 ? '<p style=\"font-size: 12px; color: #00bf63;\"><i class=\"fa-solid fa-robot\"><\/i> Producto sugerido por la IA<\/p>' : '';\r\n *\/\r\n \r\n modalDetails.innerHTML = `\r\n <div class=\"image-wrapper\">\r\n <img decoding=\"async\" src=\"${product.RutaImagen}\" alt=\"${product.Nombre}\" style =\"width:100%; max-width:250px;\">\r\n <\/div>\r\n <div style=\"display: flex;\"><div style=\"display: block; font-size: 20px; margin-bottom: 10px; width: 100%;\">${product.Nombre}<p><\/p><\/div><\/div>\r\n \r\n <p style=\"margin-bottom: 10px;\"> <div class=\"price-row\">\r\n <strong>$${product.PrecioActual}<\/strong>\r\n <del>$${product.PrecioReal}<\/del>\r\n <\/div><div style=\"display: block; font-size: 16px; margin-bottom: 10px; margin-right: 10px; width: 100%;\">${product.Cantidad}<\/div><div style=\"display: block; font-size: 18px; margin-bottom: 10px; margin-right: 10px; width: 100%;\">${product.PuntoDeVenta}<\/div><\/p>\r\n `;\r\n \r\n \/\/ Crear y a\u00f1adir la etiqueta de descuento al modal\r\n const discountBadge = document.createElement('div');\r\n discountBadge.className = 'discount-badge discount-badge-modal'; \/\/ Aseg\u00farate de que esta clase coincide con la del grid\r\n discountBadge.textContent = `-${product.Descuento}%`;\r\n modalDetails.prepend(discountBadge); \/\/ Coloca la etiqueta al principio\r\n \r\n \/* document.getElementById('playStoreBtn').href = product.PlayStore;\r\n document.getElementById('appStoreBtn').href = product.AppStore;\r\n \/\/document.getElementById('googleMapsBtn').href = product.GoogleMaps;\r\n \r\n const copyIcon = document.getElementById('copyIcon');\r\n const copyText = document.getElementById('copyText');\r\n \r\n copyText.style.display = 'none';\r\n \r\n copyIcon.addEventListener('click', () => {\r\n navigator.clipboard.writeText(product.Nombre)\r\n copyIcon.style.color = '#00bf63';\r\n copyText.style.display = 'block';\r\n copyText.style.color = '#00bf63';\r\n });*\/\r\n\r\n modal.style.display = 'block';\r\n}\r\n\r\ncloseModalBtn.addEventListener('click', () => {\r\n modal.style.display = 'none';\r\n});\r\n\r\nwindow.addEventListener('click', event => {\r\n if (event.target == modal) {\r\n modal.style.display = 'none';\r\n }\r\n});\r\n\r\n\r\n\r\n\/\/ Inicializaci\u00f3n\r\ninitialize();\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Listado de Productos ×<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-5818","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"mailpoet_newsletter_max":false,"woocommerce_thumbnail":false,"woocommerce_single":false,"woocommerce_gallery_thumbnail":false},"uagb_author_info":{"display_name":"tonitovg","author_link":"https:\/\/quitoprices.com\/index.php\/author\/tonitovg\/"},"uagb_comment_info":0,"uagb_excerpt":"Listado de Productos ×","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/quitoprices.com\/index.php\/wp-json\/wp\/v2\/pages\/5818","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/quitoprices.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/quitoprices.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/quitoprices.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/quitoprices.com\/index.php\/wp-json\/wp\/v2\/comments?post=5818"}],"version-history":[{"count":1015,"href":"https:\/\/quitoprices.com\/index.php\/wp-json\/wp\/v2\/pages\/5818\/revisions"}],"predecessor-version":[{"id":6919,"href":"https:\/\/quitoprices.com\/index.php\/wp-json\/wp\/v2\/pages\/5818\/revisions\/6919"}],"wp:attachment":[{"href":"https:\/\/quitoprices.com\/index.php\/wp-json\/wp\/v2\/media?parent=5818"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n Listado de Productos<\/title>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n \r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\r\n <style>\r\n \/* El CSS se incluir\u00e1 aqu\u00ed *\/\r\n \r\n\/* Estilos base *\/\r\n.header-bar {\r\n background: #1A1D30;\r\n padding: 6px;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n}\r\n\r\n.logo-panel {\r\n max-width: 225px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.logo-panel-2 {\r\n width: 225px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.logo-panel img {\r\n width: 225px;\r\n height: 40px;\r\n object-fit: contain;\r\n}\r\n\r\n.logo-panel-2 img {\r\n width: 225px;\r\n height: 40px;\r\n object-fit: contain;\r\n}\r\n\r\n\/* Buscador *\/\r\n#searchForm {\r\n display: flex;\r\n align-items: center;\r\n flex: 1;\r\n max-width: 100%;\r\n background: white;\r\n border-radius: 4px;\r\n margin-left: 10px;\r\n padding: 0;\r\n}\r\n\r\n#searchInput {\r\n flex: 1;\r\n padding: 6px 6px;\r\n border: none;\r\n font-size: 13px;\r\n background: white;\r\n color: #1A1D30;\r\n border-radius: 4px;\r\n}\r\n\r\n#searchForm button {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: #FFB77A;\r\n border: none;\r\n padding: 10px 12px;\r\n cursor: pointer;\r\n}\r\n\r\n#searchForm i {\r\n color: #1A1D30;\r\n font-size: 16px;\r\n}\r\n\r\n\/* Versi\u00f3n m\u00f3vil *\/\r\n@media (max-width: 768px) {\r\n .logo-panel {\r\n max-width: 200px;\r\n }\r\n \r\n .logo-panel-2 {\r\n display: none;\r\n}\r\n\r\n .logo-panel img {\r\n width: 90px;\r\n height: auto;\r\n }\r\n\r\n #searchForm {\r\n max-width: 100%;\r\n margin-left: 0;\r\n }\r\n}\r\n <\/style>\r\n \r\n \r\n <script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-7066323332708614\"\r\n crossorigin=\"anonymous\"><\/script>\r\n <script async custom-element=\"amp-ad\" src=\"https:\/\/cdn.ampproject.org\/v0\/amp-ad-0.1.js\"><\/script>\r\n \r\n \r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n\r\n\r\n \r\n<\/head>\r\n\r\n<body>\r\n\r\n \r\n <div class=\"header-bar\">\r\n <div class=\"logo-panel\">\r\n <a href=\"\/\" style=\"display: inline-block;\">\r\n <img decoding=\"async\" src=\"https:\/\/quitoprices.com\/wp-content\/QLogo3.png\" alt=\"Logo\" \/>\r\n <\/a>\r\n <\/div>\r\n <form id=\"searchForm\">\r\n <input id=\"searchInput\" type=\"search\" placeholder=\"\" \/>\r\n <button type=\"submit\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <\/button>\r\n <\/form>\r\n <div class=\"logo-panel-2\">\r\n <a href=\"https:\/\/genbotcia.com\/\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"display: inline-block;\">\r\n <img decoding=\"async\" src=\"https:\/\/quitoprices.com\/wp-content\/pbG.png\" alt=\"Logo\" \/>\r\n <\/a>\r\n <\/div>\r\n <\/div> \r\n\r\n<amp-auto-ads type=\"adsense\"\r\n data-ad-client=\"ca-pub-7066323332708614\">\r\n<\/amp-auto-ads>\r\n <header>\r\n \r\n<div class=\"layout-container\">\r\n \r\n <div id=\"carrusel\" class=\"carrusel-scroll carrusel-movil\"><\/div>\r\n \r\n <div id=\"productGrid\"><\/div>\r\n<\/div>\r\n\r\n\r\n<style>\r\n\r\n\/* Contenedor general *\/\r\n.layout-container {\r\n width: 100%;\r\n max-width: 100%;\r\n margin: 0;\r\n padding: 0;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0px;\r\n}\r\n\r\n\r\n\/* Carrusel horizontal en m\u00f3viles *\/\r\n.carrusel-movil {\r\n position: sticky;\r\n top: 0;\r\n z-index: 10; \/* asegura que est\u00e9 por encima del contenido *\/\r\n display: flex;\r\n flex-direction: row;\r\n gap: 0px;\r\n overflow-x: auto;\r\n padding-top: 6px;\r\n padding-left: 6px;\r\n padding-right: 6px;\r\n padding-bottom: 6px;\r\n background: #2E324A;\r\n border-bottom: none;\r\n}\r\n\r\n.carrusel-movil.hidden {\r\n transform: translateY(-100%);\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: transform 0.5s ease, opacity 0.5s ease;\r\n}\r\n\r\n\/* Botones del carrusel *\/\r\n.carrusel-scroll button {\r\n background: #2E324A;\r\n color: white;\r\n border: 1px solid #2E324A;\r\n padding: 10px 10px;\r\n border-radius: 20px;\r\n cursor: pointer;\r\n font-size: 14px;\r\n white-space: nowrap;\r\n transition: background 0.3s, color 0.3s, border 0.3s;\r\n}\r\n\r\n\r\n\r\n\/* Grid de productos *\/\r\n#productGrid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr); \/* m\u00f3vil: m\u00e1ximo 2 columnas *\/\r\n gap: 20px;\r\n padding: 4px;\r\n justify-content: center;\r\n height: auto;\r\n overflow: visible;\r\n margin-top: 8px;\r\n}\r\n\r\n\/* Estilos para escritorio *\/\r\n@media (min-width: 769px) {\r\n .layout-container {\r\n flex-direction: row;\r\n align-items: flex-start;\r\n \r\n .carrusel-scroll button:hover {\r\n background: #C7C8CE;\r\n color: #1A1D30;\r\n border: 1px solid #C7C8CE;\r\n}\r\n }\r\n\r\n .carrusel-scroll {\r\n position: sticky;\r\n top: 20px;\r\n flex-direction: column;\r\n height: 90vh; \/* ocupa toda la altura de la pantalla *\/\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n width: 300px;\r\n margin-right: 5px;\r\n padding-top: : 20px;\r\n }\r\n\r\n .carrusel-scroll button {\r\n width: 100%;\r\n margin-bottom: 0px;\r\n }\r\n\r\n #productGrid {\r\n grid-template-columns: repeat(5, 1fr); \/* escritorio: m\u00e1ximo 5 columnas *\/\r\n padding: 20px;\r\n flex: 1;\r\n justify-content: start;\r\n max-width: none;\r\n margin-left: 0;\r\n height: auto;\r\n overflow: visible;\r\n }\r\n}\r\n\r\n\r\n\/* Estilos para desktop *\/\r\n@media (min-width: 769px) {\r\n .layout-container {\r\n flex-direction: row;\r\n align-items: flex-start;\r\n }\r\n\r\n .carrusel-scroll {\r\n flex-direction: column;\r\n max-height: 90vh; \/* altura fija para scroll *\/\r\n overflow-y: auto; \/* scroll vertical independiente *\/\r\n max-width: 250px;\r\n padding-right: 5px;\r\n }\r\n\r\n .carrusel-scroll button {\r\n width: 100%;\r\n }\r\n \r\n #productGrid {\r\n grid-template-columns: repeat(5, 1fr);\r\n flex: 1;\r\n justify-content: start;\r\n max-width: none;\r\n margin-left: 0;\r\n }\r\n}\r\n\r\n#carrusel button.active {\r\n background: white;\r\n color: #1A1D30;\r\n order: 1px solid white;\r\n}\r\n\r\n\r\n\/* Tarjeta de producto *\/\r\n.product-card {\r\n position: relative; \/* clave para posicionar el badge dentro del card *\/\r\n width: 100%;\r\n height: 300px; \/* o ajusta seg\u00fan tu dise\u00f1o *\/\r\n max-width: 240px;\r\n background: #fff;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n box-shadow: none;\r\n transition: none;\r\n cursor: pointer;\r\n}\r\n\r\n\r\n\/* Imagen del producto *\/\r\n.product-card img {\r\n width: auto;\r\n height: auto;\r\n max-width: 100%;\r\n max-height: 100%;\r\n object-fit: contain;\r\n display: block;\r\n}\r\n\r\n.image-container {\r\n width: 180px;\r\n height: 180px;\r\n max-width: 180px;\r\n max-height: 180px;\r\n min-width: 180px;\r\n min-height: 180px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n overflow: visible;\r\n}\r\n\r\n\r\n\/* Badge de descuento *\/\r\n.discount-badge {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n background: #2E324A;\r\n color: white;\r\n padding: 2px 3px;\r\n font-size: 15px;\r\n border-radius: 2px 2px 2px 2px;\r\n z-index: 1;\r\n}\r\n\r\n\r\n\/* Informaci\u00f3n del producto *\/\r\n.product-info {\r\n padding: 0px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between; \/* distribuye verticalmente *\/\r\n height: 100%;\r\n}\r\n\r\n\/* L\u00ednea de precios *\/\r\n.price-line {\r\n display: flex;\r\n justify-content: space-between;\r\n font-weight: 500;\r\n font-size: 16px;\r\n min-height: 24px;\r\n}\r\n\r\n.precio-real {\r\n text-decoration: line-through;\r\n color: #999;\r\n font-weight: normal;\r\n}\r\n\r\n\/* Nombre del producto *\/\r\n.nombre {\r\n font-size: 13px;\r\n font-weight: 500;\r\n color: #333;\r\n margin-top: 2px;\r\n line-height: 1.2;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2; \/* \u2190 m\u00e1ximo 2 l\u00edneas *\/\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n min-height: calc(1.2em * 2); \/* altura para 2 l\u00edneas *\/\r\n max-height: calc(1.2em * 2); \/* evita que crezca m\u00e1s *\/\r\n}\r\n\r\n\/* L\u00ednea de cantidad *\/\r\n.quantity-line {\r\n font-size: 12px;\r\n color: #555;\r\n min-height: 12px;\r\n}\r\n\r\n\/* Punto de venta *\/\r\n.product-info p:last-child {\r\n font-size: 12px;\r\n color: #777;\r\n margin: 0;\r\n min-height: 20px;\r\n}\r\n\r\n\/* Scrollbar para navegadores WebKit (Chrome, Safari, Edge) *\/\r\n.carrusel-scroll::-webkit-scrollbar {\r\n height: 6px; \/* para scroll horizontal *\/\r\n background: white;\r\n}\r\n\r\n.carrusel-scroll::-webkit-scrollbar-thumb {\r\n background-color: white; \/* color muy tenue *\/\r\n border-radius: 10px;\r\n}\r\n\r\n.carrusel-scroll::-webkit-scrollbar-track {\r\n background: white;\r\n}\r\n\r\n\/* Scrollbar para Firefox *\/\r\n.carrusel-scroll {\r\n scrollbar-width: thin;\r\n scrollbar-color: rgba(26, 29, 48, 0.1) transparent;\r\n}\r\n\r\n .punto-sticky {\r\n position: sticky;\r\n top: 0;\r\n z-index: 9; \/* debajo del carrusel *\/\r\n background: #1A1D30;\r\n color: white;\r\n padding: 0px 0px;\r\n font-size: 14px;\r\n font-weight: 500;\r\n text-align: center;\r\n transition: transform 0.5s ease, opacity 0.5s ease;\r\n}\r\n\r\n.punto-sticky.hidden {\r\n transform: translateY(-100%);\r\n opacity: 0;\r\n pointer-events: none;\r\n}\r\n\r\n.modal {\r\n display: none;\r\n position: fixed;\r\n z-index: 1000;\r\n left: 0; top: 0;\r\n width: 100%; height: 100%;\r\n background-color: rgba(0,0,0,0.5);\r\n}\r\n\r\n.modal-content {\r\n position: relative;\r\n background-color: #fff;\r\n margin: 10% auto;\r\n padding: 2em;\r\n width: 80%;\r\n max-width: 400px;\r\n border-radius: 8px;\r\n}\r\n\r\n\/* Badge de descuento modal*\/\r\n.discount-badge-modal {\r\n position: absolute;\r\n top: 10px;\r\n left: 10px;\r\n background: #2E324A;\r\n color: white;\r\n padding: 2px 3px;\r\n font-size: 24px;\r\n border-radius: 2px 2px 2px 2px;\r\n z-index: 1;\r\n}\r\n\r\n.closeModal {\r\n position: absolute;\r\n top: 10px;\r\n right: 20px;\r\n font-size: 32px;\r\n cursor: pointer;\r\n}\r\n\r\n.image-wrapper {\r\n display: flex;\r\n justify-content: center; \/* centra horizontalmente *\/\r\n align-items: center; \/* centra verticalmente *\/\r\n height: 100%; \/* ajusta seg\u00fan el espacio que quieras *\/\r\n}\r\n\r\n.price-row {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n font-size: 22px;\r\n width: 100%;\r\n margin-bottom: 10px;\r\n}\r\n.price-row strong {\r\n color: #000;\r\n}\r\n.price-row del {\r\n color: gray;\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n <\/header>\r\n \r\n <main>\r\n <div id=\"productGrid\"><\/div>\r\n <\/main>\r\n\r\n\r\n<div id=\"modal\" class=\"modal\">\r\n <div class=\"modal-content\">\r\n <span id=\"closeModal\" class=\"closeModal\">×<\/span>\r\n <div id=\"modalDetails\"><\/div>\r\n <div class=\"modal-buttons\" style=\"margin-left=20px;\">\r\n \r\n \r\n \r\n \r\n \r\n \r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n \r\n <script>\r\n\/\/ URL del archivo CSV\r\nconst csvUrl = 'https:\/\/quitoprices.com\/wp-content\/productos.csv';\r\n\r\n\/\/ Funci\u00f3n para cargar el CSV desde una URL\r\nasync function loadCSV(url) {\r\n try {\r\n const response = await fetch(url);\r\n if (!response.ok) {\r\n throw new Error('No se pudo cargar el archivo CSV.');\r\n }\r\n const data = await response.text();\r\n return parseCSV(data);\r\n } catch (error) {\r\n console.error('Error al cargar el CSV:', error);\r\n return [];\r\n }\r\n}\r\n\r\n\/\/ Funci\u00f3n para parsear el CSV\r\nfunction parseCSV(data) {\r\n const lines = data.trim().split('\\n');\r\n \/\/ Trim each header to remove leading\/trailing whitespace\r\n const headers = lines[0].split('|').map(header => header.trim());\r\n const products = [];\r\n\r\n for (let i = 1; i < lines.length; i++) {\r\n \/\/ Trim each line to remove leading\/trailing whitespace\r\n const currentline = lines[i].trim().split('|');\r\n\r\n const obj = {};\r\n headers.forEach((header, index) => {\r\n \/\/ Assign trimmed values to each object property\r\n const value = currentline[index] ? currentline[index].trim() : '';\r\n obj[header] = value;\r\n });\r\n products.push(obj);\r\n }\r\n return products;\r\n}\r\n\r\n\r\n\/\/ Variables globales\r\nlet products = [];\r\nlet filteredProducts = [];\r\n\r\n\/\/ Variable para guardar el punto seleccionado\r\n let puntoSeleccionado = null;\r\n\r\n\/\/ Funci\u00f3n de inicializaci\u00f3n\r\nasync function initialize() {\r\n products = await loadCSV(csvUrl);\r\n filteredProducts = [...products];\r\n populateFilters();\r\n displayProducts();\r\n}\r\n\r\n\r\n\/\/ Funci\u00f3n para poblar opciones de filtros\r\nfunction populateFilters() {\r\n \r\n const puntosDeVenta = [...new Set(products.map(p => p.PuntoDeVenta))];\r\n\r\n \/\/ Poblar opciones de PuntoDeVenta para ambas versiones\r\n populatePuntoDeVentaFilters(puntosDeVenta);\r\n}\r\n\r\n\/\/ Funci\u00f3n para poblar los filtros de PuntoDeVenta para desktop y m\u00f3vil\r\nfunction populatePuntoDeVentaFilters(puntosDeVenta) {\r\n const carrusel = document.getElementById('carrusel');\r\n carrusel.innerHTML = '';\r\n\r\n \/\/ Eliminar duplicados y ordenar alfab\u00e9ticamente\r\n const puntosOrdenados = [...new Set(puntosDeVenta)].sort((a, b) => a.localeCompare(b));\r\n \/\/Agregar boton Todos\r\n const btn = document.createElement('button');\r\n btn.textContent = \"Todos\";\r\n btn.addEventListener('click', () => {\r\n updateActiveButton(btn);\r\n puntoSeleccionado = \"Todos\";\r\n \/\/ \u2190 esto aplica el estilo activo\r\n \/\/updatePuntoSticky(\"Todos\");\r\n filterProducts(); \/\/ aplica el filtro inmediatamente\r\n });\r\n carrusel.appendChild(btn);\r\n \r\n \/\/ Renderizar botones en el carrusel\r\n puntosOrdenados.forEach(punto => {\r\n const btn = document.createElement('button');\r\n btn.textContent = punto;\r\n btn.addEventListener('click', () => {\r\n puntoSeleccionado = punto;\r\n updateActiveButton(btn); \/\/ \u2190 esto aplica el estilo activo\r\n \/\/updatePuntoSticky(punto);\r\n filterProducts(); \/\/ aplica el filtro inmediatamente\r\n });\r\n carrusel.appendChild(btn);\r\n \r\n \/\/ Seleccionar el primero por defecto\r\n \/*if (index === 0) {\r\n puntoSeleccionado = punto;\r\n filterProducts();\r\n }*\/\r\n });\r\n \r\n \/\/ Seleccionar el primero por defecto\r\n if (puntosOrdenados.length > 0) {\r\n puntoSeleccionado = \"Todos\";\r\n \/\/updatePuntoSticky(\"Todos\");\r\n filterProducts();\r\n\r\n \/\/ Activar visualmente el primer bot\u00f3n\r\n const primerBoton = carrusel.querySelector('button');\r\n if (primerBoton) updateActiveButton(primerBoton);\r\n }\r\n}\r\n\r\nfunction updateActiveButton(activeBtn) {\r\n const buttons = document.querySelectorAll('#carrusel button');\r\n buttons.forEach(btn => btn.classList.remove('active'));\r\n activeBtn.classList.add('active');\r\n}\r\n\r\n\/\/ Funci\u00f3n para mostrar productos\r\nfunction displayProducts() {\r\n const grid = document.getElementById('productGrid');\r\n grid.innerHTML = '';\r\n\r\n filteredProducts.forEach((product, index) => {\r\n \r\n \/* \/\/ Mostrar anuncio despu\u00e9s de cada 50 productos\r\n if (index > 0 && index % 100 === 0) {\r\n const adElement = document.createElement('div');\r\n adElement.className = 'ad'; \/\/ Clase para estilizar el anuncio\r\n\r\n \/\/ Inserta el c\u00f3digo <amp-ad>\r\n adElement.innerHTML = `\r\n <amp-ad width=\"100vw\" height=\"320\"\r\n type=\"adsense\"\r\n data-ad-client=\"ca-pub-7066323332708614\"\r\n data-ad-slot=\"7064253755\"\r\n data-auto-format=\"mcrspv\"\r\n data-full-width=\"\">\r\n <div overflow=\"\"><\/div>\r\n <\/amp-ad>\r\n `;\r\n\r\n \/\/ A\u00f1ade el anuncio al grid\r\n productGrid.appendChild(adElement);\r\n }*\/\r\n \r\n \r\n const card = document.createElement('div');\r\n card.className = 'product-card';\r\n card.addEventListener('click', () => openModal(product));\r\n\r\n \/\/ Badge de descuento\r\n const discountBadge = document.createElement('div');\r\n discountBadge.className = 'discount-badge';\r\n discountBadge.textContent = `-${product.Descuento}%`;\r\n card.appendChild(discountBadge);\r\n\r\n \/\/ Imagen\r\n const img = document.createElement('img');\r\n const imageContainer = document.createElement('div');\r\n img.src = product.RutaImagen;\r\n img.alt = product.Nombre;\r\n img.loading = 'lazy';\r\n \/\/img.addEventListener('click', () => openModal(product));\r\n imageContainer.className = 'image-container';\r\n imageContainer.appendChild(img);\r\n\r\n card.appendChild(imageContainer);\r\n\r\n \/\/ Informaci\u00f3n\r\n const info = document.createElement('div');\r\n info.className = 'product-info';\r\n\r\n \/\/ PrecioActual y PrecioReal\r\n const priceLine = document.createElement('div');\r\n priceLine.className = 'price-line';\r\n\r\n const precioActual = document.createElement('span');\r\n precioActual.textContent = `$${product.PrecioActual}`;\r\n\r\n const precioReal = document.createElement('span');\r\n precioReal.textContent = `$${product.PrecioReal}`;\r\n precioReal.className = 'precio-real';\r\n\r\n priceLine.appendChild(precioActual);\r\n priceLine.appendChild(precioReal);\r\n info.appendChild(priceLine);\r\n\r\n\r\n \/\/ Nombre\r\n const nombre = document.createElement('p');\r\n nombre.className = 'nombre';\r\n nombre.textContent = product.Nombre;\r\n nombre.title = product.Nombre;\r\n info.appendChild(nombre);\r\n \r\n \/\/ Cantidad\r\n const quantityLine = document.createElement('div');\r\n quantityLine.className = 'quantity-line';\r\n\r\n const cantidadContainer = document.createElement('span'); \/\/ Contenedor para el \u00edcono y la cantidad\r\n cantidadContainer.style.display = 'flex'; \/\/ Alinear \u00edcono y texto horizontalmente\r\n cantidadContainer.style.alignItems = 'center'; \/\/ Alinear verticalmente\r\n\r\n const icono = document.createElement('i'); \/\/ Crear el \u00edcono de Font Awesome\r\n icono.className = 'fa-solid fa-robot'; \/\/ Clase del \u00edcono\r\n icono.style.marginLeft = '10px'; \/\/ Espaciado entre el \u00edcono y el texto\r\n icono.style.color = '#00bf63';\r\n\r\n const cantidad = document.createElement('span');\r\n cantidad.textContent = product.Cantidad;\r\n cantidadContainer.appendChild(cantidad);\r\n \r\n \/\/ A\u00f1adir el \u00edcono al contenedor\r\n \/*if (Number(product.RecomendadoPorIA) === 1) {\r\n cantidadContainer.appendChild(icono);\r\n }*\/\r\n quantityLine.appendChild(cantidadContainer);\r\n info.appendChild(quantityLine);\r\n\r\n \/\/ PuntoDeVenta\r\n const puntoVenta = document.createElement('p');\r\n puntoVenta.textContent = product.PuntoDeVenta;\r\n puntoVenta.style.alignItems = 'left';\r\n info.appendChild(puntoVenta);\r\n \r\n \r\n card.appendChild(info);\r\n grid.appendChild(card);\r\n });\r\n}\r\n\r\n\/\/ Funci\u00f3n para filtrar productos\r\nfunction filterProducts() {\r\n if (puntoSeleccionado !== \"Todos\") {\r\n filteredProducts = products.filter(product => {\r\n return product.PuntoDeVenta === puntoSeleccionado;\r\n });\r\n }\r\n else{\r\n filteredProducts = products; \/\/ \u2190 devuelve todos los productos\r\n }\r\n displayProducts();\r\n}\r\n\r\nfunction updatePuntoSticky(nombre) {\r\n const puntoSticky = document.getElementById('puntoSticky');\r\n puntoSticky.textContent = nombre;\r\n}\r\n\r\n\r\nlet lastScrollTop = 0;\r\nconst carrusel = document.querySelector('.carrusel-movil');\r\nconst puntoSticky = document.getElementById('puntoSticky');\r\n\r\nwindow.addEventListener('scroll', () => {\r\n const currentScroll = window.pageYOffset || document.documentElement.scrollTop;\r\n\r\n if (window.innerWidth < 769) {\r\n if (currentScroll > lastScrollTop + 4) {\r\n \/\/ Scroll hacia abajo: ocultar carrusel, mostrar cinta\r\n carrusel.classList.add('hidden');\r\n \/\/puntoSticky.classList.remove('hidden');\r\n } else if (currentScroll < lastScrollTop - 2) {\r\n \/\/ Scroll hacia arriba: mostrar carrusel, ocultar cinta\r\n carrusel.classList.remove('hidden');\r\n \/\/puntoSticky.classList.add('hidden');\r\n }\r\n }\r\n\r\n lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;\r\n});\r\n\r\ndocument.getElementById('searchForm').addEventListener('submit', function(e) {\r\n e.preventDefault(); \/\/ evita recargar la p\u00e1gina\r\n const query = document.getElementById('searchInput').value.toLowerCase();\r\n const productos = document.querySelectorAll('.product-card');\r\n\r\n productos.forEach(card => {\r\n const nombre = card.querySelector('.nombre')?.textContent.toLowerCase() || '';\r\n if (nombre.includes(query)) {\r\n card.style.display = 'flex'; \/\/ o 'block' seg\u00fan tu layout\r\n } else {\r\n card.style.display = 'none';\r\n }\r\n });\r\n});\r\n\r\n\r\n\/\/ Funciones del modal\r\nconst modal = document.getElementById('modal');\r\nconst closeModalBtn = document.getElementById('closeModal');\r\n\r\nfunction openModal(product) {\r\n \/\/console.log('Product in openModal:', product); \r\n const modalDetails = document.getElementById('modalDetails');\r\n \r\n \/\/ Variable para guardar el nombre detectado\r\n let appName = \"\";\r\n\r\n \/\/ Validar si el texto contiene \"rappi\" o \"tipti\"\r\n if (product.AppStore.toLowerCase().includes(\"rappi\")) {\r\n appName = \"Rappi\";\r\n } else if (product.AppStore.toLowerCase().includes(\"tipti\")) {\r\n appName = \"Tipti\";\r\n } else {\r\n appName = \"\"; \/\/ O cualquier valor por defecto\r\n };\r\n \r\n \/\/ Crear el elemento PuntoDeVenta en el Modal\r\n const puntoVentaModal = document.createElement('p');\r\n puntoVentaModal.textContent = product.PuntoDeVenta;\r\n\r\n \/\/ Obtener el estilo del PuntoDeVenta en el grid\r\n \/*const puntoVentaGrid = Array.from(document.querySelectorAll('.product-card p')).find(\r\n (el) => el.textContent === product.PuntoDeVenta\r\n );\r\n \r\n if (puntoVentaGrid) {\r\n const gridBackgroundColor = window.getComputedStyle(puntoVentaGrid).backgroundColor;\r\n const gridTextColor = window.getComputedStyle(puntoVentaGrid).color;\r\n\r\n \/\/ Aplicar los mismos estilos al modal\r\n puntoVentaModal.style.backgroundColor = gridBackgroundColor;\r\n puntoVentaModal.style.color = gridTextColor;\r\n puntoVentaModal.style.fontWeight = 'bold'; \/\/ Aseguramos negritas\r\n }\r\n *\/\r\n\r\n \r\n \/\/ A\u00f1adir el \u00edcono al modal si es recomendado por la IA\r\n \/* const textRecomendado = Number(product.RecomendadoPorIA) === 1 ? '<p style=\"font-size: 12px; color: #00bf63;\"><i class=\"fa-solid fa-robot\"><\/i> Producto sugerido por la IA<\/p>' : '';\r\n *\/\r\n \r\n modalDetails.innerHTML = `\r\n <div class=\"image-wrapper\">\r\n <img decoding=\"async\" src=\"${product.RutaImagen}\" alt=\"${product.Nombre}\" style =\"width:100%; max-width:250px;\">\r\n <\/div>\r\n <div style=\"display: flex;\"><div style=\"display: block; font-size: 20px; margin-bottom: 10px; width: 100%;\">${product.Nombre}<p><\/p><\/div><\/div>\r\n \r\n <p style=\"margin-bottom: 10px;\"> <div class=\"price-row\">\r\n <strong>$${product.PrecioActual}<\/strong>\r\n <del>$${product.PrecioReal}<\/del>\r\n <\/div><div style=\"display: block; font-size: 16px; margin-bottom: 10px; margin-right: 10px; width: 100%;\">${product.Cantidad}<\/div><div style=\"display: block; font-size: 18px; margin-bottom: 10px; margin-right: 10px; width: 100%;\">${product.PuntoDeVenta}<\/div><\/p>\r\n `;\r\n \r\n \/\/ Crear y a\u00f1adir la etiqueta de descuento al modal\r\n const discountBadge = document.createElement('div');\r\n discountBadge.className = 'discount-badge discount-badge-modal'; \/\/ Aseg\u00farate de que esta clase coincide con la del grid\r\n discountBadge.textContent = `-${product.Descuento}%`;\r\n modalDetails.prepend(discountBadge); \/\/ Coloca la etiqueta al principio\r\n \r\n \/* document.getElementById('playStoreBtn').href = product.PlayStore;\r\n document.getElementById('appStoreBtn').href = product.AppStore;\r\n \/\/document.getElementById('googleMapsBtn').href = product.GoogleMaps;\r\n \r\n const copyIcon = document.getElementById('copyIcon');\r\n const copyText = document.getElementById('copyText');\r\n \r\n copyText.style.display = 'none';\r\n \r\n copyIcon.addEventListener('click', () => {\r\n navigator.clipboard.writeText(product.Nombre)\r\n copyIcon.style.color = '#00bf63';\r\n copyText.style.display = 'block';\r\n copyText.style.color = '#00bf63';\r\n });*\/\r\n\r\n modal.style.display = 'block';\r\n}\r\n\r\ncloseModalBtn.addEventListener('click', () => {\r\n modal.style.display = 'none';\r\n});\r\n\r\nwindow.addEventListener('click', event => {\r\n if (event.target == modal) {\r\n modal.style.display = 'none';\r\n }\r\n});\r\n\r\n\r\n\r\n\/\/ Inicializaci\u00f3n\r\ninitialize();\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Listado de Productos ×<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-5818","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"mailpoet_newsletter_max":false,"woocommerce_thumbnail":false,"woocommerce_single":false,"woocommerce_gallery_thumbnail":false},"uagb_author_info":{"display_name":"tonitovg","author_link":"https:\/\/quitoprices.com\/index.php\/author\/tonitovg\/"},"uagb_comment_info":0,"uagb_excerpt":"Listado de Productos ×","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/quitoprices.com\/index.php\/wp-json\/wp\/v2\/pages\/5818","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/quitoprices.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/quitoprices.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/quitoprices.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/quitoprices.com\/index.php\/wp-json\/wp\/v2\/comments?post=5818"}],"version-history":[{"count":1015,"href":"https:\/\/quitoprices.com\/index.php\/wp-json\/wp\/v2\/pages\/5818\/revisions"}],"predecessor-version":[{"id":6919,"href":"https:\/\/quitoprices.com\/index.php\/wp-json\/wp\/v2\/pages\/5818\/revisions\/6919"}],"wp:attachment":[{"href":"https:\/\/quitoprices.com\/index.php\/wp-json\/wp\/v2\/media?parent=5818"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}