jQuery实现炫酷的加入购物车相关操作效果

购物车是隐藏不可见的，当用户点击添加到购物车按钮后，商品信息会添加到购物车，购物车会以按钮的形式出现在页面右下角，点击按钮则会展开购物车，显示购物车中的商品信息，同时也可以对购物车中的商品进行删除或者结算等操作。用户也可以暂时关闭购物车继续购物。

使用方法：

引入CSS样式文件（根据自身样式可调整）

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" href="css/style.css">

引入jQuery库文件、插件JS文件

<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js">script>
<script src="js/main.js">script>

HTML部分

HTML结构主要包括两部分，第一部分是商品列表中的“添加到购物车”按钮，如下代码，我们使用data-*属性将商品的id，图片、名称、价格等信息一并带上。

<a href="#0" class="btn btn-success add-button" data-price="3669.00" data-proid="1" data-proname="华为P9" data-proimg="img/huawei_p9.jpg">添加到购物车a>

第二部分是购物车，购物车部分包括触发购物车以及购物车统计部分 .cd-cart-trigger和购物车主体内容部分.cd-cart。

<div class="cd-cart-container empty"> 
    <a href="#0" class="cd-cart-trigger"> 
        购物车 
        <ul class="count">  
            <li>0li> 
            <li>0li> 
        ul>  
    a> 
 
    <div class="cd-cart"> 
        <div class="wrapper"> 
            <header> 
                <h2>购物车h2> 
                <span class="undo">已删除 <a href="#0">恢复a>span> 
            header> 
             
            <div class="body"> 
                <ul> 
                     
                ul> 
            div> 
 
            <footer> 
                <a href="#0" class="checkout"><em>结算 - ￥<span>0span>em>a> 
            footer> 
        div> 
    div> 
div>

在div.body元素里的ul列表默认是空的，它是用来显示购物车的商品列表信息的，它的大致结构如下，它是由Javascript动态插入的。

<div class="body"> 
    <ul> 
        <li class="product"> 
            <div class="product-image"> 
                <a href="#0"><img src="img/pro.jpg" alt="placeholder">a> 
            div> 
  
            <div class="product-details"> 
                <h3><a href="#0">商品名称a>h3> 
  
                <span class="price">￥3999.99span> 
  
                <div class="actions"> 
                    <a href="#0" class="delete-item">删除a> 
  
                    <div class="quantity"> 
                        <label for="cd-product-'+ productId +'">件数label> 
                        <span class="select"> 
                            <span class="select">x<i id="cd-product-'+proid+'">1i>span> 
                        span> 
                    div> 
                div> 
            div> 
        li> 
  
    ul> 
div>

CSS部分在本文不展示了，大家可以下载源码中的css/style.css查看。

Javascript部分讲解

本实例代码是基于jQuery，因此需要提前加载jQUery库文件。

当用户点击按钮.add-button后，触发函数addProduct()，将商品信息插入到 .body > ul中。

function addProduct(proname,proid,price,proimg) { 
    var quantity = $("#cd-product-"+proid).text(); 
    var select='',productAdded=''; 
     
    if(quantity==''){ 
        var select = '<span class="select">x<i id="cd-product-'+proid+'">1i>span>'; 
        var productAdded = $('<li class="product"><div class="product-image"><a href="#0"><img src="'+proimg+'" alt="placeholder">a>div><div class="product-details"><h3><a href="#0">'+proname+'a>h3><span class="price">￥'+price+'span><div class="actions"><a href="#0" class="delete-item">删除a><div class="quantity"><label for="cd-product-'+ proid +'">件数label>'+select+'div>div>div>li>'); 
        cartList.prepend(productAdded); 
    }else{ 
        quantity = parseInt(quantity); 
        $("#cd-product-"+proid).html(quantity+1); 
    } 
}

在购物车中的操作，如删除商品、恢复商品以及更改商品件数会导致结算总金额变动，因此在函数updateCartCount()和updateCartTotal()中会实时触发相关变动。好了，具体的javascript代码请下载源码查看js/main.js。