所属分类:网页特效-输入/选择框/联动
购物车是隐藏不可见的,当用户点击添加到购物车按钮后,商品信息会添加到购物车,购物车会以按钮的形式出现在页面右下角,点击按钮则会展开购物车,显示购物车中的商品信息,同时也可以对购物车中的商品进行删除或者结算等操作。用户也可以暂时关闭购物车继续购物。
使用方法:
引入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。