Pop up Ultima compra en colección - Bsale-IO/template-docs GitHub Wiki

// Convierte los valores de segundos a milisegundos para su uso en los tiempos del popup.
const popupDelay = {{ popup_delay }} * 1000; // Tiempo antes de mostrar el popup
const popupInterval = {{ popup_interval }} * 1000; // Intervalo entre popups
const popupDuration = {{ popup_duration }} * 1000; // Tiempo que el popup permanece visible

// Lista de productos obtenidos de la colección, generados dinámicamente
const products = [
    {% for product in collection %}
        {
            name: "{{ product.title | escape }}", // Nombre del producto
            image: "{{ product.default_image | image_url: 'S' }}", // Imagen del producto
            url: "{{ product.link }}", // Enlace al producto
            price: "{{ product.finalPrice | money_filter }}" // Precio formateado del producto
        }{% unless forloop.last %},{% endunless %}
    {% endfor %}
];

// Variables para controlar el tiempo y visibilidad
let popupTimer = null;
let popupIntervalTimer = null;
let lastPopupTime = 0;
let popupIsVisible = false;
let pageVisible = true;

// Detector de visibilidad de la página
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        // La página no está visible
        pageVisible = false;
        clearTimeout(popupTimer);
        clearInterval(popupIntervalTimer);
    } else {
        // La página es visible de nuevo
        pageVisible = true;
        
        // Si han pasado más de popupInterval ms desde el último popup, muestra uno nuevo
        const timeElapsed = Date.now() - lastPopupTime;
        if (timeElapsed >= popupInterval) {
            showPopup();
        } else {
            // Programa el próximo popup basado en el tiempo transcurrido
            popupTimer = setTimeout(showPopup, popupInterval - timeElapsed);
        }
    }
});

// Función para obtener un tiempo aleatorio de compra reciente
function getRandomTime() {
    const times = [
        "4 minuto", "5 minutos", "7 minutos", "8 minutos", "9 minutos",
        "10 minutos", "12 minutos", "15 minutos", "20 minutos", "25 minutos",
        "30 minutos", "35 minutos", "40 minutos", "45 minutos", "50 minutos",
        "55 minutos", "1 hora", "1 hora 10 minutos", "1 hora 20 minutos", 
        "1 hora 30 minutos", "2 horas", "2 horas 30 minutos", "3 horas"
    ];
    return times[Math.floor(Math.random() * times.length)]; // Selecciona uno al azar
}

// Función para mostrar el popup de compra reciente
function showPopup() {
    // Si no hay productos en la lista, no hace nada
    if (products.length === 0) return;
    
    // Registra el tiempo de este popup
    lastPopupTime = Date.now();
    popupIsVisible = true;

    // Referencias a los elementos del popup
    const popup = document.getElementById("popup");
    const popupLink = document.getElementById("popup-link");
    const popupImage = document.getElementById("popup-img");
    const popupIcon = document.getElementById("popup-icon");

    // Un producto y un tiempo de compra aleatorio
    const randomProduct = products[Math.floor(Math.random() * products.length)];
    const randomTime = getRandomTime();

    // Actualiza los textos del popup con la información seleccionada
    document.getElementById("popup-product-name").textContent = randomProduct.name;
    document.getElementById("popup-time").textContent = randomTime;
    document.getElementById("popup-price").textContent = "Precio: " + randomProduct.price;

    // Asigna el enlace al producto
    popupLink.href = randomProduct.url;

    // Muestra la imagen si existe, de lo contrario, muestra el icono por defecto en svg
    if (randomProduct.image) {
        popupImage.src = randomProduct.image;
        popupImage.style.display = "block";
        popupIcon.style.display = "none";
    } else {
        popupImage.style.display = "none";
        popupIcon.style.display = "block";
    }

    // Muestra el popup con animación de entrada
    popup.style.display = "block";
    popup.style.animation = "fadeIn 1s ease-in-out";
    popup.style.opacity = "1";

    // Oculta el popup después de popupDuration milisegundos
    clearTimeout(popupTimer);
    popupTimer = setTimeout(() => {
        popup.style.animation = "fadeOut 0.5s ease-in-out"; // Aplica animación de salida
        popup.addEventListener("animationend", function handleFadeOut() {
            popup.style.display = "none"; // Oculta el popup
            popup.style.animation = ""; // Resetea la animación
            popup.removeEventListener("animationend", handleFadeOut); // Elimina el listener
            popupIsVisible = false;
        });
        
        // Programa el próximo popup solo si la página está visible
        if (pageVisible) {
            clearTimeout(popupIntervalTimer);
            popupIntervalTimer = setTimeout(showPopup, popupInterval);
        }
    }, popupDuration);
}

    // Inicialización - Muestra el primer popup después del tiempo de espera inicial
    popupTimer = setTimeout(() => {
    showPopup();
    
    // Después del primer popup, establece el intervalo regular
    popupIntervalTimer = setInterval(() => {
        if (pageVisible && !popupIsVisible) {
            showPopup();
        }
    }, popupInterval);
}, popupDelay);