基于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脚本
Aug 04 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
Aug 29 Javascript
js页面跳转常用的几种方式
Nov 25 Javascript
javascript验证上传文件的类型限制必须为某些格式
Nov 14 Javascript
javascript实现存储hmtl字符串示例
Apr 25 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 Javascript
Node.js使用Express.Router的方法
Nov 14 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
Feb 28 Javascript
了解JavaScript中的选择器
May 24 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 Javascript
vue组件中节流函数的失效的原因和解决方法
Dec 02 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 CURL CURLOPT参数说明(curl_setopt)
2013/09/30 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
浅谈javascript中字符串String与数组Array
2014/12/31 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
详细分析Javascript中创建对象的四种方式
2016/08/17 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
完美的js图片轮换效果
2017/02/05 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
解决vue-cli3 使用子目录部署问题
2018/07/19 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
Python实现感知机(PLA)算法
2017/12/20 Python
python进行文件对比的方法
2018/12/24 Python
带你认识Django
2019/01/15 Python
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
cProfile Python性能分析工具使用详解
2019/07/22 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
教师找工作推荐信
2013/11/23 职场文书
优秀食品类广告词
2014/03/19 职场文书
春节联欢晚会主持词
2014/03/24 职场文书
红色影片观后感
2015/06/18 职场文书
教师节随笔
2015/08/15 职场文书
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android