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.

flash

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:

table_flashPor 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.

dash

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

Autor
Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (7 votos, promedio: 5,00 de 5)
Cargando…
Comparte en las redes sociales

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre