基于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的目的分析
Jan 05 Javascript
将string解析为json的几种方式小结
Nov 11 Javascript
javascript中万恶的function实例分析
May 25 Javascript
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
jQuery - css() 方法示例详解
Jan 16 Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 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的五种设计模式
2012/09/05 PHP
解析php如何将日志写进syslog
2013/06/28 PHP
php 基础函数
2017/02/10 PHP
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
JQuery 文本框使用小结
2010/05/22 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
jQuery事件对象总结
2016/10/17 Javascript
JavaScript定义全局对象的方法示例
2017/01/12 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
vue 项目build错误异常的解决方法
2019/04/22 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
python队列queue模块详解
2018/04/27 Python
用python编写第一个IDA插件的实例
2018/05/29 Python
PySide和PyQt加载ui文件的两种方法
2019/02/27 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
django实现用户注册实例讲解
2019/10/30 Python
Python解析json代码实例解析
2019/11/25 Python
Python FFT合成波形的实例
2019/12/04 Python
python 使用shutil复制图片的例子
2019/12/13 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
精美的手工家居和生活用品:Nkuku
2019/11/01 全球购物
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
新闻编辑求职信
2014/04/09 职场文书
学校志愿者活动总结
2014/06/27 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
检讨书大全
2015/01/27 职场文书
劳资员岗位职责
2015/02/13 职场文书
MySQL日期时间函数知识汇总
2022/03/17 MySQL