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


}

轉載自:http://www.9958.pw/post/ecshop_cart_box