✅Notificaciones en Tiempo Real: Cómo Implementar un Sistema de Alertas de Compras Recientes en WordPress

Las notificaciones de compras recientes son una herramienta eficaz para incrementar la confianza de los usuarios en tu tienda en línea. Este sistema muestra alertas dinámicas en tiempo real sobre productos adquiridos recientemente por otros clientes, incentivando las compras mediante el principio de prueba social.

En este sistema, las notificaciones aparecen cada 30 segundos, seleccionando de manera aleatoria un pedido de los últimos 20 completados. Este límite es configurable en el código, lo que permite adaptarlo a las necesidades de tu tienda. Además, las notificaciones se pueden desactivar por sesión, es decir, la preferencia del usuario de no ver las alertas se almacenará hasta que cierre el navegador o abra una nueva pestaña, respetando su experiencia de navegación.

En este artículo, desglosaremos un código que implementa este sistema en WordPress con WooCommerce, utilizando AJAX, PHP y JavaScript. El código se estructura en dos partes principales: una función que recupera los datos de los pedidos recientes y otra que gestiona la generación y visualización dinámica de las notificaciones en el navegador del cliente. ¡Descubre cómo implementar esta funcionalidad y potenciar tu tienda en línea!

Funciones y Explicación

1. Función obtener_compras_recientes

Esta función en PHP se encarga de obtener los detalles de los últimos pedidos completados en WooCommerce.

• Qué hace:
  • Verifica que la solicitud sea válida (una llamada AJAX).
  • Recupera un máximo de 20 pedidos con estado «completado».
  • Extrae detalles de cada pedido, como el producto, precio, comprador, imagen, y tiempo transcurrido desde la compra.
  • Devuelve estos datos en formato JSON para que puedan ser utilizados en el cliente.
• Puntos clave:
  • Utiliza wc_get_orders para obtener los pedidos recientes.
  • Incluye información visual y funcional: imagen del producto, enlace al producto, y detalles del comprador.

2. Función notificaciones_compras_script

Esta función genera un script de JavaScript que maneja las notificaciones en el frontend.

• Qué hace:
  • Añade un contenedor en el DOM donde se mostrarán las notificaciones.
  • Recupera los datos de compras recientes mediante una solicitud AJAX.
  • Muestra notificaciones individuales de forma periódica (cada 30 segundos).
  • Permite al usuario desactivar las notificaciones para la sesión actual.
• Elementos destacados:
  • Diseño responsivo: Las notificaciones están estilizadas para ser visualmente atractivas y funcionales.
  • Interactividad: El usuario puede desactivar las notificaciones mediante un enlace en cada alerta.
  • Dinámico: Selecciona aleatoriamente una compra reciente para mostrar, evitando repeticiones.

3. Estilos CSS

Los estilos CSS integrados proporcionan una apariencia moderna y profesional a las notificaciones.

• Características:
  • Diseño minimalista con bordes redondeados y sombras sutiles.
  • Transiciones suaves para mostrar y ocultar notificaciones.
  • Adaptabilidad para diferentes tamaños de pantalla.

Beneficios de Implementar Este Sistema

1. Incrementa la confianza: Los usuarios ven evidencia de otras personas comprando productos.
2. Aumenta las conversiones: El efecto de urgencia y prueba social impulsa a los visitantes a actuar.
3. Personalización sencilla: El código puede adaptarse fácilmente para ajustarse al diseño de tu tienda.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.

function obtener_compras_recientes() {
    if (!defined('DOING_AJAX') || !DOING_AJAX) {
        return; // Verifica si es una solicitud AJAX válida
    }

    // Configuración para obtener hasta 20 pedidos recientes
    $args = [
        'status' => 'completed', // Solo pedidos completados
        'limit'  => 20,          // Cambia el límite a 20 pedidos
    ];

    $pedidos = wc_get_orders($args);
    $compras = []; // Array para almacenar la información de las compras

    foreach ($pedidos as $pedido) {
        $items = $pedido->get_items();
        foreach ($items as $item) {
            $producto_id = $item->get_product_id();
            $producto = $item->get_name();
            $precio = wc_price($item->get_total());
            $comprador = $pedido->get_billing_first_name();
            $imagen = get_the_post_thumbnail_url($producto_id, 'thumbnail') ?: wc_placeholder_img_src();
            $producto_url = get_permalink($producto_id) ?: site_url();
            $tiempo_transcurrido = human_time_diff(strtotime($pedido->get_date_created()), current_time('timestamp'));

            $compras[] = [
                'producto' => $producto,
                'comprador' => $comprador,
                'precio' => $precio,
                'imagen' => $imagen,
                'url' => $producto_url,
                'hace' => $tiempo_transcurrido,
            ];
        }
    }

    wp_send_json_success($compras); // Envía todas las compras en formato JSON
}
add_action('wp_ajax_obtener_compras_recientes', 'obtener_compras_recientes');
add_action('wp_ajax_nopriv_obtener_compras_recientes', 'obtener_compras_recientes');


