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

在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

将

 代码如下 复制代码

 

<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

找到 下图所示代码

 代码如下 复制代码
 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 = '<div id="gwc_div" name="gwc_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:cncel_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 +'<a href="javascript:cncel_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);

}
时间： 2024-10-08 14:22:25

ECSHOP商品页加入购物车弹出层仿淘宝效果的相关文章

jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果_jquery

本文实例讲述了jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的弹出层,点击文字后从网页右上角飞入,也可以说是滑入,此类弹出框带有关闭按钮,可自定义标题栏和弹出框内容,风格自己可定义,代码简洁,基于jquery实现,学习参考价值大,也可拿出即用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fade-in-title-info-stye-alert-code

js写一个弹出层并锁屏效果实现代码_javascript技巧

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

求 商品规格选择-求JQ或JS仿淘宝商品详情选择规格颜色等功能

问题描述 求JQ或JS仿淘宝商品详情选择规格颜色等功能 选择要求:有几个属性,如 尺寸和颜色,尺寸:M.L.XL.XXL 等,颜色:黑色.白色.黄色.红色等,其每个属性都有关联,如 首选M,颜色除黑色或其他外都能选择:如首选 黄色,尺寸除XXL或其他外都能选择. 自己写的有问题.代码放上一部分.已生成的数组求值. HTML:↓ <div class="sys_item_spec"> <dl class="clearfix iteminfo_parameter

AlertBox 弹出层信息提示框效果实现步骤_javascript技巧

在仿Lightbox效果中,已经基本实现了这个效果,这次主要改进了ie6在fixed时的抖动问题. 此外,还增加了一个用来兼容ie6的fixed的方法,覆盖层也重新"包装",程序也改成组件的结构. 兼容:ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0 效果预览 http://demo.jb51.net/js/AlertBox/index.htm 程序说明 [实现原理] 弹出层的基本原理在仿Lightbox效果中已

javscript 漂亮的弹出层图片预览效果

JS实现常见的TAB、弹出层效果(TAB标签，斑马线，遮罩层等)_javascript技巧

本文实例讲述了JS实现常见的TAB.弹出层效果.分享给大家供大家参考.具体如下: 这里演示tab活页夹(网页标签),斑马线,遮罩层.弹出层的简单实现,里面的JS文件,可下拉保存为JS代码调用即可,也可以拷贝在本网页中使用.这个小网页囊括了目前网上流行的风页标签.弹出层以及斑马线效果,很实用啦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-tab-alert-bq-style-demo/ 具体代码如下: <!DOCTYPE html PU

js实现div弹出层的方法

 话说现在各种插件出来了要实现弹出层真是太简单了,但个人有时觉得那些插件不实用经常会找一些纯js原生态的东西,下面来给各位分享一个原生太js div弹出层实例,有需要的朋友可一起看看. 这个不用多说了,直接贴代码吧.有码有注释: 代码如下: /*  * 弹出DIV层 */ function showDiv() { var Idiv     = document.getElementById("Idiv"); var mou_head = document.getElementById(

原生js的弹出层且其内的窗口居中_javascript技巧

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta charset="UTF-8

js实现仿Discuz文本框弹出层效果_javascript技巧

本文实例讲述了js实现仿Discuz文本框弹出层效果.分享给大家供大家参考.具体如下: 这是一个在经典论坛曾经热讨论的问题,记得在QQ邮箱里也有类似功能,Discuz7.0论坛里同样也有,当你的鼠标单击文本框的时候,会弹出一个包含文字.图片.表单无素的DIV层,里面的元素都可以进行操作,很方便,选中的值会自动添加到文本框内.本代码经过了多次修正,没有进行过多美化,你美工好的话可以自己美化. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//D