AJAX/PHP/JQuery/CSS设计拖拉式购物车
本人作品,原文发表在
http://tech.it168.com/a2011/0411/1176/000001176645_all.shtml
在电子商务网站的建设中，购物车这个功能是不能缺少的。而编写购物车的方法也是多种多样，有的简单有的复杂，而在本文中，将带领大家使用PHP,JQuery和CSS和AJAX技术，去设计一个拖拉式的购物车，这个购物车的效果比较酷，当你选择好要购买的商品后，直接用鼠标拖拉到一个购物篮的图标中去，则完成一次购物的过程，跟在超市购物的过程有点相像。本文将使用MySQL数据库，并且用到了jQuery中的一个很好用的插件simpletip(地址：http://craigsworks.com/projects/simpletip/)，接下来会介绍其详细的用法。
步骤1、建立Mysql数据库
首先，为我们的购物车应用建立如下的mysql数据库文件，下面给出表结构，并添加一些样例数据：
CREATE TABLE IF NOT EXISTS `internet_shop` (
`id` int(6) NOT NULL auto_increment,
`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',
PRIMARY KEY (`id`),
UNIQUE KEY `img` (`img`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=7 ;
INSERT INTO `internet_shop` VALUES(1, 'iPod.png', 'iPod', 'The original and popular iPod.', 200);
INSERT INTO `internet_shop` VALUES(2, 'iMac.png', 'iMac', 'The iMac computer.', 1200);
INSERT INTO `internet_shop` VALUES(3, 'iPhone.png', 'iPhone', 'This is the new iPhone.', 400);
INSERT INTO `internet_shop` VALUES(4, 'iPod-Shuffle.png', 'iPod Shuffle', 'The new iPod shuffle.', 49);
INSERT INTO `internet_shop` VALUES(5, 'iPod-Nano.png', 'iPod Nano', 'The new iPod Nano.', 99);
INSERT INTO `internet_shop` VALUES(6, 'Apple-TV.png', 'Apple TV', 'The new Apple TV. Buy it now!', 300);
这里我们只是简单地设计了商品的属性表，其中包括了商品的图片，名称，价格和描述，在实际的应用中，可能会设计更复杂的商品属性。
步骤2、设计页面结构
接下来，我们开始设计我们的页面结构，HTML代码如下：
<div id="main-container"> <!—主DIV -->
<div alt="AJAX/PHP/JQuery/CSS设计拖沓式购物车" width="128" height="128" />
<!--一个加载等待的图标-->
<img src="img/ajax_load_2.gif" alt="AJAX/PHP/JQuery/CSS设计拖沓式购物车" id="ajax-loader" width="16" height="16" />
</div>
<!—购物表单?
<form name="checkoutForm" method="post" action="order.php">
<div id="item-list"> <!—购物清单列表 -->
</div>
</form>
<div onclick="document.forms.checkoutForm.submit(); return false;" />
步骤4、PHP部分设计
下面进行PHP部分的代码设计，首先是列出数据库表中的商品，代码简单，如下所示：
Demo.php中
$result = mysql_query("SELECT * FROM internet_shop");
while($row=mysql_fetch_assoc($result))
{
echo '<div alt="AJAX/PHP/JQuery/CSS设计拖沓式购物车" width="128" height="128" /></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 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;" />
最后，我们看下当用户点结帐按钮后的页面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="AJAX/PHP/JQuery/CSS设计拖沓式购物车" />',
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="([^"]+)"/);
param = param[1];
}
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
