24.10 购物车模块设计

视频讲解：光盘TMlx24购物车模块设计．exe

24.10.1 购物车模块概述

购物车在电子商务平台中是前台客户端程序中非常关键的一个功能模块。购物车的主要功能是保留用户选择的商品信息，用户可以在购物车内设置选购商品的数量，显示选购商品的总金额，还可以清除选择的全部商品信息，重新选择商品信息。购物车页面运行结果如图24.22所示。

图24.22 购物车页面

购物车模块主要实现添加商品、删除商品和更改数量等操作。

24.10.2 购物车模块技术分析

购物车功能实现最关键的部分就是如何将商品添加到购物车，如果不能完成商品的添加，那么购物车中的其他操作都没有任何意义。

在商品显示模块中，单击商品中的“购买”按钮，将商品放到购物车，并进入到“购物车”页面。单击“购买”按钮调用buycommo()函数，购买商品的id是该函数的唯一参数，在buycommo()函数中通过xmlhttp对象调用chklogin.php文件，并根据回传值作出相应处理。buycommo()函数代码如下：

【例24.30】代码位置：光盘TMsl24jsshowcommo.js

/＊＊添加商品，同时检查用户是否登录、商品是否重复等＊/ function buycommo(key){ /＊根据商品id，生成url ＊/ var url = "chklogin.php? key="+key; /＊使用xmlhttp对象调用chklogin.php页＊/ xmlhttp.open("GET", url, true); xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4){ var msg = xmlhttp.responseText; /＊用户没有登录＊/ if(msg == '2'){ alert(’请您先登录’); return false; }else if(msg == '3'){ /＊商品已添加＊/ alert(’该商品已添加’); return false; }else{ /＊显示购物车＊/ location='index.php? page=shopcar'; } } } xmlhttp.send(null);

在chklogin.php文件中将商品添加到购物车中。chklogin.php页代码如下：

【例24.31】代码位置：光盘TMsl24chklogin.php

<?php session_start(); header("Content-type: text/html; charset=UTF-8"); //设置文件编码格式 require("system/system.inc.php"); //包含配置文件 /＊＊＊ 1表示添加成功＊ 2表示用户没有登录＊ 3表示商品已添加过＊ 4表示添加时出现错误＊ 5表示没有商品添加＊/ $reback = '0'; if(empty($_SESSION['member'])){ $reback = '2'; }else{ $key = $_GET['key']; if($key == ''){ $reback = '5'; }else{ $boo = false; $sqls = "select id, shopping from tb_user where name = '".$_SESSION['member']."'"; $shopcont = $admindb->ExecSQL($sqls, $conn); if(! empty($shopcont[0]['shopping'])){ $arr = explode('@', $shopcont[0]['shopping']); foreach($arr as $value){ $arrtmp = explode(', ', $value); if($key == $arrtmp[0]){ $reback = '3'; $boo = true; break; } } if($boo == false){ $shopcont[0]['shopping'] .= '@'.$key.',1'; $update = "update tb_user set shopping='".$shopcont[0]['shopping']."' where name = '".$_SESSION['member']."'"; $shop = $admindb->ExecSQL($update, $conn); if($shop){ $reback = 1; }else{ $reback = '4'; } } }else{ $tmparr = $key.",1"; $updates = "update tb_user set shopping='".$tmparr."' where name = '".$_SESSION ['member']."'"; $result = $admindb->ExecSQL($updates, $conn); if($result){ $reback = 1; }else{ $reback = '4'; } } } } echo $reback; ?>

通过分析上述代码可知，shopping字段保存的是购物车中的商品信息，一条商品信息包括两部分，即商品id和商品数量，其中商品数量默认为1。两部分之间使用逗号“, ”分隔，如果添加多个商品，则每个商品之间使用“@”分隔。

成功完成商品的添加操作后，即可进入到购物车页面，执行其他操作。

24.10.3 购物车展示