// Función para agregar el script de notificaciones al pie de página
function notificaciones_compras_script() {
    ?>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const notificacionesContainer = document.createElement('div');
        notificacionesContainer.id = 'notificaciones-compras';
        notificacionesContainer.style.position = 'fixed';
        notificacionesContainer.style.bottom = '20px';
        notificacionesContainer.style.right = '20px';
        notificacionesContainer.style.width = '400px';
        notificacionesContainer.style.zIndex = '1000';
        document.body.appendChild(notificacionesContainer);

        let comprasRecientes = []; // Almacena las compras recientes obtenidas
        let comprasMostradas = []; // Lleva el registro de las compras ya mostradas
        let ultimaCompraMostrada = null; // Guarda la última compra mostrada
        let notificacionesActivas = true; // Controla si las notificaciones están activas

        // Verifica si el usuario desactivó las notificaciones en esta sesión
        if (sessionStorage.getItem('notificacionesDesactivadas') === 'true') {
            notificacionesActivas = false;
        }

        // Función para obtener las compras recientes desde el servidor
        function obtenerPedidosRecientes(callback) {
            fetch('<?php echo admin_url('admin-ajax.php'); ?>?action=obtener_compras_recientes')
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        comprasRecientes = data.data; // Almacena las compras obtenidas
                        comprasMostradas = []; // Resetea las compras mostradas
                        ultimaCompraMostrada = null; // Resetea la última compra
                        callback && callback(); // Ejecuta el callback si existe
                    }
                });
        }

        // Función para desactivar las notificaciones
        function desactivarNotificaciones() {
            notificacionesActivas = false; // Desactiva las notificaciones
            sessionStorage.setItem('notificacionesDesactivadas', 'true'); // Guarda el estado en la sesión
            const notificaciones = document.getElementById('notificaciones-compras');
            if (notificaciones) {
                notificaciones.remove(); // Elimina todas las notificaciones actuales
            }
            console.log('Notificaciones desactivadas para esta sesión.');
        }

        // Función para mostrar una notificación en pantalla
        function mostrarNotificacion(compra) {
            const notificacion = document.createElement('div');
            notificacion.className = 'notificacion';
            notificacion.innerHTML = `
                <div class="notificacion-contenido">
                 
                    <div class="notificacion-imagen">
                        <img src="${compra.imagen}" alt="${compra.producto}">
                    </div>
                    <div class="notificacion-detalles">
                        <a href="${compra.url}" target="_blank" class="notificacion-producto">${compra.producto}</a>
                        <p class="notificacion-precio">${compra.precio}</p>
                        <p class="notificacion-comprador">
                            Comprado por <span>${compra.comprador}</span> hace ${compra.hace}
                        </p>
                      <a href="#" class="cerrar-notificacion" title="Desactivar las notificaciones">x</a>



                    </div>


                </div>
            `;
            notificacionesContainer.appendChild(notificacion);

            // Temporizador para eliminar la notificación después de 5 segundos
            let timeout = setTimeout(() => {
                notificacion.style.opacity = '0';
                setTimeout(() => notificacion.remove(), 300);
            }, 5000);

            // Detiene el temporizador si el usuario interactúa con la notificación
            notificacion.addEventListener('mouseenter', () => clearTimeout(timeout));
            notificacion.addEventListener('mouseleave', () => {
                timeout = setTimeout(() => {
                    notificacion.style.opacity = '0';
                    setTimeout(() => notificacion.remove(), 300);
                }, 5000);
            });

            // Enlace para desactivar todas las notificaciones
            const closeLink = notificacion.querySelector('.cerrar-notificacion');
            closeLink.addEventListener('click', (e) => {
                e.preventDefault(); // Evita la acción predeterminada del enlace
                desactivarNotificaciones(); // Desactiva todas las notificaciones
            });
        }

        // Función para seleccionar una notificación aleatoria diferente
        function seleccionarNotificacionAleatoria() {
            const comprasNoMostradas = comprasRecientes.filter(
                compra => !comprasMostradas.includes(compra) && compra !== ultimaCompraMostrada
            );

            if (comprasNoMostradas.length === 0) {
                comprasMostradas = []; // Reinicia las compras mostradas si todas ya fueron usadas
                return seleccionarNotificacionAleatoria(); // Intenta de nuevo con el ciclo reiniciado
            }

            // Selecciona una compra aleatoria de las no mostradas
            const compraAleatoria = comprasNoMostradas[Math.floor(Math.random() * comprasNoMostradas.length)];
            comprasMostradas.push(compraAleatoria); // Marca la compra como mostrada
            ultimaCompraMostrada = compraAleatoria; // Actualiza la última compra mostrada

            return compraAleatoria;
        }

        // Función para mostrar una notificación aleatoria
        function mostrarNotificacionAleatoria() {
            if (notificacionesActivas && comprasRecientes.length > 0) {
                const compra = seleccionarNotificacionAleatoria();
                if (compra) {
                    mostrarNotificacion(compra);
                }
            }
        }

        // Carga inicial: Obtiene las compras recientes y muestra una notificación
        obtenerPedidosRecientes(() => {
            if (notificacionesActivas && comprasRecientes.length > 0) {
                mostrarNotificacionAleatoria();
            }
        });

        // Intervalo para mostrar notificaciones cada 30 segundos
        setInterval(() => {
            if (notificacionesActivas) { // Solo muestra notificaciones si están activas
                mostrarNotificacionAleatoria();
            }
        }, 30000);
    });
