购物车模块设计

购物车模块设计本讲大纲：1购物车模块概述2购物车展示3更改商品数量4删除商品5保存购物车购物车模块概述购物车是电子商务平台中非常关键的一个功能模块。购物车的主要功能是保留用户选择的商品信息，用户可以在购物车内设置选购商品的数量，显示选购商品的总金额，还可以清除选择的全部商品信息，重新选择商品信息。购物车页面运行结果如图6-16所示。购物车模块除了展示用户购买的商品之外，还实现添加商品、更改商品数量、删除商品和清空购物车等操作。图6-16购物车页面购物车展示（1）购物车页面分PHP代码页和Smarty模板页。在PHP代码页中，首先读取tb_user数据表中shopping字段的内容，如果字段为空，则输出“暂无商品”；如果数据库中有数据，则循环输出数据，并将商品信息保存到数组中，再传给模板页。购物车页myshopcar.php的代码如下：<?php$select="selectid,shoppingfromtb_userwherename='".$_SESSION['member']."'";$rst=$admindb->ExecSQL($select,$conn);if($rst[0]['shopping']==""){ echo"<script>alert('购物车中暂时没有商品!');window.location.href='index.php';</script>";}$commarr=array();foreach($rst[0]as$value){

购物车展示（2）$tmpnum=explode('@',$value); $shopnum=count($tmpnum); //商品类数 $sum=0; foreach($tmpnumas$key=>$vl){$s_commo=explode(',',$vl); $sql2="selectid,name,m_price,fold,v_pricefromtb_commo"; $commsql=$sql2."whereid=".$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];

购物车展示（3）}}$smarty->assign('shoparr',$shopnum);$smarty->assign('commarr',$commarr);$smarty->assign('sum',$sum);?>

商品的模板页system\templates\myshopcar.tpl不仅要负责用户购买商品信息的输出，而且还要提供可以对商品进行修改、删除等操作的事件接口。模板页代码如下：<tableborder="0"cellspacing="0"cellpadding="0"align="center"><formid="myshopcar"name="myshopcar"method="post"action="#"><tr>

购物车展示（4）<tdheight="30"colspan="7"align="center"valign="middle"class="first">我的购物车</td></tr><tr><tdwidth="35"height="25"align="center"valign="middle"class="left"> </td><tdwidth="100"height="25"align="center"valign="middle"class="center">商品名称</td><tdwidth="100"height="25"align="center"valign="middle"class="center">购买数量</td><tdwidth="100"height="25"align="center"valign="middle"class="center">市场价格</td><tdwidth="100"height="25"align="center"valign="middle"class="center">会员价格</td>

购物车展示（5）<tdwidth="100"height="25"align="center"valign="middle"class="center">折扣率</td><tdwidth="100"height="25"align="center"valign="middle"class="right">合计</td></tr>{foreachkey=keyitem=itemfrom=$commarr}<tr><tdheight="25"align="center"valign="middle"class="left"><inputid="chk"name="chk[]"type="checkbox"value="{$item.id}"></td><tdheight="25"align="center"valign="middle"class="center"><divid="c_name{$key}"> {$}</div></td><tdheight="25"align="center"valign="middle"class="center"><inputid="cnum{$key}"name="cnum{$key}"type="text"class="shorttxt"value="{$item.num}"onkeyup="cvp({$key},{$item.v_price},{$shoparr})"></td>购物车展示（6）<tdheight="25"align="center"valign="middle"class="center"><divid="m_price{$key}"> {$item.m_price}</div></td><tdheight="25"align="center"valign="middle"class="center"><divid="v_price{$key}"> {$item.v_price}</div></td><tdheight="25"align="center"valign="middle"class="center"><divid="fold{$key}"> {$item.fold}</div></td><tdheight="25"align="center"valign="middle"class="right"><divid="total{$key}"> {$item.total}</div></td></tr>{/foreach}<tr><tdheight="25"colspan="3"align="left"valign="middle"><ahref="#"onclick="returnalldel(myshopcar)">全选</a><ahref="#"购物车展示（7）onclick="returnoverdel(myshopcar);">反选</a>  <inputtype="button"value="删除选择"class="btn"style="border-color:#FFFFFF;"onClick='returndel(myshopcar);'>  </td><tdheight="25"align="center"valign="middle"><inputid="cont"name="cont"type="button"class="btn"value="继续购物"onclick="returnconshop(myshopcar)"/></td><tdheight="25"align="center"valign="middle"><inputid="uid"name="uid"type="hidden"value="{$smarty.session.member}"><inputid="settle"name="settle"type="button"class="btn"value="去收银台"onclick="returnformset(form)"/></td><tdheight="25"colspan="2"align="right"valign="middle"><divid='sum'>共计：{$sum} 元</div></td></tr></form></table>更改商品数量（1）对于新添加的商品，默认的购买数量为1，在购物车页面可以对商品的数量进行修改。当商品数量发生变化时，商品的“合计”金额和商品总金额会自动发生改变，该功能是通过触发text文本域的onkeyup事件调用cvp()函数实现。cvp()函数有3个参数，分别是商品id、商品单价和商品类别。在shopcar.js文件中，首先通过商品的id可以得到要修改商品的相关表单和标签属性。然后通过商品单价和输入的商品数量计算该商品的合计金额。接着使用for循环得到其他商品的合计金额。最后将所有的合计金额累加，并输出到购物车页面。cvp()函数代码如下：functioncvp(key,vpr,shoparr){ varn_pre='total'; varnum='cnum'+key.toString(); vartotal=n_pre+key.toString();

更改商品数量（2）vart_number=document.getElementById(num).value; varttl=t_number*vpr; document.getElementById(total).innerHTML=ttl; varsm=0; for(vari=0;i<shoparr;i++){varaaa=document.getElementById(n_pre+i.toString()).innerText; sm+=parseInt(aaa); } document.getElementById('sum').innerHTML='共计：'+sm+'元';}