购物车页面分PHP代码页和Smarty模板页。在PHP代码页中，首先读取tb_user数据表中shopping字段的内容，如果字段为空，则输出“暂无商品”；如果数据库中有数据，则循环输出数据，并将商品信息保存到数组中，再传给模板页。购物车页面的代码如下：

【例24.32】代码位置：光盘TMsl24 myshopcar.php

<?php $select = "select id, shopping from tb_user where name ='".$_SESSION['member']."'"; $rst = $admindb->ExecSQL($select, $conn); if($rst[0]['shopping']==""){ echo "<p>"; echo ’购物车中暂时没有商品！'; exit(); } $commarr = array(); foreach($rst[0] as $value){ $tmpnum = explode('@', $value); $shopnum=count($tmpnum); //商品类数 $sum = 0; foreach($tmpnum as $key => $vl){ $s_commo = explode(', ', $vl); $sql2 = "select id, name, m_price, fold, v_price from tb_commo"; $commsql = $sql2." where id = ".$s_commo[0]; $arr = $admindb->ExecSQL($commsql, $conn); @$arr[0]['num'] = $s_commo[1]; @$arr[0]['total'] = $s_commo[1]＊$arr[0]['v_price']; $sum += $arr[0]['total']; $commarr[$key] = $arr[0]; } } $smarty->assign('shoparr', $shopnum); $smarty->assign('commarr', $commarr); $smarty->assign('sum', $sum); ?>

商品的模板页不仅要负责用户购买商品信息的输出，而且还要提供可以对商品进行修改、删除等操作的事件接口。模板页代码如下：

【例24.33】代码位置：光盘TMsl24systemtemplatesmyshopcar.tpl

<table border="0" cellspacing="0" cellpadding="0" align="center"> <form id="myshopcar" name="myshopcar" method="post" action="#"> <tr> <td height="30" colspan="7" align="center" valign="middle" class="first">我的购物车</td> </tr> <tr> <td width="35" height="25" align="center" valign="middle" class="left">  </td> <td width="100" height="25" align="center" valign="middle" class="center">商品名称</td> <td width="100" height="25" align="center" valign="middle" class="center">购买数量</td> <td width="100" height="25" align="center" valign="middle" class="center">市场价格</td> <td width="100" height="25" align="center" valign="middle" class="center">会员价格</td> <td width="100" height="25" align="center" valign="middle" class="center">折扣率</td> <td width="100" height="25" align="center" valign="middle" class="right">合计</td> </tr> {foreach key=key item=item from=$commarr} <tr> <td height="25" align="center" valign="middle" class="left"><input id="chk" name="chk[]" type="checkbox" value="{$item.id}"></td> <td height="25" align="center" valign="middle" class="center"><div id = "c_name{$key}">   {$item.name}</div></td> <td height="25" align="center" valign="middle" class="center"><input id="cnum{$key}" name="cnum{$key}" type="text" class="shorttxt" value="{$item.num}" onkeyup="cvp({$key}, {$item.v_price}, {$shoparr})"></td> <td height="25" align="center" valign="middle" class="center"><div id="m_price{$key}">  {$item.m_price}</div></td> <td height="25" align="center" valign="middle" class="center"><div id="v_price{$key}">  {$item.v_price}</div></td> <td height="25" align="center" valign="middle" class="center"><div id="fold{$key}">  {$item.fold}</div></td> <td height="25" align="center" valign="middle" class="right"><div id="total{$key}">  {$item.total}</div></td> </tr> {/foreach} <tr> <td height="25" colspan="3" align="left" valign="middle"> <a href="#" onclick="return alldel(myshopcar)">全选</a> <a href="#" onclick="return overdel(myshopcar); "> 反选</a>    <input type="button" value="删除选择" class="btn" style="border-color: #FFFFFF; " onClick = 'return del(myshopcar); '>     </td> <td height="25" align="center" valign="middle"><input id="cont" name="cont" type="button" class="btn" value="继续购物" onclick="return conshop(myshopcar)" /></td> <td height="25" align="center" valign="middle"><input id="uid" name="uid" type="hidden" value="{$smarty.session.member}" ><input id="settle" name="settle" type="button" class="btn" value="去收银台" onclick="return formset(form)" /></td> <td height="25" colspan="2" align="right" valign="middle"><div id='sum'>共计：{$sum}&nbsp；元</div></td> </tr> </form> </table>

24.10.4 更改商品数量

对于新添加的商品，默认的购买数量为1，在购物车页面可以对商品的数量进行修改。当商品数量发生变化时商品的合计金额和商品总金额会自动发生改变，该功能通过触发text文本域的onkeyup事件调用cvp()函数实现。cvp()函数有3个参数，分别是商品id、商品单价和商品类别。

首先，通过商品id可以得到要修改商品的相关表单和标签属性。然后，通过商品单价和输入的商品数量计算该商品的合计金额。接着，使用for循环得到其他商品的合计金额。最后，将所有的合计金额累加，并输出到购物车页面。cvp()函数代码如下：

【例24.34】代码位置：光盘TMsl24jsshopcar.js

function cvp(key, vpr, shoparr){ var n_pre = 'total'; var num = 'cnum'+key.toString(); var total = n_pre+key.toString(); var t_number = document.getElementById(num).value; var ttl = t_number ＊ vpr; document.getElementById(total).innerHTML = ttl; var sm = 0; for(var i = 0; i < shoparr; i++){ var aaa = document.getElementById(n_pre+i.toString()).innerText; sm += parseInt(aaa); } document.getElementById('sum').innerHTML=’共计：'+sm+' 元’; }

这里所更改的商品数量，并没有被保存到数据库中，如果希望保存，那么单击“继续购物”按钮，则可以将商品数量更新到数据库中。

24.10.5 删除商品

当对添加的商品不满意时，可以对商品进行删除操作。操作流程为：首先选中要删除的商品前面的复选框，如果全部删除，则可以单击“全选”按钮，或“反选”按钮；然后单击“删除选择”按钮，在弹出的警告框中单击“确定”按钮，商品将被全部删除。删除商品的页面结果如图24.23所示。

图24.23 删除商品流程

所有的删除操作都是通过JS脚本文件shopcar.js来实现的，相关的函数包括alldel()函数、overdel()函数和del()函数。

alldel()函数和overdel()函数实现的原理比较简单，通过触发onclick事件来改变复选框的选中状态。函数代码如下：

【例24.35】代码位置：光盘TMsl24jsshopcar.js

//全部选择/取消 function alldel(form){ var leng = form.chk.length; if(leng==undefined){ if(! form.chk.checked) form.chk.checked=true; }else{ for( var i = 0; i < leng; i++) { if(! form.chk[i].checked) form.chk[i].checked = true; } } return false; } //反选 function overdel(form){ var leng = form.chk.length; if(leng==undefined){ if(! form.chk.checked) form.chk.checked=true; else form.chk.checked=false; }else{ for( var i = 0; i < leng; i++) { if(! form.chk[i].checked) form.chk[i].checked = true; else form.chk[i].checked = false; } } return false; }

使用alldel()或overdel()选中复选框后，即可调用del()函数来实现删除功能。del()函数首先使用for循环，将被选中的复选框的value值取出并存成数组，然后根据数组生成url，并使用xmlhttp对象调用这个url，当处理完毕后，根据返回值弹出提示或刷新本页。该函数代码如下：

【例24.36】代码位置：光盘TMsl24 jsshopcar.js

/＊删除记录＊/ function del(form){ if(! window.confirm(’是否要删除数据？? ')){ }else{ var leng = form.chk.length; if(leng==undefined){ if(! form.chk.checked){ alert(’请选取要删除数据！'); }else{ rd = form.chk.value; var url = 'delshop.php? rd='+rd; xmlhttp.open("GET", url, true); xmlhttp.onreadystatechange = delnow; xmlhttp.send(null); } }else{ var rd=new Array(); var j = 0; for( var i = 0; i < leng; i++) { if(form.chk[i].checked){ rd[j++] = form.chk[i].value; } } if(rd == ''){ alert(’请选取要删除数据！'); }else{ var url = "delshop.php? rd="+rd; xmlhttp.open("GET", url, true); xmlhttp.onreadystatechange = delnow; xmlhttp.send(null); } } } return false; } function delnow(){ if(xmlhttp.readyState == 4){ if(xmlhttp.status == 200){ var msg = xmlhttp.responseText; if(msg ! = '1'){ alert(’删除失败’+msg); }else{ alert(’删除成功’); location=('? page=shopcar'); } } } }

24.10.6 保存购物车

当用户希望保存商品更改后的商品数量时，可以单击“继续购物”按钮，将触发onclick事件调用conshop()函数保存数据，该函数有一个参数，就是当前表单的名称。在conshop()函数内，根据复选框和商品数量文本域，生成两个数组fst和snd，分别保存商品id和商品数量。

这里要注意，两个数组的值是要相互对应的，如商品1的id保存到fst[1]中，那么商品1的数量就要保存到snd[1]中，然后根据这两个数组生成一个url，使用XMLHttpRequest对象调用url，最后根据回传信息作出相应的判断。conshop()函数代码如下：

【例24.37】代码位置：光盘TMsl24 jsshopcar.js

//更改商品数量 function conshop(form){ var n_pre = 'cnum'; var lang = form.chk.length; if(lang == undefined){ var fst = form.chk.value; var snd = form.cnum0.value; }else{ var fst= new Array(); var snd = new Array(); for(var i = 0; i < lang; i++){ var nm = n_pre+i.toString(); var stmp = document.getElementById(nm).value; if(stmp ==''||isNaN(stmp)){ alert(’不允许为空、必须为数字’); document.getElementById(nm).select(); return false; } snd[i] = stmp; var ftmp = form.chk[i].value; fst[i] = ftmp; } } var url = 'changecar.php? fst='+fst+'&snd='+snd; xmlhttp.open("GET", url, true); xmlhttp.onreadystatechange = updatecar; xmlhttp.send(null); } function updatecar(){ if(xmlhttp.readyState == 4){ var msg = xmlhttp.responseText; if(msg == '1'){ location='index.php'; }else{ alert(’操作失败’+msg); } } }

在conshop()函数中调用的changecar.php页为数据处理页，该页将商品id和商品数量进行重新排列，并保存到shopping字段内。该页面代码如下：

【例24.38】代码位置：光盘TMsl24 changecar.php

<?php session_start(); header("Content-type: text/html; charset=UTF-8"); //设置文件编码格式 require("system/system.inc.php"); //包含配置文件 $sql = "select id, shopping from tb_user where name = '".$_SESSION['member']."'"; $rst = $admindb->ExecSQL($sql, $conn); $reback = '0'; $changecar = array(); if(isset($_GET['fst']) && isset($_GET['snd'])){ $fst = $_GET['fst']; $snd = $_GET['snd']; $farr = explode(', ', $fst); $sarr = explode(', ', $snd); $upcar = array(); for($i = 0; $i < count($farr); $i++){ $upcar[$i] = $farr[$i].', '.$sarr[$i]; } if(count($farr) > 1){ $update = "update tb_user set shopping='".implode('@', $upcar)."' where name = '".$_SESSION['member']."'"; }else{ $update = "update tb_user set shopping='".$upcar[0]."' where name = '".$_SESSION['member']."'"; } $shop = $admindb->ExecSQL($update, $conn); if($shop){ $reback = 1; }else{ $reback = 2; } } echo $reback; ?>

24.10 购物车模块设计