基于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 相关文章推荐
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 Javascript
JS 数字转换研究总结
Dec 26 Javascript
Javascript实现的Map集合工具类完整实例
Jul 31 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
VUE安装使用教程详解
Jun 03 Javascript
详解vue 组件
Jun 11 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
利用原生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与paypal整合方法
2010/11/28 PHP
php获取中文拼音首字母类和函数分享
2014/04/24 PHP
php多任务程序实例解析
2014/07/19 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
thinkPHP5框架实现多数据库连接,跨数据连接查询操作示例
2019/05/29 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
ext form 表单提交数据的方法小结
2008/08/08 Javascript
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
使用console进行性能测试
2015/04/27 Javascript
jQuery实现元素的插入
2017/02/27 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
2019/09/12 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
2020/08/25 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
Python深入学习之闭包
2014/08/31 Python
在Django框架中运行Python应用全攻略
2015/07/17 Python
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
python使用RNN实现文本分类
2018/05/24 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android
SpringBoot详解执行过程
2022/07/15 Java/Android