四时宝库

程序员的知识宝库

2024年09月21日

干货!zencart网店系统实现无刷新更新购物车

Zencart是一款国外免费的电商网店开源软件，基于PHP语言，在国内有广泛的应用。优点很多，但也有不少缺点。其中有一个缺点是购物车不能无刷新更新，就是选择商品加入购物车后，程序要跳到另一页，才能更新购物车中的商品信息。

这里，小编提供一个能够不用重新刷新页面，就能在同一页面中更新购物车商品信息的方法。

第一步：在商品列表页（或者首页）中，在某个商品下面增加“加入购物车”按钮，该按钮的链接设为:

'<a rel="nofollow" href="javascript:void(0);" class="cart" onclick=addsession('ID')>' . zen_image_button(BUTTON_IMAGE_BUY_NOW, BUTTON_IN_CART_ALT) . '</a>'

第二步：在网站根目录下添加一个addsession.php文件，这个文件是用来更新购物车中的信息，内容如下：

<?php

require('includes/application_top.php');

if (!defined('IS_ADMIN_FLAG')) {

die('Illegal Access');

}

if ($session_started == false) {//取消cookie时

zen_redirect(zen_href_link(FILENAME_DEFAULT));

}

if (DISPLAY_CART == 'true') {

$goto = FILENAME_SHOPPING_CART;

$parameters = array('action', 'cPath', 'products_id', 'pid', 'main_page');//定义参数

} else {

$goto = FILENAME_DEFAULT."addsession.php";

$parameters = array('action', 'products_id');

}

$_SESSION['cart']->actionBuyNow($goto, $parameters);

?>

第三步：更改tpl_shopping_cart_header.php文件，更新购物车显示页面

<?php

$have_cargoes = $_SESSION['cart']->count_contents();

if ($have_cargoes > 0){//购物车内有商品时

$products = $_SESSION['cart']->get_products();

$qyn = sizeof($products);

}else{

$products = array();

$qyn = 0;

}

?>

<?php if ($have_cargoes > 0){//购物车图片 ?>

<span id="cart_pic"><img src="<?php echo $template->get_template_dir('.gif',DIR_WS_TEMPLATE, $current_page_base,'images') ?>/cart_full_icon.gif" width="66" height="80" alt="<?php echo BOX_HEADING_SHOPPING_CART; ?>"/></span>

<?php }else{ ?>

<span id="cart_pic"><img src="<?php echo $template->get_template_dir('.gif',DIR_WS_TEMPLATE, $current_page_base,'images') ?>/cart_empty_icon.gif" width="66" height="80" alt="<?php echo HEADER_SHOPPING_CART_EMPTY; ?>"/></span>

<?php }?>

<div id="cartBoxEmpty" onmouseover="setTimeout(showCart(), 400);">

<div id="fenjie1" style="display:none;"></div>

<div><?php echo HEADER_TONGJI; ?>(<b id="items" class="qiangdiao"><?php echo $qyn; ?></b>)<?php echo BOX_SHOPPING_CART_ITEM; ?>

</div>

<a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo MY_SHOPPING_CART ; ?></a>

<div id="animBoxCart" onmouseout="fullOutDiv();">

<div id="animBoxCartContent">

<div class="listProduct">

<?php

for ($i=0, $n=$qyn; $i<$n; $i++) {//列举每件商品start 2

$thelink[$i] = zen_href_link(zen_get_info_page($products[$i]["id"]),'&cPath='.zen_get_product_path($products[$i]["id"]).'&products_id='.zen_get_prid($products[$i]["id"]));

?>

<div class="perItem">

<div class="animBoxCartImage">

<a href="<?php echo $thelink[$i]; ?>" target="_blank"><?php echo zen_image(DIR_WS_IMAGES . $products[$i]["image"],$products[$i]["name"],"40px","40px"); ?></a>

</div>

<div class="animBoxCartName">

<span id="pn"><?php echo zen_dsubstr($products[$i]["name"],30,"..."); ?></span>&nbsp;<?php echo BOX_X_UNIT ?>&nbsp;<?php echo $products[$i]["quantity"]; ?>&nbsp;

<b class="qiangdiao">

<?php echo BOX_CURRENCIES_UNIT . number_format(zen_get_products_actual_price($products[$i]["id"]), 2, '.', '') * $products[$i]["quantity"]; ?>

</b>

</div>

</div>

<?php } //列举每件商品end 2 ?>

