ECSHOP商品页加入购物车弹出仿淘宝效果
2012-05-22 11:20
363 查看
在ECSHOP商品详情页点“加入购物车”,直接在当前页弹出一个漂亮的小窗口,
效果如下图:
此方法超级简单,不需要修改php程序,也不需要在ECSHOP模板页预设隐藏层,主要是修改 JS 文件
1)
首先将下面四个图片下载到你网站的 /data/images/ 下面
2)
以下修改以官方默认模板为例,打开 ECSHOP模板文件 /themes/default/goods.dwt
将
<li class="padd">
<a href="javascript:addToCart({$goods.goods_id})"><img src="images/bnt_cat.gif" /></a>
修改为
<li class="padd" style="position:relative;" id="gwc">
<a href="javascript:addToCart({$goods.goods_id})"><img src="images/bnt_cat.gif" /></a>
3)
下面修改ECSHOP语言包文件,打开 /languages/zh_cn/common.php
找到
$_LANG['cart_info']
将它的值修改为
修改后是这个样子
4)
打开 /js/common.js
找到 下图所示代码
103 case '1' :
104 if (confirm(result.message)) location.href = cart_url;
105 break;
106 case '2' :
107 if (!confirm(result.message)) location.href = cart_url;
108 break;
109 case '3' :
110 location.href = cart_url;
并修改为
103 case '1' :
104 // if (confirm(result.message)) location.href = cart_url;
openDIV_eshop(result.content);
105 break;
106 case '2' :
107 // if (!confirm(result.message)) location.href = cart_url;
openDIV_eshop(result.content);
108 break;
109 case '3' :
110 // location.href = cart_url;
openDIV_eshop(result.content);
继续修改 /js/common.js 文件, 在文件的最末尾增加如下两段代码
function cncel_div_ecshop()
{
document.getElementByle('gwc').removechile(docele('spediv'))
var i=0;
val sel_obj= docunment.getElementsByTagName('select');
while(sel_obj[i])
{
sel_obk[i].style.visibility='visible';
i++;
}
}
/*
*
* 点击购物后弹出提示层
* 参数 cartinfo:购物车信息
*/
function openDiv_ecshop(cartinfo)
{
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 = "289px";
newDiv.style.height = "120px";
newDiv.style.top = "-120px";
newDiv.style.left = "1px";
newDiv.style.overflow = "hidden";
newDiv.style.background = "#FFF";
newDiv.style.border = "0px solid #59B0FF";
newDiv.style.padding = "0px";
//生成层内内容
newDiv.innerHTML = '<div style="text-align:center;height:120px;line-height:25px;width:289px;background:url(/data/images/div_bg.gif) no-repeat 0 0;overflow:hidden;"><table width="280px" cellpading=0 cellspacing=0 align=center ><th style="height:30px;line-height:30px;text-align:right;"><a
href="javascript:cancel_div_ecshop()" ><img src="/data/images/div_close.gif" style="margin:5px 10px;"></a></th><tr><td align=center ><img src="/data/images/div_hs.gif" align=absmiddle> <font style="font-size:15px;font-weight:bold;">该商品已成功放入购物车</font><br>'+cartinfo
+'<br><a href="javascript:cancel_div_ecshop()"><<继续购物</a> <a href="flow.php"> <img src="/data/images/div_gwc.gif" align=absmiddle></a></td></tr>';
newDiv.innerHTML += '<tr><td align=center></td></tr></table></div>';
document.getElementById('gwc').appendChild(newDiv);
}
效果如下图:
此方法超级简单,不需要修改php程序,也不需要在ECSHOP模板页预设隐藏层,主要是修改 JS 文件
1)
首先将下面四个图片下载到你网站的 /data/images/ 下面
2)
以下修改以官方默认模板为例,打开 ECSHOP模板文件 /themes/default/goods.dwt
将
<li class="padd">
<a href="javascript:addToCart({$goods.goods_id})"><img src="images/bnt_cat.gif" /></a>
修改为
<li class="padd" style="position:relative;" id="gwc">
<a href="javascript:addToCart({$goods.goods_id})"><img src="images/bnt_cat.gif" /></a>
3)
下面修改ECSHOP语言包文件,打开 /languages/zh_cn/common.php
找到
$_LANG['cart_info']
将它的值修改为
购物车共 %d 件商品,总计 %s |
$_LANG['cart_info'] = '购物车共 %d 件商品,总计 %s'; |
打开 /js/common.js
找到 下图所示代码
103 case '1' :
104 if (confirm(result.message)) location.href = cart_url;
105 break;
106 case '2' :
107 if (!confirm(result.message)) location.href = cart_url;
108 break;
109 case '3' :
110 location.href = cart_url;
并修改为
103 case '1' :
104 // if (confirm(result.message)) location.href = cart_url;
openDIV_eshop(result.content);
105 break;
106 case '2' :
107 // if (!confirm(result.message)) location.href = cart_url;
openDIV_eshop(result.content);
108 break;
109 case '3' :
110 // location.href = cart_url;
openDIV_eshop(result.content);
继续修改 /js/common.js 文件, 在文件的最末尾增加如下两段代码
function cncel_div_ecshop()
{
document.getElementByle('gwc').removechile(docele('spediv'))
var i=0;
val sel_obj= docunment.getElementsByTagName('select');
while(sel_obj[i])
{
sel_obk[i].style.visibility='visible';
i++;
}
}
/*
*
* 点击购物后弹出提示层
* 参数 cartinfo:购物车信息
*/
function openDiv_ecshop(cartinfo)
{
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 = "289px";
newDiv.style.height = "120px";
newDiv.style.top = "-120px";
newDiv.style.left = "1px";
newDiv.style.overflow = "hidden";
newDiv.style.background = "#FFF";
newDiv.style.border = "0px solid #59B0FF";
newDiv.style.padding = "0px";
//生成层内内容
newDiv.innerHTML = '<div style="text-align:center;height:120px;line-height:25px;width:289px;background:url(/data/images/div_bg.gif) no-repeat 0 0;overflow:hidden;"><table width="280px" cellpading=0 cellspacing=0 align=center ><th style="height:30px;line-height:30px;text-align:right;"><a
href="javascript:cancel_div_ecshop()" ><img src="/data/images/div_close.gif" style="margin:5px 10px;"></a></th><tr><td align=center ><img src="/data/images/div_hs.gif" align=absmiddle> <font style="font-size:15px;font-weight:bold;">该商品已成功放入购物车</font><br>'+cartinfo
+'<br><a href="javascript:cancel_div_ecshop()"><<继续购物</a> <a href="flow.php"> <img src="/data/images/div_gwc.gif" align=absmiddle></a></td></tr>';
newDiv.innerHTML += '<tr><td align=center></td></tr></table></div>';
document.getElementById('gwc').appendChild(newDiv);
}
相关文章推荐
- ECSHOP商品页加入购物车弹出层仿淘宝效果
- ECSHOP商品页加入购物车弹出层仿淘宝效果
- ECSHOP商品页,加入购物车弹出浮动层,仿淘宝效果
- 仿淘宝商品详细页加入购物车效果
- ecshop仿淘宝加入购物车弹出框【支持任何页面】淡出淡隐固定屏幕-兼容ie
- ecshop仿淘宝加入购物车弹出框【支持任何页面】淡出淡隐固定屏幕-兼容ie
- iOS 仿淘宝加入购物车前选择尺寸,规格弹窗的向内凹陷折叠动画效果和标签流布局
- ecshop购物车实现弹出框效果
- ECSHOP商品详情页颜色、尺码 选择仿淘宝效果
- ECSHOP 小程序底部滑出效果,淡入效果,底部菜单导航,加入购物车
- Android仿淘宝加入购物车布局效果
- iOS 仿淘宝加入购物车前选择尺寸,规格弹窗的向内凹陷折叠动画效果和标签流布局
- Android动画初探-实现淘宝加入加入购物车的效果
- ecshop加入购物车效果(各个页面)
- Android将商品加入购物车的动画效果
- 源码推荐(04.05):仿天天动听客户端,仿淘宝点击加入购物车前选择尺码、颜色信息的弹出视图
- iOS 仿淘宝加入购物车 向内凹陷折叠动画效果
- python爬取淘宝商品信息并加入购物车
- ecshop 商品颜色尺寸仿淘宝选择功能教程(2.7.0版本)
- ECSHOP购物车页面显示商品简单描述