JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】


Posted in Javascript onOctober 17, 2016

本文实例讲述了JS+HTML5实现的前端购物车功能插件。分享给大家供大家参考,具体如下:

最近做一个商城,需要用到一个简答的购物车功能,当然,后端实现比较容易,,这里重点还是讲一下前端的JS插件。

从源代码里面没看出来,它叫啥,好像叫:ctshop .js,不管啦,反正我提供下载就好,我做了一些简单的修复,支持了中文

这个插件使用了HTML5的新特效:storage ,就是游览器数据库的功能,这跟之前把数据存在cookies里面原理是相识的,这样的好处在于用户刷新页面,数据还在,,又不需要跟后端进行数据交互。

create_storage_cart: function() {
 for (var t = this, e = t.storage_get(), a = 0, n = e.items.length; n > a; a++) {
  var i = e.items[a].id,
  r = e.items[a].name,
  s = e.items[a].price,
  c = e.items[a].input;
  t.cart.append('<li class="animated ' + t.settings.animation + '" data-id=' + i + "><span class=" + t.settings.cart + "-name>" + r + "</span><span class=" + t.settings.cart + "-price>" + s + '</span><input type="number" min="1" value="' + c + '" class=' + t.settings.cart + "-input><button class=" + t.settings.cart + "-remove>x</button></li>")
  }
},

需要兼容老版的游览器,需要在上面进行修改。下面是插件的配置文件

s = {
  currency: "$",
  currency_after_number: "false",
  permanent_cart_buttons: "false",
  display_total_value: "true",
  permanent_total_value: "false",
  animation: "fadeIn",
  empty_disable: "false",
  empty_text: "Your cart is empty",
  paypal: {
  business: "office@createit.pl",
  currency_code: "USD",
  lc: "EN",
  cpp_cart_border_color: "",
  cpp_payflow_color: "",
  no_note: "0",
  no_shipping: "0",
  "return": "",
  cancel_return: ""
  },
 lang:{  //我新增的属性,主要是用来支持多语言
  clear:'清空',
  checked:'结算'
 },
};

实例化

$('body').ctshop({
  currency: '$',
  paypal: {
  currency_code: 'RMB'
 },
  empty_text:'您敢信,你的购物车居然是空的!',
});

很简单的吧。。

运行效果图如下:

JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】

完整实例代码点击此处本站下载

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
模仿jQuery each函数的链式调用
Jul 22 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
基于JavaScript实现简单的音频播放功能
Jan 07 Javascript
JavaScript满天星导航栏实现方法
Mar 08 Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 Javascript
jquery checkbox的相关操作总结
Oct 17 #Javascript
JS动态添加选项案例分析
Oct 17 #Javascript
Java  Spring 事务回滚详解
Oct 17 #Javascript
使用jquery.qrcode.js生成二维码插件
Oct 17 #Javascript
js浏览器html5表单验证
Oct 17 #Javascript
使用开源工具制作网页验证码的方法
Oct 17 #Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
Oct 17 #Javascript
You might like
php下通过伪造http头破解防盗链的代码
2010/07/03 PHP
php fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
非常全面的php日期时间运算汇总
2015/11/04 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
python简单图片操作:打开\显示\保存图像方法介绍
2017/11/23 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
Marc O’Polo俄罗斯官方在线商店:德国高端时尚品牌
2019/12/26 全球购物
数据库笔试题
2013/05/09 面试题
什么是Assembly(程序集)
2014/09/14 面试题
更夫岗位责任制
2014/02/11 职场文书
上课打牌的检讨书
2014/02/15 职场文书
劳动竞赛活动方案
2014/02/20 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
《她是我的朋友》教学反思
2014/04/26 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
无罪辩护词范文
2015/05/21 职场文书
小学体育课教学反思
2016/02/16 职场文书
基于Redis位图实现用户签到功能
2021/05/08 Redis