ECSHOP商品页加入购物车弹出层仿淘宝效果

时间：2022-06-25 16:32:31 编辑：袖梨来源：一聚教程网

在ECSHOP商品详情页点“加入购物车”，直接在当前页弹出一个漂亮的小窗口，

效果如下图：

此方法超级简单，不需要修改php程序，也不需要在ECSHOP模板页预设隐藏层，主要是修改 JS 文件

1.首先将下面四个图片下载到你网站的 /data/images/ 下面

div_bg.gif

div_close.gif

div_gwc.gif

div_hs.gif

2.以下修改以官方默认模板为例，打开 ECSHOP模板文件 /themes/default/goods.dwt

将

代码如下

复制代码

javascript:addToCart({$goods.goods_id})">

修改为

3.下面修改ECSHOP语言包文件，打开 /languages/zh_cn/common.php

找到

代码如下	复制代码
$_LANG['cart_info']

将它的值修改为

购物车共 %d 件商品，总计 %s

修改后是这个样子

代码如下	复制代码
$_LANG['cart_info'] = '购物车共 %d 件商品，总计 %s';

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.getElementById('gwc').removeChild(docEle('speDiv')); var i=0; var sel_obj = document.getElementsByTagName('select'); while(sel_obj[i]) { sel_obj[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 = '

';
newDiv.innerHTML += '


该商品已成功放入购物车 '+cartinfo +'<<继续购物

';
document.getElementById('gwc').appendChild(newDiv);

}

推荐专题

最新下载

热门教程

ECSHOP商品页加入购物车弹出层仿淘宝效果

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程