🔐 Mejorando el Código de Sorteos con Lista de Participantes en el Front End

Seguimos mejorando el código para sorteos en WooCommerce, añadiendo nuevas funcionalidades que facilitan la transparencia y gestión de los participantes. Lo mejor de todo en esta serie de códigos para Sorteos es que no modificamos el código original, sino que vamos agregando snippets independientes, manteniendo todo bien organizado y permitiéndote utilizar solo las funcionalidades que necesites.

Hasta ahora, ya llevamos 6 artículos dedicados a sorteos en WooCommerce, en los que hemos desarrollado diferentes mejoras paso a paso. En esta ocasión, vamos a ver cómo mostrar una lista pública de compradores que han adquirido un número para un sorteo o una venta especial.

Con este shortcode, podrás desplegar una tabla dinámica con los datos esenciales de cada participante, sin comprometer su privacidad. Gracias a la integración con wpDataTables, la información se organiza de manera clara y accesible, permitiendo buscar, ordenar y visualizar rápidamente quién ha comprado qué número.

Esta función es ideal para colocar en la descripción del producto, en la barra lateral o en cualquier otra sección de tu web, brindando mayor transparencia y confianza a los participantes.

¿Qué Hace Este Código?

Este código crea un shortcode [lista_participantes product_id="ID"] que muestra una tabla con los participantes que han comprado un producto específico. La tabla contiene:

• Foto del usuario (imagen obtenida de Gravatar, aunque tengo un tutorial sobre cómo permitir a los clientes subir sus propias imágenes).
• Nombre del usuario (sin mostrar datos sensibles como email o nombre y apellidos completos).
• Números asignados en la compra.

Esto es útil para que los clientes puedan verificar qué números han sido comprados y por quién, proporcionando transparencia en sorteos o ventas personalizadas.

¿Cómo Funciona?

1. Obtiene los pedidos completados en WooCommerce.
2. Filtra los productos en cada pedido según la ID del producto proporcionada en el shortcode.
3. Extrae los datos del comprador: nombre de usuario, imagen (Gravatar) y números seleccionados.
4. Organiza los datos en una tabla interactiva utilizando wpDataTables (DataTables CDN).
5. Agrega estilos y scripts necesarios para que la tabla sea dinámica y fácil de navegar.

Uso del Shortcode

Para mostrar la lista de participantes en la página de un producto, en la barra lateral o en cualquier parte de tu web, simplemente usa:

[lista_participantes product_id="123"]
Lenguaje del código: JSON / JSON con comentarios (json)

(reemplazando 123 con la ID del producto correspondiente).

¿Cómo Obtener la ID de un Producto en WooCommerce?

Si no sabes cómo encontrar la ID del producto, puedes obtenerla de manera sencilla siguiendo estos pasos:

1. Ve a Productos > Todos los productos en el panel de administración de WordPress.
2. Busca el producto del cual quieres obtener la ID.
3. Pasa el cursor sobre el nombre del producto y verás un pequeño número en gris (por ejemplo, ID: 123).
4. Copia ese número y úsalo en el shortcode.

Con esto, podrás asegurarte de que el shortcode muestre la lista de participantes del producto correcto sin problemas.

Beneficios de wpDataTables (DataTables CDN)

La implementación de wpDataTables mejora la experiencia del usuario, ya que permite:

• Búsqueda en tiempo real.
• Ordenar por nombre o número asignado.
• Diseño responsive y moderno.

Este shortcode es una excelente solución si usas mi código de Sorteos para WooCommerce y necesitas mostrar de forma clara y transparente los participantes de un sorteo o venta con números asignados. Con un simple shortcode y la potencia de wpDataTables, los clientes pueden ver en tiempo real quién ha comprado qué número, sin necesidad de realizar consultas manuales. Además, la imagen del usuario se obtiene de Gravatar, pero si deseas permitir que los clientes suban sus propias imágenes, tengo un tutorial disponible para guiarte en su implementación.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS. También puedes crear tu propio plugin con unos simples pasos.