ecshop购物车实现弹出框效果

it2022-05-06  6

 

本文章是以ecshop原始程序及默认模板为例进行讲述,不同的模板操作上略有不同,但原理都一样。

 

操作方法:

1、后台网店设置 购物车确定提示  选择为    "提示用户,点击“取消”进入购物车"

 

2、打开 js/common.js  104行 就是case '1'  替换之前的 if (confirm(result.message)) location.href = cart_url;为

opencartDiv(result.shop_price,result.goods_name,result.goods_thumb,result.goods_brief,result.goods_id,result.goods_price,result.goods_number

 

3、复制下面这段代码

function opencartDiv(price,name,pic,goods_brief,goods_id,total,number) { var _id = "speDiv"; var m = "mask"; if (docEle(_id)) document.removeChild(docEle(_id)); if (docEle(m)) document.removeChild(docEle(m)); //计算上卷元素值 var scrollPos; if (typeof window.pageYOffset != 'undefined') { scrollPos = window.pageYOffset; } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { scrollPos = document.documentElement.scrollTop; } else if (typeof document.body != 'undefined') { scrollPos = document.body.scrollTop; } var i = 0; var sel_obj = document.getElementsByTagName('select'); while (sel_obj[i]) { sel_obj[i].style.visibility = "hidden"; i++; } // 新激活图层 var newDiv = document.createElement("div"); newDiv.id = _id; newDiv.style.position = "absolute"; newDiv.style.zIndex = "10000"; newDiv.style.width = "500px"; newDiv.style.height = "270px"; newDiv.style.top = (parseInt(scrollPos + 200)) + "px"; newDiv.style.left = (parseInt(document.body.offsetWidth) - 400) / 2 + "px"; // 屏幕居中 newDiv.style.background = "#fff"; newDiv.style.border = "5px solid #37911C"; var html = ''; //生成层内内容 html = '<div style="font-size:14;background:#8cc67b;width:480px;height:40px;line-height:40px;padding:0 10px;font-size:14px; "><span style="float:left; font-weight:bold">产品购买</span><a href=\'javascript:cancel_div()\' style="float:right;padding:0 26px 0 0;background:url(themes/popocai/images/ico_closebig.gif) right center no-repeat;cursor:pointer;" >关闭</a></div><div class="cartpopDiv"><div class="toptitle"><a href="goods.php?id='+goods_id+'" class="pic"><img src='+pic+' width="100" height="100"/></a><p><font style="font-weight:bold">'+name+'</font> <font style="color:#ff6701">'+price+'</font><br>'+goods_brief+'</p></div>'; html += '<div class="coninfo">'; html +='<table cellpadding="0" height="30"><tr><td align="center" >购物车共有<font style="color:#ff6701;"><strong>'+number+'</strong></font>种商品:合计:<font style="color:#ff6701;"><strong>'+total+'</strong></font></td></tr>'; html += '</table>'; html +='</div>'; html +="<div style='float:left;width:450px;text-align:center;padding:15px 0 0;'><a href='index.php'><img src='themes/popocai/images/goon_ico.gif'></a> <a href='flow.php'><img src='themes/popocai/images/jsico.gif'></a></div>"; html +='</div></div>'; newDiv.innerHTML = html; document.body.appendChild(newDiv); // mask图层 var newMask = document.createElement("div"); newMask.id = m; newMask.style.position = "absolute"; newMask.style.zIndex = "9999"; newMask.style.width = document.body.scrollWidth + "px"; newMask.style.height = document.body.scrollHeight + "px"; newMask.style.top = "0px"; newMask.style.left = "0px"; newMask.style.background = "#FFF"; newMask.style.filter = "alpha(opacity=30)"; newMask.style.opacity = "0.40"; document.body.appendChild(newMask); }

 

到这个common.js里  大家看了会觉的这个函数很熟悉 这就是这个文件里的 我只是拿出来修改了一下 ,当然我们可以自己重新写弹出层 比如用jquery

 

4、打开flow.php  181行左右加入如下代码,其实就是加入购物车成功的判断里面

$rows = $GLOBALS['db']->getRow("select goods_brief,shop_price,goods_name,goods_thumb from ".$GLOBALS['ecs']->table('goods')." where goods_id=".$goods->goods_id); $result['shop_price'] = price_format($rows['shop_price']); $result['goods_name'] = $rows['goods_name']; $result['goods_thumb'] = $rows['goods_thumb']; $result['goods_brief'] = $rows['goods_brief']; $result['goods_id'] = $goods->goods_id; $sql = 'SELECT SUM(goods_number) AS number, SUM(goods_price * goods_number) AS amount' . ' FROM ' . $GLOBALS['ecs']->table('cart') . " WHERE session_id = '" . SESS_ID . "' AND rec_type = '" . CART_GENERAL_GOODS . "'"; $rowss = $GLOBALS['db']->GetRow($sql); $result['goods_price'] = price_format($rowss['amount']); $result['goods_number'] = $rowss['number'];

 

5、本实例的样式代码和图片

/* 购物车弹出效果*/ .cartpopDiv{ width:450px; padding:0 25px; float:left; } .toptitle{ width:450px; float:left; padding:16px 0; background:url(../images/cartpop_bg.gif) left bottom repeat-x; } .toptitle a.pic{ float:left; width:100px; height:100px; overflow:hidden; } .toptitle p{ float:right; width:350px; font-size:14px; line-height:20px; height:58px; overflow:hidden; } .coninfo{ float:left; width:450px; padding:4px 0 6px; background:url(../images/cartpop_bg.gif) left bottom repeat-x; font-size:14px; } .coninfo table{ float:left; width:100%; border:none; color:#a00; } .coninfo table td.left{ width:82px; text-align:right; font-weight:bold; } .coninfo table td.left span, .toptitle p a{color:#333} .coninfo table td .gray{color:#999} .coninfo table td strong{color:#f00} .coninfo table td font{font-size:18px}

 

jsico.gif             

 

goon_ico.gif      

 

ico_closebig.gif     

 

 

图片直接点击另存即可,建议不要修改图片名称,如果要修改,前面代码中相应的地方也要修改。

 

转载于:https://www.cnblogs.com/wangblognet/archive/2012/12/09/2809812.html

相关资源:数据结构—成绩单生成器

最新回复(0)