添加到购物车相关操作
2016-08-21 22:06
1486 查看
我们有很多种方法实现将商品添加到购物车,通常的做法是点击“添加到购物车”按钮,会跳转到购物车,在购物车里可以点击“结算”按钮进行结算。而今天我给大家介绍一个更友好的解决方案。
查看演示 下载源码
默认情况下,购物车是隐藏不可见的,当用户点击添加到购物车按钮后,商品信息会添加到购物车,购物车会以按钮的形式出现在页面右下角,点击按钮则会展开购物车,显示购物车中的商品信息,同时也可以对购物车中的商品进行删除或者结算等操作。用户也可以暂时关闭购物车继续购物。
当用户点击按钮.add-button后,触发函数addProduct(),将商品信息插入到 .body > ul中。
查看演示 下载源码
默认情况下,购物车是隐藏不可见的,当用户点击添加到购物车按钮后,商品信息会添加到购物车,购物车会以按钮的形式出现在页面右下角,点击按钮则会展开购物车,显示购物车中的商品信息,同时也可以对购物车中的商品进行删除或者结算等操作。用户也可以暂时关闭购物车继续购物。
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"> <!-- cart items count --> <li>0</li> <li>0</li> </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> <!-- 此部分是购物车商品部分,由javascript动态插入 --> </ul> </div> <footer> <a href="#0" class="checkout"><em>结算 - ¥<span>0</span></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.99</span> <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+'">1</i></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+'">1</i></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。
相关文章推荐
- 顺序表的相关操作+删除+添加+遍历+逆序
- MySQL添加触发器相关操作
- 购物车删除的相关操作
- 数据库的相关操作:如连接、查询、添加、删除、修改、分页显示
- CentOS7为firewalld添加开放端口及相关操作
- Linux 添加用户相关操作
- linux驱动摸索 --arm平台上添加操作磁盘相关命令
- cocos2d-x学习笔记【三】添加精灵及相关操作
- centos下添加管理员组和添加管理员用户及相关操作
- 4、kvm相关网卡操作(添加、删除)
- oracle 修改表名、列名、字段类型、添加表列、删除表列 等相关操作
- 链式链表的相关操作+删除+添加+逆序+遍历
- MFC List Control控件添加单元格编辑和单元格下拉列表项以适用于数据库相关操作
- 大论文中对参考文献添加操作相关总结
- CentOS7为firewalld添加开放端口及相关操作
- git 添加review的相关操作
- Centos7 防火墙相关操作以及 添加开放端口
- centos添加新的端口及防火墙相关操作
- oracle 修改表名、列名、字段类型、添加表列、删除表列 等相关操作
- 在GridView控件中添加相关的操作字段/操作按钮