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

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

(2012-03-26 12:14:49)

转载▼

标签： 杂谈

分类：ecshop

为ECSHOP的添加购物车，加入图片飞入效果。
首先：
在goods.dwt中查找添加购物车按钮：
为添加购物车按钮加上id：
例如：
<a id="iproduct_{$goods.goods_id}"href="javascript:{addToCart({$goods.goods_id})">
<img src="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}');
      varn=$('#number').val();
              if(n!=null||n!=undefined) {
      if(n<1) {n=1;}
Cart.addProduct(cpid, n, 0);
      }else{
Cart.addProduct(cpid, 1, 0);
      }
      returnfalse;
});
});
</script>
修改：
修改购物车函数：
      添加购物车成功后：修改购物车显示信息：
回调函数后加入change_cart_info
      在js中添加函数：
      //ajax添加后更新购物车的显示信息
      functionchange_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>');
}

效果如图：
原始状态：

点击加入购物车：

起飞了：

降落了啊：