Mostrar una notificación flotante con los últimos productos vendidos en WooCommerce

Mostrar notificaciones flotantes con los productos vendidos recientemente es una excelente manera de aumentar la confianza y generar urgencia en los compradores. En este artículo, aprenderás cómo agregar una notificación flotante en la parte inferior de la pantalla que muestre productos vendidos aleatoriamente cada minuto.

Cómo funciona

1. Se obtiene una lista de los últimos productos vendidos en WooCommerce.
2. Se elige un producto aleatorio de la lista.
3. Se muestra una notificación flotante con la información del producto.
4. La notificación se actualiza automáticamente cada minuto.

Uso de wc_get_orders

Para obtener los productos vendidos recientemente, utilizaremos la función wc_get_orders(), que nos permite recuperar pedidos de WooCommerce filtrándolos según distintos criterios. En este caso, buscaremos los pedidos completados o en procesamiento y extraeremos los productos vendidos en ellos.

Ejemplo PHP para mostrar la notificación flotante

Añade el siguiente código en el archivo functions.phpde tu tema o en un plugin personalizado:

<?php
function enqueueFloatingNotificationScripts(): void {
    if ( is_admin() ) {
        return;
    }
    
    wp_enqueue_style( 'floating-notification-style', get_stylesheet_directory_uri() . '/floating-notification.css' );
    wp_enqueue_script( 'floating-notification-script', get_stylesheet_directory_uri() . '/floating-notification.js', ['jquery'], null, true );

    wp_localize_script( 'floating-notification-script', 'floatingNotification', [
        'ajaxUrl' => admin_url( 'admin-ajax.php' ),
    ] );
}
add_action( 'wp_enqueue_scripts', 'enqueueFloatingNotificationScripts' );

function getRandomSoldProduct(): void {
    $args = [
        'limit'    => 10,
        'orderby'  => 'date',
        'order'    => 'DESC',
        'status'   => ['wc-completed', 'wc-processing'],
    ];

    $orders = wc_get_orders( $args );
    $products = [];

    foreach ( $orders as $order ) {
        foreach ( $order->get_items() as $item ) {
            $productId = $item->get_product_id();
            $product   = wc_get_product( $productId );

            if ( ! $product ) {
                continue;
            }

            $products[] = [
                'id'    => $productId,
                'name'  => $product->get_name(),
                'url'   => get_permalink( $productId ),
                'image' => get_the_post_thumbnail_url( $productId, 'thumbnail' ) ?: wc_placeholder_img_src(),
            ];
        }
    }

    if ( empty( $products ) ) {
        wp_send_json_error();
    }

    $randomProduct = $products[array_rand( $products )];
    wp_send_json_success( $randomProduct );
}
add_action( 'wp_ajax_get_random_sold_product', 'getRandomSoldProduct' );
add_action( 'wp_ajax_nopriv_get_random_sold_product', 'getRandomSoldProduct' );

CSS para la notificación flotante

Crea un archivo llamado floating-notification.css en la carpeta de tu tema y añade:

#floating-notification {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    display: none;
    max-width: 250px;
    font-size: 14px;
    z-index: 9999;
}
#floating-notification img {
    max-width: 50px;
    margin-right: 10px;
}

JavaScript para mostrar la notificación cada minuto

Crea un archivo llamado floating-notification.js en la carpeta de tu tema y añade:

jQuery(document).ready(function ($) {
    function fetchProduct() {
        $.ajax({
            url: floatingNotification.ajaxUrl,
            type: 'POST',
            data: { action: 'get_random_sold_product' },
            success: function (response) {
                if (response.success) {
                    let product = response.data;
                    let notification = $('#floating-notification');

                    if (notification.length === 0) {
                        $('body').append('<div id="floating-notification"></div>');
                        notification = $('#floating-notification');
                    }

                    notification.html(
                        '<a href="' + product.url + '" style="color:#fff; text-decoration:none;">' +
                        '<img src="' + product.image + '" alt="' + product.name + '"> ' +
                        'Recientemente vendido: <strong>' + product.name + '</strong></a>'
                    ).fadeIn(400);

                    setTimeout(function () {
                        notification.fadeOut(400);
                    }, 5000);
                }
            }
        });
    }

    fetchProduct();
    setInterval(fetchProduct, 60000);
});

Con este código, tu tienda WooCommerce mostrará una notificación flotante con productos vendidos aleatoriamente cada minuto. Puedes personalizar el estilo y la duración según tus necesidades.

Related posts:

Mostrar imágenes de los productos en la página de checkout en WooCommerce Cómo mostrar productos con precio 0 y colocar “FREE” en WooCommerce