仿淘宝商品详细页加入购物车效果
仿淘宝商品详细页加入购物车效果
goods.dwt页面 <a href="网页特效:addToCart({$goods.goods_id},0,1)"><img src="images/bnt_cat.gif" /></a>和默认的链接有点点区别 大家对比添加
要显示的层添加到这个叶面的底部 <div class="cartSure" id="cartSureBox" style="display:none;">
<div class="btn"><a href="javascript：;">关闭</a></div>
<div class="mesgCon">
<h3>宝贝已成功添加到购物车！</h3>
<div>购物车共有<span id="ECS_GOODS_NUMBER"></span>种商品 合计：<span id="ECS_GOODS_PRICE"></span></div><br>
<input type="image" src="images/btn_pay.gif" />
</div>
</div>
复制代码
我把样式也贴出来 供大家参考
.cartSure{
position:absolute;
left:0;
top:545px;
width:405px;
height:90px;
z-index:999;
background:url(images/cartSure_bg.gif) 0 0 no-repeat;
font-size:12px;
}
.mesgCon{
float:left;
background:url(images/mesg.png) no-repeat 18px 9px;
color:#666;
line-height:21px;
padding:0 0 0 100px;
width:320px;
}
.mesgCon h3{
float:left;
width:320px;
color:#333;
font-size:14px;
margin:-1px 0 6px;
height:auto;
line-height:20px;
background:none;
text-align:left;
padding:0;
font-weight:bold;
}
.mesgCon input{float:left; margin:0 11px 0 0}
.mesgCon div{float:left; font-size:13px}
.mesgCon div span{font-size:14px; font-weight:bold; color:#F80}
.cartSure .btn{float:left; padding:5px; width:390px}
.cartSure .btn a{
background:url(images/close_bg.gif) no-repeat 0 0;
float:right;
height:13px;
overflow:hidden;
text-indent:-5000px;
width:38px;
}
.cartSure .btn a:hover{background-position:0 -12px}打开js/common.js文件 修改 addToCart函数 修改后：
function addToCart(goodsId, parentId, is_ajax) {
var goods = new Object();
var spec_arr = new Array();
var fittings_arr = new Array();
var number = 1;
var formBuy = document.forms['ECS_FORMBUY'];
var quick = 0;
// 检查是否有商品规格
if (formBuy) {
spec_arr = getSelectedAttributes(formBuy);
if (formBuy.elements['number']) {
number = formBuy.elements['number'].value;
}
quick = 1;
}
goods.quick = quick;
goods.spec = spec_arr;
goods.goods_id = goodsId;
goods.number = number;
goods.parent = (typeof(parentId) == "undefined") ? 0 : parseInt(parentId);
if (is_ajax == 1) {
Ajax.call('flow.php教程?step=add_to_cart', 'goods=' + goods.toJS ** tring(), addToCartResp ** e_ajax, 'POST', 'JSON');
} else {
Ajax.call('flow.php?step=add_to_cart', 'goods=' + goods.toJS ** tring(), addToCartResp ** e, 'POST', 'JSON');
}
}复制代码
添加几个js函数
/* *
* 处理添加商品到购物车的反馈信息
*/
function addToCartResp ** e_ajax(result) {
if (result.error > 0) {
// 如果需要缺货登记，跳转
if (result.error == 2) {
if (confirm(result.message)) {
location.href = 'user.php?act=add_booking&id=' + result.goods_id + '&spec=' + result.product_spec;
}
//opendiv_booking();
}
// 没选规格，弹出属性选择框
else if (result.error == 6) {
openSpeDiv(result.message, result.goods_id, result.parent);
} else {
alert(result.message);
}
} else {
var cartInfo = document.getElementById('ECS_CARTINFO');
var cart_url = 'flow.php?step=cart';
if (cartInfo) {
cartInfo.innerHTML = result.content;
}
if (result.one_step_buy == '1') {
location.href = cart_url;
} else {
switch (result.confirm_type) {
case '1':
if (confirm(result.message))
location.href = cart_url;
break;
case '2':
if (!confirm(result.message))
location.href = cart_url;
break;
case '3':
divTipmiddle(result);
//refresh_cart();
document.getElementById('jdiv').innerHTML = result.cj;
break;
default:
break;
}
}
}
}
//购物车提示框JS
function closeTipBox() {
document.getElementById('cartSureBox').style.display = "none";
}
function divTipmiddle(result) {
openTipBox(result);
var a = document.getElementById("cartSureBox");
a.style.left = (document.body.clientWidth / 2 - a.clientWidth / 2 + 245) + "px";
}
function openTipBox(result) {
document.getElementById('ECS_GOODS_PRICE').innerHTML = result.goods_price;
document.getElementById('ECS_GOODS_NUMBER').innerHTML = result.goods_number;
document.getElementById('cartSureBox').style.display = "block";
}
function opendiv_booking() {
document.getElementById('buyTip2').style.display = "block";
}
//购物车提示框JS
function closeTipBox() {
document.getElementById('cartSureBox').style.display = "none";
}复制代码
打开flow.php 167行左右添加 /* 取得商品列表，计算合计 */
$cart_goods = get_cart_goods();
//$smarty->assign('total', $cart_goods['total']);
$result['goods_price'] = $cart_goods['total']['goods_price'];
$result['goods_number'] = $cart_goods['total']['real_goods_count'];
复制代码
根据以上操作可实现 效果大家应该都知道 如图：
实现方法：
goods.dwt页面 <a href="javascript：addToCart({$goods.goods_id},0,1)"><img src="images/bnt_cat.gif" /></a>和默认的链接有点点区别 大家对比添加
要显示的层添加到这个叶面的底部 <div class="cartSure" id="cartSureBox" style="display:none;">
<div class="btn"><a href="javascript：;">关闭</a></div>
<div class="mesgCon">
<h3>宝贝已成功添加到购物车！</h3>
<div>购物车共有<span id="ECS_GOODS_NUMBER"></span>种商品 合计：<span id="ECS_GOODS_PRICE"></span></div><br>
<input type="image" src="images/btn_pay.gif" />
</div>
</div>
复制代码
我把样式也贴出来 供大家参考
.cartSure{
position:absolute;
left:0;
top:545px;
width:405px;
height:90px;
z-index:999;
background:url(images/cartSure_bg.gif) 0 0 no-repeat;
font-size:12px;
}
.mesgCon{
float:left;
background:url(images/mesg.png) no-repeat 18px 9px;
color:#666;
line-height:21px;
padding:0 0 0 100px;
width:320px;
}
.mesgCon h3{
float:left;
width:320px;
color:#333;
font-size:14px;
margin:-1px 0 6px;
height:auto;
line-height:20px;
background:none;
text-align:left;
padding:0;
font-weight:bold;
}
.mesgCon input{float:left; margin:0 11px 0 0}
.mesgCon div{float:left; font-size:13px}
.mesgCon div span{font-size:14px; font-weight:bold; color:#F80}
.cartSure .btn{float:left; padding:5px; width:390px}
.cartSure .btn a{
background:url(images/close_bg.gif) no-repeat 0 0;
float:right;
height:13px;
overflow:hidden;
text-indent:-5000px;
width:38px;
}
.cartSure .btn a:hover{background-position:0 -12px}复制代码
打开js/common.js文件 修改 addToCart函数 修改后：
function addToCart(goodsId, parentId, is_ajax) {
var goods = new Object();
var spec_arr = new Array();
var fittings_arr = new Array();
var number = 1;
var formBuy = document.forms['ECS_FORMBUY'];
var quick = 0;
// 检查是否有商品规格
if (formBuy) {
spec_arr = getSelectedAttributes(formBuy);
if (formBuy.elements['number']) {
number = formBuy.elements['number'].value;
}
quick = 1;
}
goods.quick = quick;
goods.spec = spec_arr;
goods.goods_id = goodsId;
goods.number = number;
goods.parent = (typeof(parentId) == "undefined") ? 0 : parseInt(parentId);
if (is_ajax == 1) {
Ajax.call('flow.php?step=add_to_cart', 'goods=' + goods.toJS ** tring(), addToCartResp ** e_ajax, 'POST', 'JSON');
} else {
Ajax.call('flow.php?step=add_to_cart', 'goods=' + goods.toJS ** tring(), addToCartResp ** e, 'POST', 'JSON');
}
}复制代码
添加几个js函数
/* *
* 处理添加商品到购物车的反馈信息
*/
function addToCartResp ** e_ajax(result) {
if (result.error > 0) {
// 如果需要缺货登记，跳转
if (result.error == 2) {
if (confirm(result.message)) {
location.href = 'user.php?act=add_booking&id=' + result.goods_id + '&spec=' + result.product_spec;
}
//opendiv_booking();
}
// 没选规格，弹出属性选择框
else if (result.error == 6) {
openSpeDiv(result.message, result.goods_id, result.parent);
} else {
alert(result.message);
}
} else {
var cartInfo = document.getElementById('ECS_CARTINFO');
var cart_url = 'flow.php?step=cart';
if (cartInfo) {
cartInfo.innerHTML = result.content;
}
if (result.one_step_buy == '1') {
location.href = cart_url;
} else {
switch (result.confirm_type) {
case '1':
if (confirm(result.message))
location.href = cart_url;
break;
case '2':
if (!confirm(result.message))
location.href = cart_url;
break;
case '3':
divTipmiddle(result);
//refresh_cart();
document.getElementById('jdiv').innerHTML = result.cj;
break;
default:
break;
}
}
}
}
//购物车提示框JS
function closeTipBox() {
document.getElementById('cartSureBox').style.display = "none";
}
function divTipmiddle(result) {
openTipBox(result);
var a = document.getElementById("cartSureBox");
a.style.left = (document.body.clientWidth / 2 - a.clientWidth / 2 + 245) + "px";
}
function openTipBox(result) {
document.getElementById('ECS_GOODS_PRICE').innerHTML = result.goods_price;
document.getElementById('ECS_GOODS_NUMBER').innerHTML = result.goods_number;
document.getElementById('cartSureBox').style.display = "block";
}
function opendiv_booking() {
document.getElementById('buyTip2').style.display = "block";
}
//购物车提示框JS
function closeTipBox() {
document.getElementById('cartSureBox').style.display = "none";
}复制代码
打开flow.php 167行左右添加 /* 取得商品列表，计算合计 */
$cart_goods = get_cart_goods();
//$smarty->assign('total', $cart_goods['total']);
$result['goods_price'] = $cart_goods['total']['goods_price'];
$result['goods_number'] = $cart_goods['total']['real_goods_count'];复制代码
根据以上操作可实现
实现方法：
goods.dwt页面 <a href="javascript：addToCart({$goods.goods_id},0,1)"><img src="images/bnt_cat.gif" /></a>和默认的链接有点点区别 大家对比添加
要显示的层添加到这个叶面的底部 <div class="cartSure" id="cartSureBox" style="display:none;">
<div class="btn"><a href="javascript：;">关闭</a></div>
<div class="mesgCon">
<h3>宝贝已成功添加到购物车！</h3>
<div>购物车共有<span id="ECS_GOODS_NUMBER"></span>种商品 合计：<span id="ECS_GOODS_PRICE"></span></div><br>
<input type="image" src="images/btn_pay.gif" />
</div>
</div>
复制代码
我把样式也贴出来 供大家参考
.cartSure{
position:absolute;
left:0;
top:545px;
width:405px;
height:90px;
z-index:999;
background:url(images/cartSure_bg.gif) 0 0 no-repeat;
font-size:12px;
}
.mesgCon{
float:left;
background:url(images/mesg.png) no-repeat 18px 9px;
color:#666;
line-height:21px;
padding:0 0 0 100px;
width:320px;
}
.mesgCon h3{
float:left;
width:320px;
color:#333;
font-size:14px;
margin:-1px 0 6px;
height:auto;
line-height:20px;
background:none;
text-align:left;
padding:0;
font-weight:bold;
}
.mesgCon input{float:left; margin:0 11px 0 0}
.mesgCon div{float:left; font-size:13px}
.mesgCon div span{font-size:14px; font-weight:bold; color:#F80}
.cartSure .btn{float:left; padding:5px; width:390px}
.cartSure .btn a{
background:url(images/close_bg.gif) no-repeat 0 0;
float:right;
height:13px;
overflow:hidden;
text-indent:-5000px;
width:38px;
}
.cartSure .btn a:hover{background-position:0 -12px}复制代码
打开js/common.js文件 修改 addToCart函数 修改后：
function addToCart(goodsId, parentId, is_ajax) {
var goods = new Object();
var spec_arr = new Array();
var fittings_arr = new Array();
var number = 1;
var formBuy = document.forms['ECS_FORMBUY'];
var quick = 0;
// 检查是否有商品规格
if (formBuy) {
spec_arr = getSelectedAttributes(formBuy);
if (formBuy.elements['number']) {
number = formBuy.elements['number'].value;
}
quick = 1;
}
goods.quick = quick;
goods.spec = spec_arr;
goods.goods_id = goodsId;
goods.number = number;
goods.parent = (typeof(parentId) == "undefined") ? 0 : parseInt(parentId);
if (is_ajax == 1) {
Ajax.call('flow.php?step=add_to_cart', 'goods=' + goods.toJS ** tring(), addToCartResp ** e_ajax, 'POST', 'JSON');
} else {
Ajax.call('flow.php?step=add_to_cart', 'goods=' + goods.toJS ** tring(), addToCartResp ** e, 'POST', 'JSON');
}
}复制代码
添加几个js函数
/* *
* 处理添加商品到购物车的反馈信息
*/
function addToCartResp ** e_ajax(result) {
if (result.error > 0) {
// 如果需要缺货登记，跳转
if (result.error == 2) {
if (confirm(result.message)) {
location.href = 'user.php?act=add_booking&id=' + result.goods_id + '&spec=' + result.product_spec;
}
//opendiv_booking();
}
// 没选规格，弹出属性选择框
else if (result.error == 6) {
openSpeDiv(result.message, result.goods_id, result.parent);
} else {
alert(result.message);
}
} else {
var cartInfo = document.getElementById('ECS_CARTINFO');
var cart_url = 'flow.php?step=cart';
if (cartInfo) {
cartInfo.innerHTML = result.content;
}
if (result.one_step_buy == '1') {
location.href = cart_url;
} else {
switch (result.confirm_type) {
case '1':
if (confirm(result.message))
location.href = cart_url;
break;
case '2':
if (!confirm(result.message))
location.href = cart_url;
break;
case '3':
divTipmiddle(result);
//refresh_cart();
document.getElementById('jdiv').innerHTML = result.cj;
break;
default:
break;
}
}
}
}
//购物车提示框JS
function closeTipBox() {
document.getElementById('cartSureBox').style.display = "none";
}
function divTipmiddle(result) {
openTipBox(result);
var a = document.getElementById("cartSureBox");
a.style.left = (document.body.clientWidth / 2 - a.clientWidth / 2 + 245) + "px";
}
function openTipBox(result) {
document.getElementById('ECS_GOODS_PRICE').innerHTML = result.goods_price;
document.getElementById('ECS_GOODS_NUMBER').innerHTML = result.goods_number;
document.getElementById('cartSureBox').style.display = "block";
}
function opendiv_booking() {
document.getElementById('buyTip2').style.display = "block";
}
//购物车提示框JS
function closeTipBox() {
document.getElementById('cartSureBox').style.display = "none";
}复制代码
打开flow.php 167行左右添加 /* 取得商品列表，计算合计 */
$cart_goods = get_cart_goods();
//$smarty->assign('total', $cart_goods['total']);
$result['goods_price'] = $cart_goods['total']['goods_price'];
$result['goods_number'] = $cart_goods['total']['real_goods_count'];复制代码
根据以上操作可实现
实现方法：
goods.dwt页面 <a href="javascript：addToCart({$goods.goods_id},0,1)"><img src="images/bnt_cat.gif" /></a>和默认的链接有点点区别 大家对比添加
要显示的层添加到这个叶面的底部 <div class="cartSure" id="cartSureBox" style="display:none;">
<div class="btn"><a href="javascript：;">关闭</a></div>
<div class="mesgCon">
<h3>宝贝已成功添加到购物车！</h3>
<div>购物车共有<span id="ECS_GOODS_NUMBER"></span>种商品 合计：<span id="ECS_GOODS_PRICE"></span></div><br>
<input type="image" src="images/btn_pay.gif" />
</div>
</div>复制代码
我把样式也贴出来 供大家参考
.cartSure{
position:absolute;
left:0;
top:545px;
width:405px;
height:90px;
z-index:999;
background:url(images/cartSure_bg.gif) 0 0 no-repeat;
font-size:12px;
}
.mesgCon{
float:left;
background:url(images/mesg.png) no-repeat 18px 9px;
color:#666;
line-height:21px;
padding:0 0 0 100px;
width:320px;
}
.mesgCon h3{
float:left;
width:320px;
color:#333;
font-size:14px;
margin:-1px 0 6px;
height:auto;
line-height:20px;
background:none;
text-align:left;
padding:0;
font-weight:bold;
}
.mesgCon input{float:left; margin:0 11px 0 0}
.mesgCon div{float:left; font-size:13px}
.mesgCon div span{font-size:14px; font-weight:bold; color:#F80}
.cartSure .btn{float:left; padding:5px; width:390px}
.cartSure .btn a{
background:url(images/close_bg.gif) no-repeat 0 0;
float:right;
height:13px;
overflow:hidden;
text-indent:-5000px;
width:38px;
}
.cartSure .btn a:hover{background-position:0 -12px}复制代码
打开js/common.js文件 修改 addToCart函数 修改后：
function addToCart(goodsId, parentId, is_ajax) {
var goods = new Object();
var spec_arr = new Array();
var fittings_arr = new Array();
var number = 1;
var formBuy = document.forms['ECS_FORMBUY'];
var quick = 0;
// 检查是否有商品规格
if (formBuy) {
spec_arr = getSelectedAttributes(formBuy);
if (formBuy.elements['number']) {
number = formBuy.elements['number'].value;
}
quick = 1;
}
goods.quick = quick;
goods.spec = spec_arr;
goods.goods_id = goodsId;
goods.number = number;
goods.parent = (typeof(parentId) == "undefined") ? 0 : parseInt(parentId);
if (is_ajax == 1) {
Ajax.call('flow.php?step=add_to_cart', 'goods=' + goods.toJS ** tring(), addToCartResp ** e_ajax, 'POST', 'JSON');
} else {
Ajax.call('flow.php?step=add_to_cart', 'goods=' + goods.toJS ** tring(), addToCartResp ** e, 'POST', 'JSON');
}
}复制代码
添加几个js函数
/* *
* 处理添加商品到购物车的反馈信息
*/
function addToCartResp ** e_ajax(result) {
if (result.error > 0) {
// 如果需要缺货登记，跳转
if (result.error == 2) {
if (confirm(result.message)) {
location.href = 'user.php?act=add_booking&id=' + result.goods_id + '&spec=' + result.product_spec;
}
//opendiv_booking();
}
// 没选规格，弹出属性选择框
else if (result.error == 6) {
openSpeDiv(result.message, result.goods_id, result.parent);
} else {
alert(result.message);
}
} else {
var cartInfo = document.getElementById('ECS_CARTINFO');
var cart_url = 'flow.php?step=cart';
if (cartInfo) {
cartInfo.innerHTML = result.content;
}
if (result.one_step_buy == '1') {
location.href = cart_url;
} else {
switch (result.confirm_type) {
case '1':
if (confirm(result.message))
location.href = cart_url;
break;
case '2':
if (!confirm(result.message))
location.href = cart_url;
break;
case '3':
divTipmiddle(result);
//refresh_cart();
document.getElementById('jdiv').innerHTML = result.cj;
break;
default:
break;
}
}
}
}
//购物车提示框JS
function closeTipBox() {
document.getElementById('cartSureBox').style.display = "none";
}
function divTipmiddle(result) {
openTipBox(result);
var a = document.getElementById("cartSureBox");
a.style.left = (document.body.clientWidth / 2 - a.clientWidth / 2 + 245) + "px";
}
function openTipBox(result) {
document.getElementById('ECS_GOODS_PRICE').innerHTML = result.goods_price;
document.getElementById('ECS_GOODS_NUMBER').innerHTML = result.goods_number;
document.getElementById('cartSureBox').style.display = "block";
}
function opendiv_booking() {
document.getElementById('buyTip2').style.display = "block";
}
//购物车提示框JS
function closeTipBox() {
document.getElementById('cartSureBox').style.display = "none";
}复制代码
打开flow.php 167行左右添加 /* 取得商品列表，计算合计 */
$cart_goods = get_cart_goods();
//$smarty->assign('total', $cart_goods['total']);
$result['goods_price'] = $cart_goods['total']['goods_price'];
$result['goods_number'] = $cart_goods['total']['real_goods_count'];永久地址：http://www.phprm.com/frame/php1005232.html
转载随意~请带上教程地址吧^^