AJAX/PHP/JQuery/CSS设计拖拉式购物车

下边，笔者将带领大家使用PHP,JQuery和CSS和AJAX技术，去设计一个拖拉式的购物车，这个购物车的效果比较酷，当你选择好要购买的商品后，直接用鼠标拖拉到一个购物篮的图标中去，则完成一次购物的过程，跟在超市购物的过程有点相像。本文将使用MySQL数据库，并且用到了jQuery中的一个很好用的插件simpletip(地址：http://craigsworks.com/projects/simpletip/)，接下来会介绍其详细的用法。

成都创新互联是一家专注于网站设计、成都做网站与策划设计,北安网站建设哪家好?成都创新互联做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:北安等地区。北安做网站价格咨询:18982081108

步骤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);

这里我们只是简单地设计了商品的属性表，其中包括了商品的图片，名称，价格和描述，在实际的应用中，可能会设计更复杂的商品属性。

#p#

步骤2 设计页面结构

接下来，我们开始设计我们的页面结构，HTML代码如下：

 
 
 
   
  
  
      
  
  
     
  
  
         
  
  
  Shopping cart
   
  
  
  The best products at the best prices

Products

// 这里动态从数据库中读取商品

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{...}{ /**//* 商品列表层和购物车区域的div设置 */
margin-bottom:40px;
}
.top-label{...}{ /**//* 这是页面上部products的样式*/
background:url(img/label_bg.png) no-repeat;
display:inline-block;
margin-left:20px;
position:relative;
margin-bottom:-15px;
}
.label-txt{...}{
background:url(img/label_bg.png) 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{...}{ /**//* content-area区域的样式 */
background:url(img/container_top.png) no-repeat #fcfcfc;
padding:15px 20px 0 20px;
}
.content{...}{
padding:10px;
}
.drag-desired{...}{ /**//* 商品列表区域的样式*/
background:url(img/drag_desired_label.png) no-repeat top right;
padding:30px;
}
.drop-here{...}{ /**//*购物车区域的样式 */
background:url(img/drop_here_label.png) no-repeat top right;
}
.bottom-container-border{...}{
background:url(img/container_bottom.png) 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{...}{ /**//* 商品的简单介绍用到的样式，这个样式jQuery 的simpletip plugin插件会用到 */
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(img/button.png) no-repeat center top;
}
a.button:hover{...}{
background-position:bottom;
text-decoration:none;
}

Demo.php中
$result = mysql_query("SELECT * FROM internet_shop");
while($row=mysql_fetch_assoc($result))
{
echo '';
}

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 ''.$row['name'].'
'.$row['description'].'
price: $'.$row['price'].'
Drag it to your shopping cart to purchase it';

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:\'\
\
\
\
'.$row['name'].'\
$'.$row['price'].'\
\
1\
2\
3\
\
\
remove\
\
\'}';

define('INCLUDE_CHECK',1);
require "connect.php";
if(!$_POST) // 检查是否有数据提交
{
if($_SERVER['HTTP_REFERER'])
header('Location : '.$_SERVER['HTTP_REFERER']);
exit;
}
?>
$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 '
There was an error with your order!
';
}
else
{
echo '
You ordered:
';
while($row=mysql_fetch_assoc($result))
{
echo '
'.$cnt[$row['id']].' x '.$row['name'].'
';
//计算总价格
$total+=$cnt[$row['id']]*$row['price'];
}
echo '
Total: $'.$total.'
';
}
?>

var purchased=new Array(); //该数组包含了用户购买的商品
var totalprice=0; //商品总价
$(document).ready(function()...{
$('.product').simpletip(...{ //使用simpletip控件
offset:[40,0],
content:'',
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
...{
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)
...{
当前文章：AJAX/PHP/JQuery/CSS设计拖拉式购物车
网站网址：http://www.shufengxianlan.com/qtweb/news44/150794.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联
猜你还喜欢下面的内容
网站建设知识
分类信息网
攀枝花网站建设　　　成都营销网站制作　　　成都手机网站报价　　　定制网站　　　自贡主机托管　　　成都网站设计　　　正泰动物　　　成都微商城开发　　　达州电信机房　　　四川艺考培训　　　手机网站制作　　　成都网站推广　　　温江网站建设　　　电子商务商城网站　　　成都微信小程序开发　　　网站seo优化　　　高端定制网站建设　　　汕尾凯敏网站　　　 ssl证书申请　　　买链接　　　

高品质定制跨终端自动兼容节约开发成本开发周期短一体化服务

028-86922220 13518219792

028-86922220 13518219792
网站建设QQ：532337155 营销推广QQ：631063699 网站制作QQ：532337155 营销推广QQ：631063699 售后QQ：1683211881
创新互联建站专注：网站设计网站制作网站建设
地址：成都太升南路288号锦天国际A幢10楼

成都创新互联科技有限公司
Tel：400-028-6601（7x24h）

AJAX/PHP/JQuery/CSS设计拖拉式购物车

Shopping cart

The best products at the best prices

There was an error with your order!

You ordered:

'.$cnt[$row['id']].' x '.$row['name'].'

Total: $'.$total.'