🔐 Mejorando el Código de Sorteos con Descarga de Boletos

Desde que publiqué el código de sorteos para Woocommerce, he recibido varios comentarios y peticiones de los usuarios que lo han estado utilizando. Me alegra ver que ha tenido tanto éxito, y por eso, he decidido mejorar y ampliar la funcionalidad en la zona premium sin tocar el código original. Vamos a hacerlo agregando funciones separadas en snippets de código diferentes, lo que nos permitirá modularizar mejor cada mejora.

• Si tienes alguna sugerencia o idea, déjala en los comentarios y la consideraré para futuras actualizaciones.

Qué hace este nuevo código

Este nuevo snippet agrega la funcionalidad de mostrar los boletos con los números seleccionados directamente en la página de pedidos de WooCommerce. Además, permite a los usuarios descargar sus boletos personalizados con su número impreso sobre la imagen del boleto.

Funciones principales:

1. Mostrar los boletos en la página de pedidos:
   • Recupera los números seleccionados del pedido.
   • Genera una imagen de boleto por cada número seleccionado.
   • Muestra los boletos con los números en la interfaz del usuario.
   • Agrega un botón para descargar cada boleto individualmente.
2. Descargar boletos personalizados:
   • Usa un script en JavaScript para generar una imagen con el número impreso.
   • Descarga la imagen como un archivo PNG.

Personalización del código

Si quieres cambiar la plantilla del boleto, solo tienes que subir una nueva imagen a tu biblioteca de medios y reemplazar la URL en el código donde aparece:

<img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2025/02/loteria.png" class="boleto-imagen" style="width: 100%; height: auto;">
Lenguaje del código: JavaScript (javascript)

Asegúrate de copiar la URL correcta de tu imagen y pegarla en el lugar correspondiente.

Ajustar la posición de los números

Dependiendo del diseño de tu boleto, es posible que necesites ajustar la posición de los números tanto en la visualización dentro del pedido como en la imagen generada para la descarga. Estos valores los puedes modificar dentro del código:

Para la visualización en la página de pedidos:

<div class="boleto-numeros" style="position: absolute; top: 20%; left: 60%; transform: translate(-50%, -50%); font-size: 24px; font-weight: bold; color: #020202; background: rgba(255,255,255,0.9); padding: 10px 20px; border-radius: 5px; text-align: center;">
Lenguaje del código: JavaScript (javascript)

Puedes modificar top, left, y transform según donde quieras posicionar el número en la imagen.

Para la imagen descargada:

const xPos = canvas.width / 2; // Ajusta la posición horizontalmente
const yPos = canvas.height * 0.4; // Ajusta la posición verticalmente
ctx.font = `${canvas.height * 0.09}px Arial`; // Tamaño del texto según el canvas
ctx.fillText(numero, xPos, yPos);
Lenguaje del código: JavaScript (javascript)

Modifica xPos y yPos para mover el número en la imagen según sea necesario.

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.