</script>


    <style>
        /* Estilos para las notificaciones */
        #notificaciones-compras .notificacion {
            display: flex;
            align-items: center;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 15px;
            padding: 10px;
            opacity: 1;
            transition: opacity 0.3s ease, transform 0.3s ease;
            transform: translateY(0);
            font-family: 'Arial', sans-serif;
            font-size: 14px;
            color: #333;
            width: 100%;
        }

        /* Contenido de la notificación */
        #notificaciones-compras .notificacion-contenido {
            display: flex;
            width: 100%;
        }

        /* Imagen del producto */
        #notificaciones-compras .notificacion-imagen {
            flex: 0 0 30%;
            max-width: 30%;
        }

        #notificaciones-compras .notificacion-imagen img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            border: 1px solid #ddd;
        }

        /* Detalles de la notificación */
        #notificaciones-compras .notificacion-detalles {
            flex: 0 0 70%;
            padding-left: 15px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        #notificaciones-compras .notificacion-producto {
            font-size: 14px;
            font-weight: bold;
            color: #5B38ED;
            text-decoration: none;
            margin-bottom: 5px;
        }

        #notificaciones-compras .notificacion-producto:hover {
            text-decoration: underline;
        }

        #notificaciones-compras .notificacion-precio {
            font-size: 14px;
            margin-bottom: 5px;
            color: #000;
        }

        #notificaciones-compras .notificacion-comprador {
            font-size: 12px;
            color: #555;
        }

        #notificaciones-compras .notificacion-comprador span {
            font-weight: bold;
        }

        #notificaciones-compras .notificacion:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
        }
		
        .notificacion {
    display: flex;
    flex-direction: column; /* Cambia la dirección del diseño a vertical */
    align-items: flex-start; /* Alinea los elementos al inicio */
    justify-content: space-between; /* Espacia el contenido de arriba a abajo */
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 15px;
    width: 100%;
    margin-bottom: 15px;
    position: relative;
}





    </style>
    <?php
}
// Agrega el script y los estilos al pie de página del sitio
add_action('wp_footer', 'notificaciones_compras_script');
Lenguaje del código: PHP (php)

Conclusión

En resumen, implementar notificaciones dinámicas de compras recientes en tu tienda WooCommerce no solo mejora la experiencia del usuario, sino que también aprovecha principios psicológicos como la prueba social y la urgencia para aumentar las conversiones. Este sistema es fácil de integrar, altamente personalizable y puede adaptarse al estilo de tu sitio web sin comprometer el rendimiento.

Con este código, los visitantes de tu tienda podrán ver en tiempo real que otros están comprando, lo que genera confianza y motiva la toma de decisiones rápidas. Además, la posibilidad de desactivar las notificaciones mejora la experiencia al dar control al usuario.

Al integrar estas funcionalidades en tu sitio, no solo refuerzas la interacción con tus clientes, sino que también demuestras profesionalismo y atención al detalle.

Nos vemos en el siguiente tutorial. Un saludo.