这里所更改的商品数量，并没有被保存到数据库中，如果希望保存，那么单击“继续购物”按钮，则可以将商品数量更新到数据库中。删除商品（1）当对添加的商品不满意时，可以对商品进行删除操作。操作流程为：首先选中要删除的商品前面的复选框，如果全部删除，则可以单击“全选”按钮，或“反选”按钮；然后单击“删除选择”按钮，在弹出的警告框中单击“确定”按钮，商品将被全部删除。删除商品的页面效果如图6-17所示。所有的删除操作都是通过js脚本文件shopcar.js来实现，相关的函数包括alldel()函数、overdel()函数和del()函数。alldel()函数和overdel()函图6-17删除商品流程删除商品（2）数实现的原理比较简单，通过触发onclick事件来改变复选框的选中状态。函数代码如下：//全部选择/取消functionalldel(form){ varleng=form.chk.length; if(leng==undefined){ if(!form.chk.checked) form.chk.checked=true; }else{for(vari=0;i<leng;i++) { if(!form.chk[i].checked)

删除商品（3）form.chk[i].checked=true; } } returnfalse;}//反选functionoverdel(form){ varleng=form.chk.length; if(leng==undefined){ if(!form.chk.checked) form.chk.checked=true; else

删除商品（4）form.chk.checked=false; }else{for(vari=0;i<leng;i++) { if(!form.chk[i].checked) form.chk[i].checked=true; else form.chk[i].checked=false;} } returnfalse;}删除商品（5）使用alldel()或overdel()选中复选框后，即可调用del()函数来实现删除功能。del()函数首先使用for循环，将被选中的复选框的value值取出并存成数组，然后根据数组生成url，并使用xmlhttp对象调用这个url，当处理完毕后，根据返回值弹出提示或刷新本页。在shopcar.js脚本文件中，del()函数代码如下：/*删除记录*/functiondel(form){ if(!window.confirm('是否要删除数据??')){

}else{ varleng=form.chk.length; if(leng==undefined){

删除商品（6）if(!form.chk.checked){ alert('请选取要删除数据!'); }else{rd=form.chk.value; varurl='delshop.php?rd='+rd; xmlhttp.open("GET",url,true); xmlhttp.onreadystatechange=delnow; xmlhttp.send(null); } }else{ varrd=newArray(); varj=0;

删除商品（7）for(vari=0;i<leng;i++) { if(form.chk[i].checked){ rd[j++]=form.chk[i].value; } } if(rd==''){ alert('请选取要删除数据!'); }else{varurl="delshop.php?rd="+rd; xmlhttp.open("GET",url,true); xmlhttp.onreadystatechange=delnow;

删除商品（8）xmlhttp.send(null); } } } returnfalse;}functiondelnow(){ if(xmlhttp.readyState==4){ if(xmlhttp.status==200){ varmsg=xmlhttp.responseText; if(msg!='1'){ alert('删除失败'+msg);

删除商品（9）}else{ alert('删除成功'); location=('?page=shopcar'); } } }}保存购物车（1）当用户希望保存商品更改后的商品数量时，可以单击“继续购物”按钮，将触发onclick事件调用conshop()函数保存数据，该函数有一个参数，就是当前表单的名称。在conshop()函数内，根据复选框和商品数量文本域，生成两个数组fst和snd，分别保存商品id和商品数量。这里要注意，两个数组的值是要相互对应的，如商品1的id保存到fst[1]中，那么商品1的数量就要保存到snd[1]中，然后根据这两个数组生成一个url，使用xmlhttprequest对象调用url，最后根据回传信息作出相应的判断。conshop()函数存储于js\shopcar.js文件中，其代码如下：//更改商品数量functionconshop(form){ varn_pre='cnum'; varlang=form.chk.length; if(lang==undefined){保存购物车（2）varfst=form.chk.value; varsnd=um0.value; }else{ varfst=newArray(); varsnd=newArray(); for(vari=0;i<lang;i++){ varnm=n_pre+i.toString(); varstmp=document.getElementById(nm).value; if(stmp==''||isNaN(stmp)){ alert('不允许为空、必须为数字'); document.getElementById(nm).select(); returnfalse; }

保存购物车（3）snd[i]=stmp; varftmp=form.chk[i].value; fst[i]=ftmp; } }varurl='changecar.php?fst='+fst+'&snd='+snd; xmlhttp.open("GET",url,true); xmlhttp.onreadystatechange=updatecar; xmlhttp.send(null);}functionupdatecar(){ if(xmlhttp.readyState==4){

保存购物车（4）varmsg=xmlhttp.responseText; if(msg=='1'){ location='index.php'; }else{ alert('操作失败'+msg); } }}在conshop()函数中调用的changecar.php页为数据处理页，该页将商品id和商品数量进行重新排列，并保存到shopping字段内。changecar.php页面代码如下：<?phpsession_start();保存购物车（5）header("Content-type:text/html;charset=UTF-8");