ECSHOP添加购物车加图片飞入效果

时间:2023-10-25 16:17:20

为ECSHOP的添加购物车,加入图片飞入效果。
首先:
在goods.dwt中查找添加购物车按钮:
为添加购物车按钮加上id:
例如:
<a id="iproduct_{$goods.goods_id}"
href="javascript:{addToCart({$goods.goods_id})">

<img src="data:images/bnt_cat.gif"
/></a>
然后:在js中加入:
<script type="text/javascript">

var Cart = {
     
id: 'ECS_CARTINFO',
     
addProduct: function(cpid, num, t) {
//添加商品
var ops =
$("[id=iproduct_"+cpid+"]").parents("#goodsInfo").children(".goodsItem").find("[id=product_"+cpid+"]");

if(ops.length>0) {
   var nps =
ops.clone().css({"position":"absolute", "top": ops.offset().top,
"left": ops.offset().left, "z-index": 999999999}).show();
  
nps.appendTo("body").animate({top:$("#ECS_CARTINFO").offset().top,
left: $("#ECS_CARTINFO").offset().left, width: 50, height:50},
{duration: 1000,
          
callback: function(){}, complete:
function(){nps.remove();addToCart({$goods.goods_id});} });
}
var op =
$("[id=iproduct_"+cpid+"]").parents("#goodsInfo").children('.imgInfo').find("img:first");

if(op.length>0) {
    var np =
op.clone().css({"position":"absolute", "top": op.offset().top,
"left": op.offset().left, "z-index": 999999999}).show();
   
np.appendTo("body").animate({top:$("#ECS_CARTINFO").offset().top,
left: $("#ECS_CARTINFO").offset().left, width: 50, height:50},
{duration: 1000,
           
callback:function(){}, complete:
function(){np.remove();addToCart({$goods.goods_id});} });
}
      
}
    
}
    
$(function() {
$('[id^=iproduct_{$goods.goods_id}]').click(function() {
    var cpid =
this.id.replace('iproduct_{$goods.goods_id}','{$goods.goods_id}');

var
n=$('#number').val();
       
if(n!=null||n!=undefined) {
   
if(n<1) {n=1;}
Cart.addProduct(cpid, n, 0);
    }else{
Cart.addProduct(cpid, 1, 0);
    }
    return
false;
});
});
</script>
修改:
修改购物车函数:
   
添加购物车成功后:修改购物车显示信息:
回调函数后加入change_cart_info
   
在js中添加函数:
   
//ajax添加后更新购物车的显示信息
    function
change_cart_info(){
$.ajax({
type: "POST",
url: "flow.php",
data: "step=ajax_update_cart",
success:function(res){
$("#ECS_CARTINFO").html(res)
}
  })
    }
在flow.php中添加处理函数:

if ($_REQUEST['step'] == 'ajax_update_cart'){
// echo "ok";
    
$sql = 'SELECT SUM(goods_number) AS number, SUM(goods_price *
goods_number) AS amount' .
          
' FROM ' . $GLOBALS['ecs']->table('cart') .
          
" WHERE session_id = '" . SESS_ID . "' AND rec_type = '" .
CART_GENERAL_GOODS . "'";
    $row =
$GLOBALS['db']->GetRow($sql);

if
($row)
    {
       
$number = intval($row['number']);
       
$amount = floatval($row['amount']);
    }
    else
    {
       
$number = 0;
       
$amount = 0;
    }
    $str =
sprintf($GLOBALS['_LANG']['cart_info'], $number,
price_format($amount, false));

exit('<a href="flow.php" title="' .
$GLOBALS['_LANG']['view_cart'] . '">' . $str .
'</a>');
}

效果如图:
原始状态:
ECSHOP添加购物车加图片飞入效果

点击加入购物车:

起飞了:
ECSHOP添加购物车加图片飞入效果

降落了啊:
ECSHOP添加购物车加图片飞入效果