document.addEventListener('DOMContentLoaded', async function () { const urlParams = new URLSearchParams(window.location.search); const marca = urlParams.get('marca_id'); async function cargarHero() { try { const herourl = `https://pronacatqma.com/page-service/?marca_id=${marca}`; const heroresponse = await fetch(herourl); const datahero = await heroresponse.json(); mostrarHero(datahero); } catch (error) { console.error('Error al cargar:', error); } } async function cargarProductos() { try { const url = `https://pronacatqma.com/page-service/?id_marca_nuevos=${marca}`; const response = await fetch(url); const data = await response.json(); limpiarProductos(); mostrarProductos(data); } catch (error) { console.error('Error al cargar productos:', error); } } function limpiarProductos() { const productsContainer = document.querySelector('.productos'); productsContainer.innerHTML = ''; } function mostrarHero(datahero) { const herocontainer = document.querySelector('.hero'); const title = document.querySelector('.nombre-marca'); if (datahero && datahero.length > 0) { datahero.forEach(hero => { herocontainer.style.backgroundImage = `url(${hero.banner})`; herocontainer.classList.add('hero-marcas'); herocontainer.innerHTML = ` `; title.textContent = `${hero.nombre}`; mostrarRecetas(hero); }); } else { console.warn('No se encontraron datos '); } } function mostrarProductos(data) { const productsContainer = document.querySelector('.productos'); const hiddenProductsContainer = document.querySelector('.productos-ocultos'); const verMasBtn = document.querySelector('.ver-mas-btn'); if (data && data.length > 0) { data.forEach((product, index) => { const productElement = document.createElement('div'); productElement.classList.add('col-xs-12', 'col-sm-6', 'col-md-3', 'marcas'); productElement.id = `producto-${product.id}`; productElement.innerHTML = ` `; productElement.addEventListener('click', () => { const detalle = product.detalle[0]; actualizarModal(detalle); // Asegúrate de que la función esté definida }); if (index 8) { // Mostrar el botón "Ver más" si hay más de 8 productos verMasBtn.style.display = 'block'; } } else { console.warn('No se encontraron productos.'); } } // Mostrar productos ocultos al hacer clic en "Ver más" document.querySelector('.ver-mas-btn').addEventListener('click', function () { const hiddenProductsContainer = document.querySelector('.productos-ocultos'); if (hiddenProductsContainer.classList.contains('hidden')) { hiddenProductsContainer.classList.remove('hidden'); this.innerHTML = `Ver menos `; } else { hiddenProductsContainer.classList.add('hidden'); this.innerHTML = `Ver más `; } }) function mostrarRecetas(recetas) { const recetastitle = document.querySelector('.title-receta-marca'); const recetasContainer = document.createElement('div'); recetasContainer.classList.add('container'); const recetarowElement = document.createElement('div'); recetarowElement.classList.add('row'); recetasContainer.appendChild(recetarowElement); if (!recetas.recetas || recetas.recetas.length === 0) { return; } recetastitle.innerHTML = ` `; recetas.recetas.forEach(receta => { const recetaElement = document.createElement('div'); recetaElement.classList.add('col-xs-12', 'col-sm-6', 'col-md-4', 'marcas'); recetaElement.innerHTML = ` `; recetarowElement.appendChild(recetaElement); }); const productosContainer = document.querySelector('.recetas-marcas'); productosContainer.appendChild(recetasContainer); } // Función para cerrar el modal window.cerrarModal = function () { const modal = document.getElementById('productModal'); modal.style.display = 'none'; }; // Función para actualizar el contenido del modal window.actualizarModal = function (detalle) { document.getElementById('modalImage').src = detalle.portada; document.getElementById('modalTitle').textContent = detalle.titulo; document.getElementById('modalDescription').textContent = detalle.descripcion || ''; // Actualizar contenido de las nuevas etiquetas en el modal document.getElementById('modalPeso').textContent = `${detalle.peso || 'No especificado'}`; document.getElementById('modalModoConservacion').textContent = ` ${detalle.modo_conservacion || 'No especificado'}`; document.getElementById('modalVidaUtil').textContent = ` ${detalle.vida_util || 'No especificada'}`; document.getElementById('modalDiferentesUsos').textContent = `${detalle.diferentes_usos || 'No especificados'}`; document.getElementById('modalTamanoPorPorcion').textContent = ` ${detalle.tamano_por_porcion || 'No especificado'}`; document.getElementById('modalCalorias').textContent = `${detalle.calorias || 'No especificado'}`; document.getElementById('modalGrasa').textContent = `${detalle.grasa || 'No especificado'}`; document.getElementById('modalColesterol').textContent = ` ${detalle.colesterol || 'No especificado'}`; document.getElementById('modalSodio').textContent = ` ${detalle.sodio || 'No especificado'}`; document.getElementById('modalCarbohidratos').textContent = ` ${detalle.carbohidratos || 'No especificado'}`; document.getElementById('modalProteina').textContent = ` ${detalle.proteina || 'No especificado'}`; document.getElementById('modalpCalorias').textContent = `${detalle.porcentaje_calorias}%`; document.getElementById('modalpGrasa').textContent = `${detalle.porcentaje_grasa}%`; document.getElementById('modalpColesterol').textContent = ` ${detalle.porcentaje_colesterol}%`; document.getElementById('modalpSodio').textContent = ` ${detalle.porcentaje_sodio}%`; document.getElementById('modalpCarbohidratos').textContent = ` ${detalle.porcentaje_carbohidratos}%`; document.getElementById('modalpProteina').textContent = ` ${detalle.porcentaje_proteina}%`; abrirModal('productModal') }; cargarHero(); cargarProductos() });