Ofertas Flash con PHP, jQuery Countdown y Ajax

Muchas empresas aprovechan el recurso de las ofertas flash para vender rápidamente un producto o reducir considerablemente el stock ofreciendo a los clientes el producto a un precio rebajado y con un temporizador o cuenta atrás con el objetivo de indicar a los usuarios que esa oferta va a estar vigente hasta que finalice la cuenta atrás.

Existe varios plugins para crear cuentas atrás como por ejemplo Countdown Dashboard o jQuery Countdown.

En este artículo vamos a emplear el plugin jQuery Countdown por el simple hecho de que es mucho más sencillo dinamizarlo, darle un estilo personalzado y emplear ajax para controlar el fin de la oferta.

El plugin Countdown Dashoboard está muy bien implementado pero le faltan más posibilidades de personalización de la cuenta atrás y el poder controlar el fin de la cuenta mediante ajax en una lista dinámica.

El plugin jQuery Countdown lo puedes descargar de aquí además de poder ver sus posibilidades.

Para incluirlo en tu página Web tan solo debes incluir la librería jQuery, el plugin y los estilos necesarios (archivos incluidos en la descarga de jQuery Countdown), además de la configuración del idioma deseado. El plugin conlleva un sin fin de archivos de idioma, en este caso cogeremos el de español.

<link type="text/css" href="css/jquery.countdown.css" rel="stylesheet" />
<style type="text/css">
.defaultCountdown { width: 240px; height: 45px; float:left; }
</style>
<script language="Javascript" type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<script type="text/javascript" src="js/jquery.countdown-es.js"></script>

En el ejemplo en funcionamiento, las ofertas estarán guardadas en una tabla extra en la base de datos asociada a los productos, en el caso de ejemplo tendremos algo como lo siguiente:

Por lo tanto, será necesario conectar con la base de datos, por ejemplo de la siguiente forma:

<?php
$conexion = mysql_connect("localhost", "USUARIO", "CONTRASEÑA");
mysql_select_db("NOMBRE_BD", $conexion);
?>

La conexión a la base de datos deberá hacerse antes de la consulta de las ofertas flash disponibles que las mostraremos con el siguiente código:

<div id="products">
    <?php
    $query_offers = 'SELECT id_flash_offer, id_product, fo.price as offer, fin, p.price, name
                        FROM flash_offers fo
                        LEFT JOIN products p on (p.products_id = fo.id_product)
                        ORDER BY fin asc';
    $offers = mysql_query($query_offers, $conexion);

    while ($row = mysql_fetch_array($offers)) {
        $partes = explode(' ', $row['fin']);
        $fecha = $partes[0];
        $hora = $partes[1];
        $partes_fecha = explode('-', $fecha);
        $partes_hora = explode(':', $hora);
       ?>
        <div id="fash_<?php echo $row['id_flash_offer']; ?>">
            <h2><?php echo $row['name']; ?></h2>
            <span style="text-decoration:line-through; color:#FF0000;"><?php echo $row['price']; ?> €</span>
            <span style="font-weight:bold;"> <?php echo $row['offer']; ?> €</span><br/><br/>
            <div id="defaultCountdown<?php echo $row['id_flash_offer']; ?>" data="<?php echo $row['id_flash_offer']; ?>"></div>
        <script language="javascript" type="text/javascript">
        $(function () {
            var austDay = new Date();
            var id = <?php echo $row['id_flash_offer']; ?>;
            date_end = new Date(<?php echo $partes_fecha[0]; ?>, <?php echo $partes_fecha[1]; ?> - 1, <?php echo $partes_fecha[2]; ?>, <?php echo $partes_hora[0]; ?>, <?php echo $partes_hora[1]; ?>, <?php echo $partes_hora[2]; ?>);
            $('#defaultCountdown<?php echo $row['id_flash_offer']; ?>').countdown({
                until: date_end, 
                format: 'HMS',
                onExpiry: endCountdown<?php echo $row['id_flash_offer']; ?>
            });

            function endCountdown<?php echo $row['id_flash_offer']; ?>() {  
                var parent = $('#defaultCountdown'+id).parent().attr('id');
                var dataString = 'flash_id='+id;
                $.ajax({
                    type: "POST",
                    url: "delete_flash.php",
                    data: dataString,
                    success: function(data) {
                        var product = $('#defaultCountdown'+data).parent().attr('id');
                        $('#'+parent).slideUp();
                    }
                });
            }
        });
        </script>
        </div>
    <?php
    }
    ?>
</div>

Tendremos un contenedor donde depositaremos los productos que están en oferta flash. Lo primero que hacemos es construir la query que nos retornará los productos que están en oferta flash, hacemos un bucle recorriendo los registros y descomponemos la fecha de fin o expiración para poderla adaptar a la entrada del jQuery Countdown Plugin.

Por cada producto, estamos mostrando el nombre, el precio real, el precio rebajado y el tiempo que falta para que expire la oferta.

En la construcción de nuestra llamada al plugin jQuery Countdown lo que hacemos es rellenar el parámetro «date_end» con las fecha de fin que hay en la base de datos de cada producto.

También le estamos indicando al plugin que queremos que el formato de visualización de la cuenta atrás muestre solo horas, minutos y segundos.

Y finalmente, la parte que veo más interesante del asunto es la configuración del parámetro «onExpiry» donde lo que hacemos es asociarle una función que se encarga de eliminar la oferta flash de la tabla de ofertas flash de la base de datos mediante la técnica AJAX.

El archivo delete_flash.php que estamos llamando dentro del AJAX tan solo elimina la oferta que ha expirado.

<?php
$conexion = mysql_connect("localhost", "USUARIO", "CONTRASEÑA");
mysql_select_db("NOMBRE_BD", $conexion);

$flash_id = $_POST['flash_id'];

$delete = 'DELETE FROM `flash_offers` WHERE `id_flash_offer`='.$flash_id;
mysql_query($delete, $conexion);

echo $flash_id;
?>

Como puedes observar, estamos recuperando el id de la oferta que se tiene que borrar mediante el método POST, realizamos la eliminación de la base de datos y retornamos el id borrado para aplicar el efecto de slideUp sobre el contenedor de la oferta que ha expirado. Este efecto del que hablo es que cuando se finaliza una oferta es que el producto desaparece con el efecto slideUp.

Ver ejemplo en funcionamiento

Ver módulo para Prestashop