Ofertas flash con PHP, jQuery Dashboard 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.

En este artículo vamos a ver un ejemplo simple de las ofertas flash empleando PHP, el plugin jQuery Countdown Dashboard y Ajax.

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 Dashboard):

<link rel="Stylesheet" type="text/css" href="css/styles.css"></link>
<script language="Javascript" type="text/javascript" src="../jquery.js"></script>
<script language="Javascript" type="text/javascript" src="js/jquery.lwtCountdown-1.0.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 TU_TABLA_OFERTAS 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 class="product">
        <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="countdown_<?php echo $row['id_flash_offer']; ?>" data="<?php echo $row['id_flash_offer']; ?>">
            <div class="dash weeks_dash">
                <span class="dash_title">semanas</span>
                <div class="digit" style="margin-left:35px;">0</div>
                <div class="digit">0</div>
            </div>

            <div class="dash weeks_dash">
                <span class="dash_title">dias</span>
                <div class="digit" style="margin-left:35px;">0</div>
                <div class="digit">0</div>
            </div>

            <div class="dash weeks_dash">
                <span class="dash_title">horas</span>
                <div class="digit" style="margin-left:35px;">0</div>
                <div class="digit">0</div>
            </div>

            <div class="dash weeks_dash">
                <span class="dash_title">minutos</span>
                <div class="digit" style="margin-left:35px;">0</div>
                <div class="digit">0</div>
            </div>

            <div class="dash weeks_dash">
                <span class="dash_title">segundos</span>
                <div class="digit" style="margin-left:35px;">0</div>
                <div class="digit">0</div>
            </div>
        </div>
    <script language="javascript" type="text/javascript">
    jQuery(document).ready(function() {
        $('#countdown_<?php echo $row['id_flash_offer']; ?>').countDown({
            targetDate: {
                'day': <?php echo $partes_fecha[2]; ?>,
                'month': <?php echo $partes_fecha[1]; ?>,
                'year': <?php echo $partes_fecha[0]; ?>,
                'hour': <?php echo $partes_hora[0]; ?>,
                'min': <?php echo $partes_hora[1]; ?>,
                'sec': <?php echo $partes_hora[2]; ?>
            },
            /*omitWeeks: true,
            omitDays: true,*/
            onComplete: function() {  
                dataString = 'flash_id='+$(this).attr('data');
                alert(dataString);
                $.ajax({
                    type: "POST",
                    url: "delete_flash.php",
                    data: dataString,
                    success: function(data) {
                        alert('Toca eliminar #countdown_'+data);
                        $('#countdown_'+data).slideUp();
                    }
                });            
            }
        });
    });            
    </script>
    </div>
<?php
}
?>

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 Dashboard Plugin.

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

Además, cuando una oferta llega a su fin se ejecuta un código jQuery-Ajax en el que se procede a eliminar la oferta flash que finaliza y esconderla mediante slideUp().

Ver el ejemplo en funcionamiento