Carrito de compras con ajax

Actualizado el domingo, 19 junio, 2016

En este post aprenderemos como crear un carrito de compras para que puedas crear tu propia tienda virtual. Almacenaremos los productos en una base de datos MySQL, y con PHP veremos los productos que tenemos en nuestra tienda. Usaremos la librería simpletip.

Creamos una base de datos y la llamaremos carrito:

CREATE TABLE IF NOT EXISTS `carrito` (
`id` int(6) NOT NULL,
  `img` varchar(32) COLLATE utf8_unicode_ci NOT NULL DEFAULT '',
  `name` varchar(64) COLLATE utf8_unicode_ci NOT NULL DEFAULT '',
  `description` text COLLATE utf8_unicode_ci NOT NULL,
  `price` double NOT NULL DEFAULT '0'
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=7 ;

--
-- Volcado de datos para la tabla `carrito`
--

INSERT INTO `carrito` (`id`, `img`, `name`, `description`, `price`) VALUES
(1, 'guayaba.jpg', 'Guayaba', 'Guayaba canastilla', 1500),
(2, 'cebolla.jpg', 'Cebolla', 'Bulto Cebolla', 50000),
(3, 'tomate.jpg', 'Tomate', 'Tomate Chonto', 30000),
(4, 'Maiz.jpg', 'maiz cascara', 'maiz en cereal', 20000),
(5, 'lechuga.jpg', 'Lechuga', 'Lechuga Fresca', 2500);

--
-- Índices para tablas volcadas
--

--
-- Indices de la tabla `carrito`
--
ALTER TABLE `carrito`
 ADD PRIMARY KEY (`id`), ADD UNIQUE KEY `img` (`img`);

--
-- AUTO_INCREMENT de las tablas volcadas
--

--
-- AUTO_INCREMENT de la tabla `carrito`
--
ALTER TABLE `carrito`
MODIFY `id` int(6) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=7;

Creamos el index.php:

<?php
define('INCLUDE_CHECK',1);
require "connect.php";
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>carrito compras php mysql css ajax | markapp</title>

<link rel="stylesheet" type="text/css" href="estilos.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>

<script type="text/javascript" src="simpletip/jquery.simpletip-1.3.1.pack.js"></script>


<script type="text/javascript" src="script.js"></script>

</head>

<body>

<div id="main-container">

	<div class="tutorialzine">
    <h1>Carro de compras con php, mysql, css3 y ajax</h1>
    <br/><br/><br/><br/><br/><br/>
    
    </div>


    <div class="container primero">
    
    	<span class="top-label">
            <span class="label-txt">Canasta</span>
        </span>
        
        <div class="content-area">
    
    		<div class="content drag-desired">
            	
                <?php

				$result = mysql_query("SELECT * FROM carrito");
				while($row=mysql_fetch_assoc($result))
				{
					echo '<div class="product"><img src="img/products/'.$row['img'].'" alt="'.htmlspecialchars($row['name']).'" width="128" height="128" class="pngfix" />
                            <h2>'.$row['name'].'</h2><h2>'.$row['price'].'</h2> 
                    </div>';
				}

				?>
                
                
       	        <div class="clear"></div>
            </div>

        </div>
        
        <div class="bottom-container-border">
        </div>

    </div>



    <div class="container segundo">
    
    	<span class="top-label">
            <span class="label-txt">Compra</span>
        </span>
        
        <div class="content-area">
    
    		<div class="content drop-here">
            	<div id="cart-icon">
	            	<img src="img/Shoppingcart_128x128.png" alt="shopping cart" class="pngfix" width="128" height="128" />
					<img src="img/ajax_load_2.gif" alt="loading.." id="ajax-loader" width="16" height="16" />
                </div>

				<form name="checkoutForm" method="post" action="order.php">
                
                <div id="item-list">
                </div>
                
				</form>                
                <div class="clear"></div>

				<div id="total"></div>

       	        <div class="clear"></div>
                
                <a href="" onclick="document.forms.checkoutForm.submit(); return false;" class="button">Comprar</a>
                
          </div>
        </div>
        <div class="bottom-container-border">
        </div>
    </div>
</div>

</body>
</html>

Ahora crearemos el archivo php de las funciones y lo llamaremos order.php
<?php
define('INCLUDE_CHECK',1);
require "connect.php";
if(!$_POST)
{
	if($_SERVER['HTTP_REFERER'])
	header('Location : '.$_SERVER['HTTP_REFERER']);	
	exit;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>carrito! | markapp</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="simpletip/jquery.simpletip-1.3.1.pack.js.txt"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="main-container">
    <div class="container">  
    	<span class="top-label">
            <span class="label-txt">Factura</span>
        </span>
        <span class="top-label">
            <span class="label-txt"><a href="index.php">Regresar</a></span>
        </span>
        
        <div class="content-area">
    
    		<div class="content">
            	
                <?php
				
				$cnt = array();
				$products = array();
				
				foreach($_POST as $key=>$value)
				{
					$key=(int)str_replace('_cnt','',$key);
				
					$products[]=$key;
					$cnt[$key]=$value;
				}

				$result = mysql_query("SELECT * FROM carrito WHERE id IN(".join($products,',').")");
				
				if(!mysql_num_rows($result))
				{
					echo '<h1>Hay un error en la compra!</h1>';
				}
				else
				{ 
					echo '<h1>Tu Compra:</h1>';
					
					while($row=mysql_fetch_assoc($result))
					{
						echo '<h2>'.$cnt[$row['id']].' x '.$row['name']." = ".$row['price'].'</h2>';
						
						@$total += $cnt[$row['id']]*$row['price'];
					}
		
					echo '<h1>Total: $'.$total.'</h1>';
				}
				?>
       	        <div class="clear"></div>
            </div>
        </div>
        <div class="bottom-container-border">
        </div>
    </div>
</div>
</body>
</html>
El diseño con un estilos.css:


#main-container{
	width:95%;
	margin:20px auto;
}

.container{
	margin-bottom:40px;
}

.top-label{
 	background:white;
	display:inline-block;
 
	position:relative;
	margin-bottom:-15px;
}

.label-txt{
 
	display:inline-block;
	font-size:10px;
	height:36px;
	margin-left:10px;
	padding:12px 15px 0 5px;
	text-transform:uppercase;
}

.content-area{
	background:#fcfcfc;
	padding:15px 20px 0 20px;
}

.content{
	padding:10px;
}

.drag-desired{
	background:url(img/arrastrar.png) no-repeat top right;
	padding:30px;
}

 

.bottom-container-border{
 
	height:14px;
}

.product{
	border:2px solid #F5F5F5;
	float:left;
	margin:15px;
	padding:10px;
	width: 90%
}

.product img{
	cursor:move;
	float: left;
}

p.descr{
	padding:5px 0;
}

small{
	display:block;
	margin-top:4px;
}

.tooltip{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	display: none;

	background-color:#666666;
	border:1px solid #666666;
	color:#fcfcfc;

	padding:10px;
	
	-moz-border-radius:12px;
	-khtml-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius:12px;
}

#cart-icon{
	width:48px;
	float:left;
	position:relative;
}


#ajax-loader{
	position:absolute;
	top:0px;
	left:0px;
	visibility:hidden;
}

#item-list{
float: right;
width: 397px;
	margin-left:20px;
	padding-top:15px;
}

a.remove,a.remove:visited{
	color:red;
	font-size:10px;
	text-transform:uppercase;
}

#total{
	clear:both;
	float:right;
	font-size:10px;
	font-weight:bold;
	padding:10px 12px;
	text-transform:uppercase;
}

#item-list table{
	background-color:#F7F7F7;
	border:1px solid #EFEFEF;
	margin-top:5px;
	padding:4px;
}

a.button,a.button:visited{
	display:none;

	height:29px;
	width:136px;

	padding-top:15px;
	margin:0 auto;
	overflow:hidden;

	color:white;	
	font-size:12px;
	font-weight:bold;
	text-align:center;
	text-transform:uppercase;
	
	background:url(img/button.png) no-repeat center top;
}

a.button:hover{
	background-position:bottom;
	text-decoration:none;
}


a, a:visited {
	color:#00BBFF;
	text-decoration:none;
	outline:none;
}

a:hover{
	text-decoration:underline;
}

h1{
	font-size:28px;
	font-weight:bold;
	font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
}

h2{
	font-weight:normal;
	font-size:20px;
	
	color:#666666;
	text-indent:30px;
	margin:20px 0;
}

.tutorialzine h1{
	color:white;
	margin-bottom:10px;
	font-size:48px;
}

.tutorialzine h3{
	color:#F5F5F5;
	font-size:10px;
	font-weight:bold;
	margin-bottom:30px;
	text-transform:uppercase;
}

.tutorial-info{
	color:white;
	text-align:center;
	padding:10px;
	margin-top:-20px;
}
.primero{
	width: 39%;
	margin-right: 17px;
	display: inline-table;
}
.segundo{
	width: 55%;
	display: inline-table;
}
div.product h2{
 
	display: block;
}

Le aplicamos algunos javascript que nos genere animaciones, creamos un archivo script.js:

var purchased=new Array();
var totalprice=0;

$(document).ready(function(){
	
	$('.product').simpletip({
		
		offset:[40,0],
		content:'<img src="img/ajax_load.gif" alt="loading" style="margin:10px;" />',
		onShow: function(){
			
			var param = this.getParent().find('img').attr('src');
			
			if($.browser.msie && $.browser.version=='6.0')
			{
				param = this.getParent().find('img').attr('style').match(/src="([^"]+)"/);
				param = param[1];
			}
			
			this.load('ajax/tips.php',{img:param}); 
		} 

	});
	
	$(".product img").draggable({
	
	containment: 'document',
	opacity: 0.6,
	revert: 'invalid',
	helper: 'clone',
	zIndex: 100
	
	});

	$("div.content.drop-here").droppable({
	
			drop:
					function(e, ui)
					{
						var param = $(ui.draggable).attr('src');
						
						if($.browser.msie && $.browser.version=='6.0')
						{
							param = $(ui.draggable).attr('style').match(/src="([^"]+)"/);
							param = param[1];
						}

						addlist(param);
					}
	
	});
	
});


function addlist(param)
{
	$.ajax({
	type: "POST",
	url: "ajax/addtocart.php",
	data: 'img='+encodeURIComponent(param),
	dataType: 'json',
	beforeSend: function(x){$('#ajax-loader').css('visibility','visible');},
	success: function(msg){
		
		$('#ajax-loader').css('visibility','hidden');
		if(parseInt(msg.status)!=1)
		{
			return false;
		}
		else
		{
			var check=false;
			var cnt = false;
			
			for(var i=0; i<purchased.length;i++)
			{
				if(purchased[i].id==msg.id)
				{
					check=true;
					cnt=purchased[i].cnt;
					
					break;
				}
			}
			
			if(!cnt)
				$('#item-list').append(msg.txt);
				
			if(!check)
			{
				purchased.push({id:msg.id,cnt:1,price:msg.price});
			}
			else
			{
				if(cnt>=3) return false;
				
				purchased[i].cnt++;
				$('#'+msg.id+'_cnt').val(purchased[i].cnt);
			}
			
			totalprice+=msg.price;
			update_total();

		}
		
		$('.tooltip').hide();
	
	}
	});
}

function findpos(id)
{
	for(var i=0; i<purchased.length;i++)
	{
		if(purchased[i].id==id)
			return i;
	}
	
	return false;
}

function remove(id)
{
	var i=findpos(id);

	totalprice-=purchased[i].price*purchased[i].cnt;
	purchased[i].cnt = 0;

	$('#table_'+id).remove();
	update_total();
}

function change(id)
{
	var i=findpos(id);
	
	totalprice+=(parseInt($('#'+id+'_cnt').val())-purchased[i].cnt)*purchased[i].price;
	
	purchased[i].cnt=parseInt($('#'+id+'_cnt').val());
	update_total();
}

function update_total()
{
	if(totalprice)
	{
		$('#total').html('total: $'+totalprice);
		$('a.button').css('display','block');
	}
	else
	{
		$('#total').html('');
		$('a.button').hide();
	}
}

 

Una respuesta

  1. Claudio
    30/10/2015

Agregar comentario