Copiar Códigos de Cupón al Portapapeles con un Botón y una Imagen Clickeables en WordPress

Si deseas ofrecer una experiencia de usuario más interactiva y facilitar la copia de códigos de descuento o cupones, puedes usar este código en tu sitio web de WordPress para permitir que los usuarios copien un texto (como un código de cupón) tanto al hacer clic en un botón como en una imagen. Este artículo te explica cómo integrar ambas funcionalidades en tu sitio.

Table of Contents

¿Por qué usar esta funcionalidad?

Esta funcionalidad es perfecta para tiendas online, sitios de promociones o plataformas de cupones donde los usuarios necesitan copiar códigos de descuento de manera rápida y sin complicaciones. Usando solo un clic, los visitantes pueden copiar el texto al portapapeles, mejorando la experiencia de compra y aumentando la interacción con tus promociones.

Explicación del Código:

El siguiente código integra dos formas de copiar un código de cupón al portapapeles: una imagen clickeable y un botón. Cuando el usuario hace clic en cualquiera de estos elementos, el código de cupón se copia automáticamente al portapapeles.

function boton_copiar_texto_shortcode() {
    ob_start(); ?>
    <button id="boton-copiar" style="padding: 10px 20px; background-color: #000; color: #fff; border: none; border-radius: 5px; cursor: pointer; font-size: 16px;">CUPÓN BLACK15</button>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const boton = document.getElementById("boton-copiar");
            boton.addEventListener("click", function() {
                const texto = "BLACK15"; // Texto que se copia al portapapeles
                navigator.clipboard.writeText(texto).then(() => {
                    alert("¡Código copiado al portapapeles!");
                }).catch(err => {
                    console.error("Error al copiar el texto: ", err);
                });
            });
        });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('boton_copiar', 'boton_copiar_texto_shortcode');

function imagen_copiar_texto_shortcode() {
    ob_start(); ?>
    <div style="cursor: pointer; display: inline-block;">
        <img id="imagen-copiar" src="https://karolmina.es/wp-content/uploads/BLACK15.jpg" alt="Cupón BLACK15" style="max-width: 100%; height: auto;">
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const imagen = document.getElementById("imagen-copiar");
            imagen.addEventListener("click", function() {
                const texto = "BLACK15"; // Texto que se copia al portapapeles
                navigator.clipboard.writeText(texto).then(() => {
                    alert("¡Código copiado al portapapeles!");
                }).catch(err => {
                    console.error("Error al copiar el texto: ", err);
                });
            });
        });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('imagen_copiar', 'imagen_copiar_texto_shortcode');

¿Cómo Funciona el Código?

Definición del Shortcode:
- Este código define una función boton_copiar_texto_shortcode que se utiliza como un shortcode de WordPress.
- La función genera un botón y una imagen que son clickeables.

Puedes meter este html mediante el plugin de Popup-box para que aparezcan en varias paginas de tu woocommerce:

<h3>¡Haz clic para copiar tu cupón!</h3>
[boton_copiar]

Botón de Copiar:
- Se crea un botón de estilo sencillo con el texto "CUPÓN BLACK15".
- Al hacer clic en este botón, se ejecuta un código JavaScript que utiliza la API navigator.clipboard.writeText() para copiar el código "BLACK15" al portapapeles.
- Si el proceso es exitoso, se muestra una alerta que informa al usuario que el código ha sido copiado.
Imagen Clickeable:
- Similar al botón, se incluye una imagen que también tiene el cursor: pointer; para indicar que es interactiva.
- Al hacer clic en la imagen, se ejecuta el mismo código JavaScript que copia el texto "BLACK15" al portapapeles.
- También se muestra una alerta informando que el código ha sido copiado correctamente.
Registro del Shortcode:
- El shortcode [boton_imagen_copiar] se registra en WordPress, lo que permite insertarlo en cualquier página o entrada de tu sitio.
- Este shortcode generará tanto el botón como la imagen en el lugar donde se inserte.

Implementación:

Para usar este código en tu sitio web de WordPress:

Paso 1: Abre el archivo functions.php de tu tema o crea un plugin personalizado.
Paso 2: Copia y pega el código proporcionado en el archivo.
Paso 3: Guarda el archivo.
Paso 4: Usa el shortcode [boton_imagen_copiar] en cualquier página o entrada donde desees mostrar el botón y la imagen clickeables.

Conclusión:

Este código es una forma fácil y efectiva de mejorar la interacción del usuario en tu sitio web, permitiendo a los visitantes copiar un código de cupón con solo hacer clic en una imagen o un botón. Implementarlo en tu tienda online o sitio de promociones hará que tus usuarios puedan acceder rápidamente a las ofertas sin complicaciones. ¡Aprovecha esta herramienta para aumentar la participación y facilitar la experiencia de compra!