ECSHOP "加入購物車"彈窗的實現以及"直接購買"功能
阿新 • • 發佈：2019-01-04
一、加入購物車的彈窗
在ECSHOP商品詳情頁點“加入購物車”，直接在當前頁彈出一個漂亮的小視窗，效果如下圖：
此方法超級簡單，不需要修改php程式，也不需要在ECSHOP模板頁預設隱藏層，主要是修改 JS 檔案
1.首先將下面四個圖片下載到你網站的 /data/images/ 下面，注意，儲存圖片的時候不要重新命名，要用我原來的名字直接儲存
div_bg.gif
div_close.gif
div_hs.gif
div_gwc.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.開啟 /js/common.js，找到function addToCartResponse()中的
case '1' : if (confirm(result.message)) location.href = cart_url; break; case '2' : if (!confirm(result.message)) location.href = cart_url; break; case '3' : location.href = cart_url; break;
修改為
case '1' :
openDiv_ecshop120(result.content);
break;
case '2' :
openDiv_ecshop120(result.content);
break;
case '3' :
openDiv_ecshop120(result.content);
break;在檔案的最末尾增加如下兩段程式碼
function cancel_div_ecshop120(){ 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_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[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 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商品加入購物車的時候就不會直接進入購物車。這樣使用購物車非常不方便。我們為了既保持該頁面功能，又能進入購物車功能。所以增加了另外一個購買按扭
點購買之後。可以直接進入ecshop的購物車。這樣只牽涉到修改ecshop模板，對ecshop二次開發稍微修改就可以做到。
proQuikBuyBtn.jpg
1.goods.dwt中，新增
<a href="javascript:addToCart1({$goods.goods_id})" id="init_quick_register_complate"><img src="images/proQuikBuyBtn.jpg"></a>2.js/common.js，新增
function addToCart1(goodsId, parentId)
{
var goods = new Object();
var spec_arr = new Array();
var fittings_arr = new Array();
var number = 1;
var formBuy = document.forms['ECS_FORMBUY'];
var quick = 0;
// 檢查是否有商品規格
if (formBuy)
{
spec_arr = getSelectedAttributes(formBuy);
if (formBuy.elements['number'])
{
number = formBuy.elements['number'].value;
}
quick = 1;
}
goods.quick = quick;
goods.spec = spec_arr;
goods.goods_id = goodsId;
goods.number = number;
goods.parent = (typeof(parentId) == "undefined") ? 0 : parseInt(parentId);
Ajax.call('flow.php?step=add_to_cart1', 'goods=' + goods.toJSONString(), addToCartResponse1, 'POST', 'JSON');
}
function addToCartResponse1(result)
{
if (result.error > 0)
{
// 如果需要缺貨登記，跳轉
if (result.error == 2)
{
if (confirm(result.message))
{
location.href = 'user.php?act=add_booking&id=' + result.goods_id + '&spec=' + result.product_spec;
}
}
// 沒選規格，彈出屬性選擇框
else if (result.error == 6)
{
openSpeDiv(result.message, result.goods_id, result.parent);
}
else
{
alert(result.message);
}
}
else
{
var cartInfo = document.getElementById('ECS_CARTINFO');
var cart_url = 'flow.php?step=cart';
if (cartInfo)
{
cartInfo.innerHTML = result.content;
}
location.href = cart_url;
}
}3.flow.php中，新增
elseif ($_REQUEST['step'] == 'add_to_cart1')
{
include_once('includes/cls_json.php');
$_POST['goods'] = json_str_iconv($_POST['goods']);
if (!empty($_REQUEST['goods_id']) && empty($_POST['goods']))
{
if (!is_numeric($_REQUEST['goods_id']) || intval($_REQUEST['goods_id']) <= 0)
{
ecs_header("Location:./\n");
}
$goods_id = intval($_REQUEST['goods_id']);
exit;
}
$result = array('error' => 0, 'message' => '', 'content' => '', 'goods_id' => '');
$json = new JSON;
if (empty($_POST['goods']))
{
$result['error'] = 1;
die($json->encode($result));
}
$goods = $json->decode($_POST['goods']);
/* 檢查：如果商品有規格，而post的資料沒有規格，把商品的規格屬性通過JSON傳到前臺 */
if (empty($goods->spec) AND empty($goods->quick))
{
$sql = "SELECT a.attr_id, a.attr_name, a.attr_type, ".
"g.goods_attr_id, g.attr_value, g.attr_price " .
'FROM ' . $GLOBALS['ecs']->table('goods_attr') . ' AS g ' .
'LEFT JOIN ' . $GLOBALS['ecs']->table('attribute') . ' AS a ON a.attr_id = g.attr_id ' .
"WHERE a.attr_type != 0 AND g.goods_id = '" . $goods->goods_id . "' " .
'ORDER BY a.sort_order, g.attr_price, g.goods_attr_id';
$res = $GLOBALS['db']->getAll($sql);
if (!empty($res))
{
$spe_arr = array();
foreach ($res AS $row)
{
$spe_arr[$row['attr_id']]['attr_type'] = $row['attr_type'];
$spe_arr[$row['attr_id']]['name'] = $row['attr_name'];
$spe_arr[$row['attr_id']]['attr_id'] = $row['attr_id'];
$spe_arr[$row['attr_id']]['values'][] = array(
'label' => $row['attr_value'],
'price' => $row['attr_price'],
'format_price' => price_format($row['attr_price'], false),
'id' => $row['goods_attr_id']);
}
$i = 0;
$spe_array = array();
foreach ($spe_arr AS $row)
{
$spe_array[]=$row;
}
$result['error'] = ERR_NEED_SELECT_ATTR;
$result['goods_id'] = $goods->goods_id;
$result['parent'] = $goods->parent;
$result['message'] = $spe_array;
die($json->encode($result));
}
}
/* 檢查：商品數量是否合法 */
if (!is_numeric($goods->number) || intval($goods->number) <= 0)
{
$result['error'] = 1;
$result['message'] = $_LANG['invalid_number'];
}
/* 更新：購物車 */
else
{
// 更新：新增到購物車
if (addto_cart($goods->goods_id, $goods->number, $goods->spec, $goods->parent))
{
if ($_CFG['cart_confirm'] > 2)
{
$result['message'] = '';
}
else
{
$result['message'] = $_CFG['cart_confirm'] == 1 ? $_LANG['addto_cart_success_1'] : $_LANG['addto_cart_success_2'];
}
$result['content'] = insert_cart_info();
$result['one_step_buy'] = $_CFG['one_step_buy'];
}
else
{
$result['message'] = $err->last_message();
$result['error'] = $err->error_no;
$result['goods_id'] = stripslashes($goods->goods_id);
if (is_array($goods->spec))
{
$result['product_spec'] = implode(',', $goods->spec);
}
else
{
$result['product_spec'] = $goods->spec;
}
}
}
$result['confirm_type'] =3;
die($json->encode($result));
}