ECSHOP商品加入购物车仿淘宝效果

2016-06-13 13:05 来源：www.chinab4c.com 作者：ecshop专家

各位ECSHOP网店系统用户大家好，欢迎来到ECSHOP教程网图文教程，今天为大家详细解说一下ECSHOP商品加入购物车仿淘宝效果。 ECSHOP教程网ECSHOP视频教程也再不断的完善与跟进，期待大家的关注！希望在ECSHOP的道路上，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 = '

产品购买关闭

'+name+' '+price+' '+goods_brief+'

';

html += '

';

html +='

';

html += '

购物车共有'+number+'种商品：合计：'+total+'

';

html +='

';

html +="

";

html +='

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

}

$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}