步骤4、PHP部分设计
下面进行PHP部分的代码设计，首先是列出数据库表中的商品，代码简单，如下所示：
Demo.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>';
}
另外一个需要编写PHP代码的地方，是当用户鼠标移动到某个商品介绍时，通过jQuery的simpletips插件，将商品的图片作为参数，使用ajax方式调用，获得该商品的介绍，并且返回为一个HTML文件再给前端页面进行处理，该文件在ajax目录下的tips.php文件，如下所示：
Ajax/tips.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."'"));
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>';
此外，我们还需要编写一个addtocart.php文件，这个文件的作用是：当用户将选定的商品拖拉到购物车时，程序在数据库中检索该商品，然后以JSON的形式返回给前端，代码如下：
<?
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></select>\
\
</td>\
<td width="15%"><a href="#" onclick="remove('.$row['id'].');return false;" class="remove">remove</a></td>\
</tr>\
</table>\'}';
当用户把商品拖拉到购物车区域后，前端页面就以表格的形式逐一显示出用户所选的商品，如下图：
最后，我们看下当用户点结帐按钮后的页面order.php的编写，这里我们只是简单把用户的选择最后罗列出来并且进行商品价格合计，代码如下：
<?php
define('INCLUDE_CHECK',1);
require "connect.php";
if(!$_POST) // 检查是否有数据提交
{
if($_SERVER['HTTP_REFERER'])
header('Location : '.$_SERVER['HTTP_REFERER']);
exit;
}
?>
<!-- XHTML code.. -->
<?php
$cnt = array();
$products = array();
foreach($_POST as $key=>$value)
{
$key=(int)str_replace('_cnt','',$key);
$products[]=$key; // 将产品的ID编号放到数组products中去
$cnt[$key]=$value;
$result = mysql_query("SELECT * FROM internet_shop WHERE id IN(".join($products,',').")"); // selecting all the products with the IN() function
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>';
}
?>
这里，使用数组products保存了用户选择好的商品名称，而cnt数组则记录了每个商品购买的件数，最后实现效果如下：
步骤5、jQuery部分设计
我们首先要引入相关的jQuery文件，如下：
<script type="text/javascript" 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 type="text/javascript" src="simpletip/jquery.simpletip-1.3.1.pack.js"></script> <!-- the jQuery simpletip plugin -->
<script type="text/javascript" src="script.js"></script>
同时，我们要编写自己的script.js文件，在这个文件中，我们使用了jQuery的toolstip控件：
var purchased=new Array(); //该数组包含了用户购买的商品
var totalprice=0; //商品总价
$(document).ready(function()...{
$('.product').simpletip(...{ //使用simpletip控件
offset:[40,0],
content:'<img style="margin:10px;" src="img/ajax_load.gif" alt="loading" />',
onShow: function()...{
var param = this.getParent().find('img').attr('src');
// 修复IE6的问题
if($.browser.msie && $.browser.version=='6.0')
...{
param = this.getParent().find('img').attr('style').match(/src=\"([^\"]+)\"/);
param = param[1];
}
// 通过ajax方式加载tips.php文件
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');
// 修复IE 6下的问题
if($.browser.msie && $.browser.version=='6.0')
...{
param = $(ui.draggable).attr('style').match(/src=\"([^\"]+)\"/);
addlist(param); //调用addlist方法
}
});
});
接下来看addlist方法的编写，其中都提供了详细的注释：
function addlist(param)
...{
$.ajax(...{ // ajax方法调用 addtocart.php
type: "POST",
url: "ajax/addtocart.php",
data: 'img='+encodeURIComponent(param), // the product image as a parameter
dataType: 'json', // JSON形式调用
//在调用前，显示加载的小图标
beforeSend: function(x)...{$('#ajax-loader').css('visibility','visible');},
//调用成功时的回调方法
success: function(msg)...{
//调用成功后，隐藏等待加载的小图标
$('#ajax-loader').css('visibility','hidden'); // hiding the loading gif animation
//如果有出错
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数组中增加相关产品
...{
purchased.push(...{id:msg.id,cnt:1,price:msg.price});
}
else // 如果购物车中已经有该商品，则数量增加
...{
// 这里设置每样商品只能买3件，当然大家可以修改
if(cnt>=3) return false;
//增加购物车中显示的数量
purchased[i].cnt++;
//设置数量下拉框中的数量
$('#'+msg.id+'_cnt').val(purchased[i].cnt);
}
totalprice+=msg.price; // 重新计算总价格
update_total(); // 修改总价格
}
$('.tooltip').hide(); // 隐藏商品的介绍
}
});
}
//帮助工具类，找出当前产品在purchased数组中的位置
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; // reset the counter设置purchased数组中，该商品的数量为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();
}
}
最后，我们可以运行看到相关效果：
效果可以在这个地址看到：http://demo.tutorialzine.com/2009/09/shopping-cart-php-jquery/demo.php
相关代码下载：http://demo.tutorialzine.com/2009/09/shopping-cart-php-jquery/demo.zip