基于JavaScript实现添加到购物车效果附源码下载


Posted in Javascript onAugust 22, 2016

我们有很多种方法实现将商品添加到购物车,通常的做法是点击“添加到购物车”按钮,会跳转到购物车,在购物车里可以点击“结算”按钮进行结算。而今天我给大家介绍一个更友好的解决方案。

基于JavaScript实现添加到购物车效果附源码下载

查看演示 下载源码

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

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); 
} 
}

以上所述是小编给大家介绍的基于JavaScript实现添加到购物车效果附源码下载,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
List the Codec Files on a Computer
Jun 11 Javascript
图片连续滚动代码[兼容IE/firefox]
Jun 11 Javascript
ajax的hide隐藏问题解决方法
Dec 11 Javascript
求数组最大最小值方法适用于任何数组
Aug 16 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
May 22 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
angularJS自定义directive之带参方法传递详解
Oct 09 Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 Javascript
通过js给网页加上水印背景实例
Jun 17 Javascript
利用原生JS自动生成文章标题树的实例
Aug 22 #Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 #Javascript
JavaScript代码里的判断小结
Aug 22 #Javascript
angularjs 源码解析之scope
Aug 22 #Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 #Javascript
js严格模式总结(分享)
Aug 22 #Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 #Javascript
You might like
PHP的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
php实现的二分查找算法示例
2017/06/20 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
原生Javascript插件开发实践
2017/01/09 Javascript
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
Python sqlite3事务处理方法实例分析
2017/06/19 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
Python3批量生成带logo的二维码方法
2019/06/24 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
python的pstuil模块使用方法总结
2019/07/26 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
Noon埃及:埃及在线购物
2019/11/26 全球购物
学前教育专业毕业生自荐信
2013/10/03 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
企业口号大全
2014/06/12 职场文书
2014年销售部工作总结
2014/12/01 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
带你了解Java中的ForkJoin
2022/04/28 Java/Android