基于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 相关文章推荐
javascript实现的DES加密示例
Oct 30 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
Dec 19 Javascript
jQuery中wrapAll()方法用法实例
Jan 16 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
理解和运用JavaScript的闭包机制
Aug 13 Javascript
使用jquery.qrcode.js生成二维码插件
Oct 17 Javascript
EditPlus中的正则表达式 实战(2)
Dec 15 Javascript
微信小程序商品详情页规格属性选择示例代码
Oct 30 Javascript
Vue动态加载异步组件的方法
Nov 21 Javascript
Vue实现简单分页器
Dec 29 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
Sep 22 Javascript
js实现简易点击切换显示或隐藏
Nov 29 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中利用XML技术构造远程服务(下)
2006/10/09 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
PHP连接Access数据库的方法小结
2013/06/20 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
php无序树实现方法
2015/07/28 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
jquery索引在使用中的一些困惑
2013/10/24 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
2017/06/20 jQuery
vue 运用mock数据的示例代码
2017/11/07 Javascript
Vue.js 利用v-for中的index值实现隔行变色
2018/08/01 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
django 自定义过滤器(filter)处理较为复杂的变量方法
2019/08/12 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
详解django使用include无法跳转的解决方法
2020/03/19 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
关于Assembly命名空间的三个面试题
2015/07/23 面试题
勤俭节约倡议书
2014/04/14 职场文书
2014年社会实践活动总结范文
2014/04/29 职场文书
服务宗旨标语
2014/07/01 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
北大自主招生自荐信
2015/03/04 职场文书
横空出世观后感
2015/06/09 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers