php ajax拖动购物车源码
以前我们的购物车都是点击打开网页，都是web 2.0形式的，本文章提供这款php教程 ajax拖动购物车http://www.phprm.com，可以拖动商品放在购物车里面，这样更好的适合用户习惯了。
*/
//download by http://www.phprm.com
/* database config */
$db_host = 'localhost';
$db_user = 'root';
$db_pass = 'dcfan2006';
$db_database = 'test';
$link = mysql教程_connect($db_host,$db_user,$db_pass) or die('unable to establish a db connection');
mysql_select_db($db_database,$link);
mysql_query("set names utf8");
?>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.phprm.com/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>php ajax拖动购物车源码</title>
<script type="text/网页特效" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script>
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();
}
}
</script>
<style>
body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{
margin:0px;
padding:0px;
font-family:arial, helvetica, sans-serif;
}
body{
color:#555555;
font-size:13px;
background-color:#282828;
}
.clear{
clear:both;
}
#main-container{
width:700px;
margin:20px auto;
}
.container{
margin-bottom:40px;
}
.top-label{
background:url(http://pic4.phprm.com/2010/11/05/label_bg.jpg) no-repeat;
display:inline-block;
margin-left:20px;
position:relative;
margin-bottom:-15px;
}
.label-txt{
background:url(http://pic4.phprm.com/2010/11/05/label_bg.jpg) no-repeat top right;
display:inline-block;
font-size:10px;
height:36px;
margin-left:10px;
padding:12px 15px 0 5px;
text-transform:uppercase;
}
.content-area{
background:url(http://pic4.phprm.com/2010/11/05/container_top.jpg) no-repeat #fcfcfc;
padding:15px 20px 0 20px;
}
.content{
padding:10px;
}
.drag-desired{
background:url(http://pic4.phprm.com/2010/11/05/drag_desired_label.jpg) no-repeat top right;
padding:30px;
}
.drop-here{
background:url(http://pic4.phprm.com/2010/11/05/drop_here_label.jpg) no-repeat top right;
}
.bottom-container-border{
background:url(http://pic4.phprm.com/2010/11/05/container_bottom.jpg) no-repeat;
height:14px;
}
.product{
border:2px solid #f5f5f5;
float:left;
margin:15px;
padding:10px;
}
.product img{
cursor:move;
}
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:128px;
float:left;
position:relative;
}
#ajax-loader{
position:absolute;
top:0px;
left:0px;
visibility:hidden;
}
#item-list{
float:left;
width:490px;
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(http://pic4.phprm.com/2010/11/05/button.jpg) 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;
}
</style>
<!--[if lt ie 7]>
<style type="text/css">
.pngfix { behavior: url(http://pic4.phprm.com/2010/11/05/iepngfix.jpg);}
.tooltip{width:200px;};
</style>
<![endif]-->
</head>
<body>
<div id="main-container">
<div class="tutorialzine">
<h1>shopping cart</h1>
<h3>the best products at the best prices</h3>
</div>
<div class="container">
<span class="top-label">
<span class="label-txt">products</span>
</span>
<div class="content-area">
<div class="content drag-desired">
<?php
$result = mysql_query("select * from internet_shop");
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" /></div>';
}
?>
<div class="clear"></div>
</div>
</div>
<div class="bottom-container-border">
</div>
</div>
<div class="container">
<span class="top-label">
<span class="label-txt">shopping cart</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">checkout</a>
</div>
</div>
<div class="bottom-container-border">
</div>
</div>
</div>
</body>
</html>
tips.php
<?php
if(!$_post['img']) die("there is no such product!");
$img=mysql_real_escape_string(end(explode('/',$_post['img'])));
$row=mysql_fetch_assoc(mysql_query("select * from internet_shop where img='".$img."'"));
if(!$row) die("there is no such product!");
echo '<strong>'.$row['name'].'</strong>
<p class="descr">'.$row['description'].'</p>
<strong>price: $'.$row['price'].'</strong>
<small>drag it to your shopping cart to purchase it</small>';
?>
addtocard.php加入购物车
<?php
define('include_check',1);
require "../connect.php";
if(!$_post['img']) die("there is no such product!");
$img=mysql_real_escape_string(end(explode('/',$_post['img'])));
$row=mysql_fetch_assoc(mysql_query("select * from internet_shop where img='".$img."'"));
echo '{status:1,id:'.$row['id'].',price:'.$row['price'].',txt:'
<table width="100%" id="table_'.$row['id'].'">
<tr>
<td width="60%">'.$row['name'].'</td>
<td width="10%">$'.$row['price'].'</td>
<td width="15%"><select name="'.$row['id'].'_cnt" id="'.$row['id'].'_cnt" onchange="change('.$row['id'].');">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option></slect>
</td>
<td width="15%"><a href="#" onclick="remove('.$row['id'].');return false;" class="remove">remove</a></td>
</tr>
</table>'}';
?>
查看购物车页面
<div id="main-container">
<div class="container">
<span class="top-label">
<span class="label-txt">your order</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 internet_shop where id in(".join($products,',').")");
if(!mysql_num_rows($result))
{
echo '<h1>there was an error with your order!</h1>';
}
else
{
echo '<h1>you ordered:</h1>';
while($row=mysql_fetch_assoc($result))
{
echo '<h2>'.$cnt[$row['id']].' x '.$row['name'].'</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>
源码下载地址。
http://www.phprm.com
本文地址：http://www.phprm.com/code/35963.html
转载随意，但请附上文章地址:-)