博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ECSHOP商品页加入购物车弹出层仿淘宝效果
阅读量:7116 次
发布时间:2019-06-28

本文共 2866 字,大约阅读时间需要 9 分钟。

hot3.png

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

效果如下图:

enter image description here

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

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

div_bg.gif

enter image description here

div_close.gif

enter image description here

div_gwc.gif

enter image description here

div_hs.gif

enter image description here

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

  • 修改为

  • 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);}

    转载自:

    转载于:https://my.oschina.net/u/1179286/blog/644115

    你可能感兴趣的文章
    面向对象----反射
    查看>>
    MyEclipse优化设置(最详细版本)
    查看>>
    Struts2笔记——struts常用标签
    查看>>
    限定phpmyadmin访问ip的简单实现方法
    查看>>
    Border边框布局
    查看>>
    python os.startfile python实现双击运行程序 python监控windows程序 监控进程不在时重新启动...
    查看>>
    python seq
    查看>>
    oracle查看相关用户表
    查看>>
    ACL终极详解
    查看>>
    JavaEE----登陆界面验证码实现
    查看>>
    Mysql数据库基础小实例 学员管理系统菜单
    查看>>
    回归测试
    查看>>
    Angular2中Input和Output
    查看>>
    VC下调试已发布软件
    查看>>
    [Aaronyang] 写给自己的WPF4.5 失传的第一本古老秘籍[多扩展显示器编程]
    查看>>
    Using ARR to setup a proxy
    查看>>
    十六、C# 常用集合类及构建自定义集合(使用迭代器)
    查看>>
    J2EE应用讲解(2)——Servlet基础理论
    查看>>
    Robot Framework(2)——简单运行案例
    查看>>
    河边的苹果
    查看>>