站长之家 - 站长资讯 - 易采站长站

当前位置: > 建站教程 > 源码教程 > CMS 教程 >

ECSHOP商品页加入购物车弹出浮动层-ECshop教程

2019-10-15 12:42 | 来源:易采站长站 | 编辑:admin |

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


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

ECSHOP商品页加入购物车弹出浮动层
  ECSHOP商品页加入购物车弹出浮动层           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商品页加入购物车弹出浮动层   5)   继续修改 /js/common.js 文件, 在文件的最末尾增加如下两段代码  ECSHOP商品页加入购物车弹出浮动层     /* * * 点击购物后弹出提示层 * 参数 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电商网店系统下载
软件语言:
简体/多国语言
软件授权:
个人免费

  • ECSHOP商品页仿淘宝AJAX效果-ECshop教程
  • ECSHOP用中文域名不能访问漏洞-ECshop教程
  • ECSHOP从一个空间转到另外空间-ECshop教程
  • ECSHOP商品页显示当前登录会员等级价格-ECshop教程
  • ECSHOP验证邮件后送积分-ECshop教程
  • ecshop后台商品列表显示商品缩略图-ECshop教程
  • 在ECSHOP商品详情页显示供货商-ECshop教程
  • ECSHOP商品页购买记录的每页条数如何修改-ECshop教程
  • ECSHOP添加最新交易滚动显示功能-ECshop教程
  • ecshop中如何实现用户名和邮箱都能登陆-ECshop教程
  • 网友评论

    关于我们 - 联系我们 - 广告服务 - 版权声明 - 人才招聘 - 友情链接 - 网站地图 - 帮助 - -

    CopyRight © 2010-2016 源码下载 easck.com , All Rights Reserved

    蒙公网安备 15052402000103号

    蒙ICP备14002389-1号