在济南网站建设中开发ecshop的商城网站,不免会遇到有的客户需要改一下是否继续购物这个地方,因为官方的那个样子实在是太丑了。ecshop2.7.3加入购物车弹出层效果。怎么修改呢,济南腾飞网络讲解一下方法:
效果如图:
一、进入网站后台--网店设置--购物车确定提示--改为如图所示:
二、打开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);
三、复制
- 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
四、打开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'];
- 就是加入购物车成功的判断里面
五、我把我们做的样式和图片也贴出来 不是很漂亮了
- /* 购物车弹出效果*/
- .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}