Cómo Anunciar Ofertas con Tiempo Limitado, en tu Página Web o Tienda Online con Bricks Builder

Guía para Implementar Ofertas Temporales en tu Tienda Online usando Código JavaScript y Bricks Builder en WordPress

Las ofertas y promociones son herramientas esenciales para atraer y retener clientes en una Tienda Online. En este artículo, te enseñaremos cómo implementar ofertas temporales en tu Web o Tienda Online creada con WordPress y el constructor Bricks Builder, utilizando un sencillo script en JavaScript.

Preparar el Entorno

Antes de comenzar, asegúrate de tener instalado WordPress y Bricks Builder en tu sitio web. Si aún no tienes Bricks Builder, puedes adquirirlo e instalarlo desde la Caja de Experiencia.

Código JavaScript Necesario

A continuación, te presentamos el código completo JavaScript que utilizaremos para mostrar las ofertas y la duración de las mismas:

<script>
        document.addEventListener("DOMContentLoaded", function() {
            const offerDuration = 15; // duración de la oferta en días
            const startDate = new Date('2024-07-30'); // Fecha de inicio de la oferta (formato: YYYY-MM-DD)

            // Obtener la fecha actual
            const today = new Date();
            const diffTime = Math.abs(today - startDate);
            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

            let offerText;

            // Calcular los días restantes
            let remainingDays = offerDuration - diffDays;

            if (remainingDays <= 0) {
                // Si la oferta ha terminado, mostrar "Precio en OFERTA"
                offerText = "Precio en OFERTA";
            } else {
                // Si la oferta está activa, mostrar los días restantes
                offerText = remainingDays > 1 ? `La oferta termina en ${remainingDays} días` : `La oferta termina en 1 día`;
            }

            // Actualizar los textos de oferta
            document.getElementById('NOMBRE_CONTENEDOR').textContent = offerText;
        });
</script>

Entender el Código

• Configuración de la Duración y Fecha de Inicio de la Oferta:

const offerDuration = 15; // duración de la oferta en días
const startDate = new Date('2024-07-30'); // Fecha de inicio de la oferta

Aquí definimos la duración de la oferta en días y la fecha de inicio en formato YYYY-MM-DD.

• Actualizar el Texto de la Oferta:

if (remainingDays <= 0) {
                // Si la oferta ha terminado, mostrar "Precio en OFERTA"
                offerText = "Precio en OFERTA";
            } else {
                // Si la oferta está activa, mostrar los días restantes
                offerText = remainingDays > 1 ? `La oferta termina en ${remainingDays} días` : `La oferta termina en 1 día`;
            }

Dependiendo de si la oferta ha terminado o no, mostramos el texto adecuado. Si la oferta sigue activa, mostramos los días restantes.

• Añade un Contenedor para el Texto de la Oferta:

document.getElementById('NOMBRE_CONTENEDOR').textContent = offerText;

Inserta un elemento de texto y asigna el ID NOMBRE_CONTENEDOR.

Vídeo Explicativo

En el siguiente vídeo podrás ver cómo se implementa el código de las ofertas temporales con Bricks builder. No te lo pierdas.

Conclusión

Implementar ofertas y promociones temporales en tu página Web o tienda online puede aumentar significativamente tus ventas. Con este sencillo código JavaScript, puedes mostrar ofertas dinámicamente en tu sitio web WordPress utilizando Bricks Builder.