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打造最佳用户体验的登录页面的实现代码
Jul 08 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
extjs render 用法介绍
Sep 11 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
javascript计时器详解
Feb 28 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
js实现图片实时时钟
Jan 15 Javascript
js抽奖转盘实现方法分析
May 16 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
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
JavaScript中的Document文档对象
2008/01/16 Javascript
js获取事件源及触发该事件的对象
2013/10/24 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
详解Node项目部署到云服务器上
2017/07/12 Javascript
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
python自动化测试实例解析
2014/09/28 Python
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
python实现屏保程序(适用于背单词)
2019/07/30 Python
简单了解python元组tuple相关原理
2019/12/02 Python
使用 Python 遍历目录树的方法
2020/02/29 Python
python编程的核心知识点总结
2021/02/08 Python
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
物业经理求职自我评价
2013/09/22 职场文书
应届毕业生的自我鉴定
2013/11/13 职场文书
财务会计人员岗位职责
2013/11/30 职场文书
应届毕业生个人求职自荐信
2014/01/06 职场文书
2014年安全生产工作总结
2014/11/13 职场文书
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS