在ECSHOP商品详情页点加入购物车,直接在当前页弹出一个漂亮的小窗口, 效果如下图: 此方法超级简单,不需要修改php程序,也不需要在ECSHOP模板页预设隐藏层,主要是修改 JS 文件

在ECSHOP商品详情页点“加入购物车”,直接在当前页弹出一个漂亮的小窗口,   效果如下图:    ECSHOP商品页加入购物车弹出浮动层  ECSHOP 购物车 浮动层 第1张         此方法超级简单,不需要修改php程序,也不需要在ECSHOP模板页预设隐藏层,主要是修改 JS 文件    1)   首先将下面四个图片下载到你网站的 /data/images/  下面, 注意,保存图片的时候不要重命名,要用我原来的名字直接保存 
  ECSHOP商品页加入购物车弹出浮动层  ECSHOP 购物车 浮动层 第2张


ECSHOP商品页加入购物车弹出浮动层  ECSHOP 购物车 浮动层 第3张

ECSHOP商品页加入购物车弹出浮动层  ECSHOP 购物车 浮动层 第4张
  ECSHOP商品页加入购物车弹出浮动层  ECSHOP 购物车 浮动层 第5张           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';         4)   打开 /js/common.js    找到 下图所示代码    ECSHOP商品页加入购物车弹出浮动层  ECSHOP 购物车 浮动层 第6张   修改为:    ECSHOP商品页加入购物车弹出浮动层  ECSHOP 购物车 浮动层 第7张   5)   继续修改 /js/common.js 文件, 在文件的最末尾增加如下两段代码  ECSHOP商品页加入购物车弹出浮动层  ECSHOP 购物车 浮动层 第8张     /* * * 点击购物后弹出提示层 * 参数 cartinfo:购物车信息 */ function openDiv_ECSHOP120(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)   {     sel_obj.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_ecshop120()" ><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_ecshop120()"><<继续购物</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商品页加入购物车弹出浮动层

发表评论

您需要后才能发表评论