</div><!--listProduct end -->

<div id="heji">

<div class="animBoxCartLink"><?php echo HEADER_TONGJI .'<b id="qyn" class="qiangdiao">&nbsp;'. $qyn .'&nbsp;</b>'. BOX_SHOPPING_CART_ITEM ; ?></div>

<div class="animBoxCartTotal"><?php echo HEADER_CART_SUBTOTAL .'<span id="xiaoji">'. $currencies->format($_SESSION["cart"]->show_total()).'</span>'; ?>&nbsp;&nbsp;</div>

<br class="clearBoth" />

<div class="clearlink">

<a href="javascript:void(0);" onclick="clearSession();changPic();"><?php echo BOX_SHOPPING_CART_CLEAR; ?>&raquo;</a>

</div>

<?php if ($have_cargoes > 0){ ?>

<div class="animBoxCartTotal">

<a href="<?php echo zen_href_link(FILENAME_CHECKOUT_PAYMENT,"", "NONSSL");?>" target="_blank">

<?php } ?>

<span class="cart_total"><?php echo HEADER_TITLE_CHECKOUT; ?></span>

<?php if ($have_cargoes > 0){ ?>

</a>

<?php } ?>

</div>

</div>

</div>

</div>

<div id="fenjie2" style="display:none;"></div>

</div>

<script type="text/javascript">

function showCart(){

$("#animBoxCart").show();

$("#kongCart").show();

}

</script>

<script type="text/javascript">

function fullOutDiv(){

document.getElementById("animBoxCart").style.display="none";

}

function emptyOutDiv(){

document.getElementById("kongCart").style.display="none";

}

function changPic(){

document.getElementById("cart_pic").className="cart-icon empty";

}

</script>

<script type="text/javascript">

function clearSession(){

$.ajax({

url: "clearsession.php"

});

empty_src = '<img src="<?php echo $template->get_template_dir('.gif',DIR_WS_TEMPLATE, $current_page_base,'images') ?>/cart_empty_icon.gif" width="66" height="80" alt="<?php echo HEADER_SHOPPING_CART_EMPTY; ?>"/>';

$("#animBoxCart").html("<center><?php echo HEADER_SHOPPING_CART_EMPTY; ?></center>");

$("#kongCart").html("<center><?php echo HEADER_SHOPPING_CART_EMPTY; ?></center>");

$("#animBoxCart").show();

$("#items").html("0");

$("#cart_pic").html(empty_src);

}

</script>

<script type="text/javascript">

full_src = '<img src="<?php echo $template->get_template_dir('.gif',DIR_WS_TEMPLATE, $current_page_base,'images') ?>/cart_full_icon.gif" width="66" height="80" alt="<?php echo BOX_HEADING_SHOPPING_CART; ?>" />';

function addsession(id){

$.ajax({

url: "addsession.php?action=buy_now&products_id="+id,

data: "",

beforeSend: function(){

$('#tipr').show();

setTimeout(function(){

$('#tipr').hide();

},3000);

},

success: function(response) {

if(response.indexOf('<div id="cartBoxEmpty"') > 0 ){

tt = response.indexOf('<div id="fenjie1"');

pp = response.indexOf('<div id="fenjie2"')+46;

var str = response.substring(tt,pp);

}

$("#cartBoxEmpty").html(str);

$("#cart_pic").html(full_src);

$("#cartBoxEmpty").show();

$("#animBoxCart").show();

$("#kongCart").show();

}

});

}

function mouseClick(ev){

Ev= ev || window.event;

var mousePos = getMousePoint(ev);

document.getElementById("tipr").style.left = parseInt(mousePos.x-50)+'px';

document.getElementById("tipr").style.top = parseInt(mousePos.y+20)+'px';

}

function getMousePoint(ev) {

var x = y = 0,

doc = document.documentElement,

body = document.body;

if(!ev) ev=window.event;

if (window.pageYoffset) {

x = window.pageXOffset;

y = window.pageYOffset;

}else{

x = (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);

y = (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);

}

x += ev.clientX;

y += ev.clientY;

return {'x' : x, 'y' : y};

}

document.onmousemove = mouseClick;

</script>

至此，大功告成！

标签：javascript:void(0) 

作者:sishi88 , 分类:技术教程 , 浏览:3 , 评论:0

发表评论:

控制面板
您好，欢迎到访网站！
  查看权限
网站分类
最新留言
    友情链接