Cómo crear notificaciones en tiempo real para compras recientes en WordPress

Las notificaciones en tiempo real de compras recientes son una excelente estrategia para aumentar la confianza de los usuarios en tu tienda online. Este sistema muestra alertas dinámicas que informan sobre productos adquiridos recientemente por otros compradores, utilizando el principio de prueba social para fomentar nuevas compras.

Las notificaciones en tiempo real se actualizan cada 30 segundos, mostrando aleatoriamente un pedido de los últimos 20 completados. Este parámetro es fácilmente ajustable en el código, lo que te permite personalizarlo según las necesidades específicas de tu tienda. Además, las alertas pueden desactivarse por sesión, asegurando que si el usuario no desea verlas, su preferencia se respete hasta que cierre el navegador o abra una nueva pestaña.

En este artículo, te mostraremos cómo implementar este sistema de notificaciones en tiempo real en WordPress con WooCommerce, usando AJAX, PHP y JavaScript. El proceso incluye dos componentes clave: una función para recuperar los pedidos recientes y otra para generar y mostrar dinámicamente las alertas en el navegador del cliente. ¡Sigue leyendo para aprender a optimizar tu tienda online con esta funcionalidad!

Funciones y explicación del sistema de notificaciones en tiempo real

1. Función obtener_compras_recientes

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

¿Qué hace?:

• Verifica que la solicitud AJAX sea válida.
• Obtiene hasta 20 pedidos con estado “completado”.
• Extrae detalles clave: producto, precio, comprador, imagen y tiempo desde la compra.
• Devuelve los datos en formato JSON para su uso en el frontend.

Puntos clave:

• Usa wc_get_orders para recuperar pedidos recientes.
• Incluye elementos visuales y funcionales, como la imagen y el enlace del producto.

2. Función notificaciones_compras_script

Este script en JavaScript gestiona la visualización de las notificaciones en tiempo real en el frontend.

Qué hace:

• Agrega un contenedor donde se mostrarán las notificaciones.
• Realiza solicitudes AJAX para obtener compras recientes.
• Muestra notificaciones dinámicamente cada 30 segundos.
• Permite al usuario desactivarlas para la sesión actual.

Elementos destacados:

• Diseño responsivo: Notificaciones atractivas y funcionales.
• Interactividad: El usuario puede desactivar alertas con un solo clic.
• Dinamismo: Muestra compras recientes de manera aleatoria, evitando repeticiones.

3. Estilos CSS

Los estilos incorporados garantizan una presentación moderna y atractiva.

Características:

• Diseño minimalista con bordes redondeados y sombras sutiles.
• Animaciones suaves para la aparición y desaparición de alertas.
• Adaptabilidad a distintos tamaños de pantalla.

Beneficios de implementar este sistema para crear notificaciones en tiempo real:

Mayor confianza: Los visitantes ven actividad real en la tienda.
Más conversiones: La prueba social y el efecto de urgencia impulsan las compras.
Personalización sencilla: El código puede adaptarse fácilmente a tu diseño.

Implementación: Agrega el siguiente código:

function obtener_compras_recientes() {
    // 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 = [];

    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() ?: 'Un cliente';
            $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($pedido->get_date_created()->getTimestamp(), current_time('timestamp'));

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

    wp_send_json_success($compras);
}
add_action('wp_ajax_obtener_compras_recientes', 'obtener_compras_recientes');
add_action('wp_ajax_nopriv_obtener_compras_recientes', 'obtener_compras_recientes');

Resumen:

En conclusión, implementar notificaciones en tiempo real en WordPress, a través de 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 tienda sin afectar su rendimiento.

Con este código, los visitantes podrán ver notificaciones en tiempo real, que informan que otros clientes están comprando, lo que genera confianza y motiva decisiones rápidas. Además, la opción de desactivar las notificaciones brinda mayor control al usuario, mejorando la usabilidad.

Al integrar esta funcionalidad de generación de notificaciones en tiempo real en tu tienda, refuerzas la interacción con los clientes, transmites profesionalismo y aumentas las oportunidades de venta.

Si estás profundizando tus conocimientos en el mundo WordPress y necesitas un servicio de hosting que se adapte a tus necesidades, te invitamos a conocer los planes de WordPress Hosting que DonWeb tiene para ofrecerte.