![\"flash\"](\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/03\/flash.jpg\")
<\/a><\/p>\nExiste varios plugins para crear cuentas atr\u00e1s como por ejemplo Countdown Dashboard<\/a> o jQuery Countdown.<\/p>\n En este art\u00edculo vamos a emplear el plugin jQuery Countdown por el simple hecho de que es mucho m\u00e1s sencillo dinamizarlo, darle un estilo personalzado y emplear ajax para controlar el fin de la oferta.<\/p>\n El plugin Countdown Dashoboard est\u00e1 muy bien implementado pero le faltan m\u00e1s posibilidades de personalizaci\u00f3n de la cuenta atr\u00e1s y el poder controlar el fin de la cuenta mediante ajax en una lista din\u00e1mica.<\/p>\n El plugin jQuery Countdown lo puedes descargar de aqu\u00ed adem\u00e1s de poder ver sus posibilidades.<\/p>\n Para incluirlo en tu p\u00e1gina Web tan solo debes incluir la librer\u00eda jQuery, el plugin y los estilos necesarios (archivos incluidos en la descarga de jQuery Countdown), adem\u00e1s de la configuraci\u00f3n del idioma deseado. El plugin conlleva un sin fin de archivos de idioma, en este caso cogeremos el de espa\u00f1ol.<\/p>\n En el ejemplo en funcionamiento, las ofertas estar\u00e1n guardadas en una tabla extra en la base de datos asociada a los productos, en el caso de ejemplo tendremos algo como lo siguiente:<\/p>\n Por lo tanto, ser\u00e1 necesario conectar con la base de datos, por ejemplo de la siguiente forma:<\/p>\n La conexi\u00f3n a la base de datos deber\u00e1 hacerse antes de la consulta de las ofertas flash disponibles que las mostraremos con el siguiente c\u00f3digo:<\/p>\n Tendremos un contenedor donde depositaremos los productos que est\u00e1n en oferta flash. Lo primero que hacemos es construir la query que nos retornar\u00e1 los productos que est\u00e1n en oferta flash, hacemos un bucle recorriendo los registros y descomponemos la fecha de fin o expiraci\u00f3n para poderla adaptar a la entrada del jQuery Countdown Plugin.<\/p>\n Por cada producto, estamos mostrando el nombre, el precio real, el precio rebajado y el tiempo que falta para que expire la oferta.<\/p>\n En la construcci\u00f3n de nuestra llamada al plugin jQuery Countdown lo que hacemos es rellenar el par\u00e1metro \u00abdate_end\u00bb con las fecha de fin que hay en la base de datos de cada producto.<\/p>\n Tambi\u00e9n le estamos indicando al plugin que queremos que el formato de visualizaci\u00f3n de la cuenta atr\u00e1s muestre solo horas, minutos y segundos.<\/p>\n Y finalmente, la parte que veo m\u00e1s interesante del asunto es la configuraci\u00f3n del par\u00e1metro \u00abonExpiry\u00bb donde lo que hacemos es asociarle una funci\u00f3n que se encarga de eliminar la oferta flash de la tabla de ofertas flash de la base de datos mediante la t\u00e9cnica AJAX.<\/p>\n El archivo delete_flash.php que estamos llamando dentro del AJAX tan solo elimina la oferta que ha expirado.<\/p>\n Como puedes observar, estamos recuperando el id de la oferta que se tiene que borrar mediante el m\u00e9todo POST, realizamos la eliminaci\u00f3n 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.<\/p>\n<link type=\"text\/css\" href=\"css\/jquery.countdown.css\" rel=\"stylesheet\" \/>\r\n<style type=\"text\/css\">\r\n.defaultCountdown { width: 240px; height: 45px; float:left; }\r\n<\/style>\r\n<script language=\"Javascript\" type=\"text\/javascript\" src=\"..\/jquery.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"js\/jquery.countdown.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"js\/jquery.countdown-es.js\"><\/script><\/pre>\n<\/a><\/p>\n<?php\r\n$conexion = mysql_connect(\"localhost\", \"USUARIO\", \"CONTRASE\u00d1A\");\r\nmysql_select_db(\"NOMBRE_BD\", $conexion);\r\n?><\/pre>\n
<div id=\"products\">\r\n\u00a0\u00a0 \u00a0<?php\r\n\u00a0\u00a0\u00a0 $query_offers = 'SELECT id_flash_offer, id_product, fo.price as offer, fin, p.price, name\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 FROM flash_offers fo\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 LEFT JOIN products p on (p.products_id = fo.id_product)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ORDER BY fin asc';\r\n\u00a0\u00a0\u00a0 $offers = mysql_query($query_offers, $conexion);\r\n\r\n\u00a0\u00a0\u00a0 while ($row = mysql_fetch_array($offers)) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $partes = explode(' ', $row['fin']);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $fecha = $partes[0];\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $hora = $partes[1];\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $partes_fecha = explode('-', $fecha);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $partes_hora = explode(':', $hora);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ?>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div id=\"fash_<?php echo $row['id_flash_offer']; ?>\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <h2><?php echo $row['name']; ?><\/h2>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <span style=\"text-decoration:line-through; color:#FF0000;\"><?php echo $row['price']; ?> \u20ac<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <span style=\"font-weight:bold;\"> <?php echo $row['offer']; ?> \u20ac<\/span><br\/><br\/>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div id=\"defaultCountdown<?php echo $row['id_flash_offer']; ?>\" data=\"<?php echo $row['id_flash_offer']; ?>\"><\/div>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <script language=\"javascript\" type=\"text\/javascript\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(function () {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var austDay = new Date();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var id = <?php echo $row['id_flash_offer']; ?>;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 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]; ?>);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('#defaultCountdown<?php echo $row['id_flash_offer']; ?>').countdown({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 until: date_end, \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 format: 'HMS',\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 onExpiry: endCountdown<?php echo $row['id_flash_offer']; ?>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 function endCountdown<?php echo $row['id_flash_offer']; ?>() { \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var parent = $('#defaultCountdown'+id).parent().attr('id');\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var dataString = 'flash_id='+id;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $.ajax({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 type: \"POST\",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 url: \"delete_flash.php\",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 data: dataString,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 success: function(data) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var product = $('#defaultCountdown'+data).parent().attr('id');\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('#'+parent).slideUp();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/script>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\u00a0\u00a0\u00a0 <?php\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 ?>\r\n<\/div><\/pre>\n<\/a><\/p>\n<?php\r\n$conexion = mysql_connect(\"localhost\", \"USUARIO\", \"CONTRASE\u00d1A\");\r\nmysql_select_db(\"NOMBRE_BD\", $conexion);\r\n\r\n$flash_id = $_POST['flash_id'];\r\n\r\n$delete = 'DELETE FROM `flash_offers` WHERE `id_flash_offer`='.$flash_id;\r\nmysql_query($delete, $conexion);\r\n\r\necho $flash_id;\r\n?><\/pre>\n